How can I get the script for a form/survey to work properly in Webflow?
TL;DR
- Use the Embed element to insert form containers and place external script calls in Page Settings > Before </body> tag.
- Avoid nesting inside Webflow Forms, use plain Div Blocks, ensure scripts load after the DOM, and test on the published site.
If your form or survey script isn’t working in Webflow, it’s usually due to incorrect embed placement, missing initialization, or conflict with Webflow’s native forms. Here's how to set up a script-based form or survey properly.
1. Choose the Right Embed Method
- Use Webflow’s Embed element (found in the Add panel under Components > Embed).
- Paste only the necessary part of the script that renders the form (without
<html>,<body>, or<script src="">if it's already hosting external scripts).
2. Place the Embed in the Right Location
- Place the Embed element where you want the form to appear on the page.
- For scripts that require page-level initialization or external JavaScript libraries (like Typeform, Google Forms, or SurveyMonkey), embed them in the Page Settings > Before </body> tag section.
3. Check External Script Dependencies
- If your script relies on an external JavaScript file, you must:
- Paste the script call (e.g.,
<script src="https://example.com/form.js"></script>) into Page Settings > Before </body> tag. - Then, embed the form container (e.g., a
<div>with a specific ID) in the Webflow page using the Embed element.
4. Prevent Conflicts With Webflow Forms
- Avoid placing custom script forms inside Webflow Forms, which trigger built-in behaviors (like AJAX submission).
- Use a plain Div Block + Embed element instead to maintain full custom behavior.
5. Load Scripts Safely Inside Webflow
- If the script needs to run after the DOM is ready, ensure it wraps in something like
window.onloador place it at the bottom of the page using Page Settings > Before </body> tag. - For example:
- Place
<script>tags in custom code footer to ensure form loads only after the full page renders.
6. Use a Clean Publish/Test Workflow
- After embedding scripts, Publish to the Webflow staging domain (e.g., yoursite.webflow.io) first.
- Test on the live site (not just in Designer preview), as scripts may not run properly inside Webflow’s preview environment.
7. Enable Third-Party Scripts (if needed)
- If you're using services like Google Forms embedded via iframe, ensure the Custom Code is allowed on your Webflow plan (available on paid site plans).
- For integrations like Typeform or Jotform, use their full embed code inside an Embed element.
Summary
To get a form or survey script working in Webflow, use the Embed element for embed containers, the Before </body> tag section for external scripts, and ensure all scripts are properly loaded and not conflicting with Webflow’s native form behavior. Always test your setup on the published site.