Pipedrive webforms not loading inside react bootstrap modal

I have a pipedrive form that needs to be render inside the react bootstrap modal. But it simply does not load the form. Its totally empty.

<Modal size="xl" show={this.state.isOpen} onHide={this.closeModal} dialogClassName="contact-modal modal-xl">
      <Modal.Header closeButton>
        <Modal.Title>Contact Us</Modal.Title>
      </Modal.Header>
      <Modal.Body className="px-0">
        {
          this.state.isOpen &&
          <div className="pipedriveWebForms text-center" data-pd-webforms="https://webforms.pipedrive.com/f/33bqHAoXSWM37q2MD4RrpBN4sx7TNeZ7SfED403dZ90EBjtERc2JOptKx7juMQQrV">
                    <script src="https://webforms.pipedrive.com/f/loader" defer></script>
                </div>
            }
             
      </Modal.Body>
    </Modal>

Here is the sandbox,
https://codesandbox.io/s/amazing-albattani-lbth3?fontsize=14&hidenavigation=1&theme=dark

I tried keeping the script inside the componentdidmount, componentwillmount and inside the head tag. but it does not work. While keeping it outside the modal, the form works. I have been trying to find out why its not working inside the react bootstrap modal.

I am just a beginner working with react and its been a hard time trying to find a solution.

53 thoughts on “Pipedrive webforms not loading inside react bootstrap modal”

Leave a Comment