Pipedrive webform not working

Describe the bug

Hey guys I’ve got a prob here. So I’m going to include a Pipedrive web form on my landing page. This is the code snippet given by Pipedrive.

However, it’s not rendering most of the time and it shows “canceled” in the console. So I tried to use iframe instead of div, and it renders properly every time. But one prob now is I wanna redirect to another page after the user submits the form. If I use an iframe to render out the webform, it only redirects to a new page in the iframe but not the whole page. I wonder if there’s any way to solve this?

*The code works properly in svelte repl tho. I assume this is a sveltekit issue

Reproduction

Code snippet given by pipedrive(not rendering)

<div class="pipedriveWebForms" data-pd-webforms="https://webforms.pipedrive.com/f/c54Q8p5Xk9h2TKrTxhDcoEX6zKN0QOHuOAalQUIPiIh1UX31CXcpNgIijy1PAj8gHp"><script src="https://webforms.pipedrive.com/f/loader"></script></div>

code snippet that’s rendering but redirecting only in the iframe <iframe class="pipedriveWebForms" data-pd-webforms="https://webforms.pipedrive.com/f/c54Q8p5Xk9h2TKrTxhDcoEX6zKN0QOHuOAalQUIPiIh1UX31CXcpNgIijy1PAj8gHp"/><script src="https://webforms.pipedrive.com/f/loader"></script>

if I include it in svelte:head it works as well

<svelte:head>
<div class="pipedriveWebForms" data-pd-webforms="https://webforms.pipedrive.com/f/c54Q8p5Xk9h2TKrTxhDcoEX6zKN0QOHuOAalQUIPiIh1UX31CXcpNgIijy1PAj8gHp"><script src="https://webforms.pipedrive.com/f/loader"></script></div></svelte:head>

Logs

No response

System Info

System:
    OS: macOS 12.3.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 296.08 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.10.0 - ~/.nvm/versions/node/v16.10.0/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 7.24.0 - ~/.nvm/versions/node/v16.10.0/bin/npm
  Browsers:
    Chrome: 98.0.4758.80
    Safari: 15.4
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.50 
    @sveltejs/kit: next => 1.0.0-next.347 
    svelte: ^3.44.0 => 3.48.0

Severity

annoyance

Additional Information

No response

[Rich-Harris]

Yeah, delaying the script loading works. Feels suuuper janky though — massive layout shift because the form isn’t server-rendered, and it will only work for the first page load. If you have any say in the matter I would recommend avoiding this method of adding forms to your site.

Though I assume they have an SDK that lets you programmatically add forms to elements that are created after the script has loaded, which should help in the client-side navigation case.

Unclear why it’s sensitive to hydration timing, but it feels very much like a Pipedrive issue rather than a SvelteKit issue so I’ll close this.

[Rich-Harris]

@kamerat then maybe you can provide a repro, in the absence of one from @tant2012?