How can I get the script for a form/survey to work properly in Webflow?
TL;DR
- Place custom scripts in the correct location (Page Settings, Custom Code, or Embed block), depending on scope and script type.
- Verify element selectors (IDs, classes) are correctly assigned and match your script's references.
- Disable Webflow’s default form handling if using a custom back-end and use
e.preventDefault()to avoid duplicate submissions. - Always publish and test your form on the live site, and check the browser console for any script errors.
If your form or survey script isn’t working in Webflow, it often comes down to incorrect code placement, missing IDs or classes, or script conflicts. Here's how to get your form script running properly in Webflow.
1. Identify the Type of Script You're Using
- Built-in Webflow form? Webflow handles form submissions by default and sends data to your project’s form submissions dashboard.
- Custom scripts (e.g., Typeform, Google Forms, third-party APIs)? These require proper embed placement and possibly additional configurations.
2. Place the Script in the Correct Location
- Go to Page Settings (if the script is page-specific) or Project Settings > Custom Code (if site-wide).
- For scripts that affect page load or track events, place them:
- In the
<head>if they initialize early. - Before
</body>if they must run after page content loads. - If the script is inserted via an Embed element, only paste JavaScript marked for iframe use or light scripts — heavy scripts may not run properly.
3. Ensure Correct Selector Targeting
- Make sure your script is referencing existing form fields or elements by the right class, ID, or name attributes.
- Use the Element Settings panel to manually assign a custom ID or class to inputs, buttons, or forms if needed.
- For example, if your script targets
#email, ensure your Webflow input field actually has that ID.
4. Disable Webflow’s Native Form Handling (If Using Custom Back-End)
- If you're sending form data through an external API or custom script:
- Uncheck “Form Action” in Form Settings or set it to your custom endpoint.
- Avoid duplicate submission by preventing default behavior using
e.preventDefault()in your script.
5. Use Webflow’s Embed Element for Quick Testing
- Drag an Embed component into your form area.
- Paste your script (or iframe embed) there to test it in the Designer.
- Note: Some scripts won’t run inside the Designer preview — always publish to a staging domain for accurate testing.
6. Publish and Test on the Live Site
- Scripts often don’t function in preview mode or the Designer.
- Always publish the site and test interactions on your live webflow.io domain to verify script performance.
7. Check the Browser Console for Errors
- Open DevTools > Console (in Chrome or similar browser) to look for:
- Uncaught errors
- Blocked requests
- Reference errors (missing form fields or undefined variables)
Summary
To make a form or survey script work in Webflow, place the script in the correct area, ensure it targets the proper elements in your form, and test it on the live site. Use Webflow’s built-in settings or an Embed block depending on your use case, and closely review any errors in the browser console for troubleshooting.