Marvin A.
Marvin A.

Reputation: 13

How to use Pipedrive-Form in NextJs & rerender the Form on every fast refresh

Newbie alert! So I am trying to embed a Pipedrive form in a Nextjs component. Which works fine as long as I don't switch to another page. The fast refresh does not serve the form anymore.

function AnfrageSection() {
  const script_form = (
    <Script
      id={Date.now()}
      src="https://webforms.pipedrive.com/f/loader"
    ></Script>
  );
  const form_div = (
    <div
      key={Date.now()}
      className="pipedriveWebForms"
      data-pd-webforms="https://webforms.pipedrive.com/f/EXAMPLEFORM_ID"
    ></div>
  );

  const [formLoader, setFormLoader] = useState(script_form);
  const [form, setForm] = useState(form_div);

  useEffect(() => {
    setFormLoader(script_form);
    setForm(form_div);
    console.log("RERENDER");
  }, []);

  return (
<div id="anfragen">
      {formLoader}
       {form}
 </div>
);
export default AnfrageSection;

I tried useEffect() to force reloading of both the external script and the form. But as soon as I go to another page and come back the form is gone.

Upvotes: 1

Views: 564

Answers (0)

Related Questions