Pipedrive webforms not loading inside react bootstrap modal

Question

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.

Answer 1

The problem was when your modal is closed, the div with class pipedriveWebForms is not rendered. To fix it you need to load the JavaScript every time you open the modal.

This is what I did:

  openModal = () => {
    this.setState({ isOpen: true });
    const script = document.createElement("script");
    script.src = "https://webforms.pipedrive.com/f/loader";
    script.defer = true;
    document.body.appendChild(script);
    this.setState({ pDriveScript: script });
  };
  closeModal = () => {
    this.setState({ isOpen: false });
    document.body.removeChild(this.state.pDriveScript);
  };

Or just use the embed tag.

      <embed src="https://webforms.pipedrive.com/f/33bqHAoXSWM37q2MD4RrpBN4sx7TNeZ7SfED403dZ90EBjtERc2JOptKx7juMQQrV"/ >