How can I add a code snippet to my Webflow page for a contact form?
TL;DR
- Use the Embed element in Webflow Designer to insert your code snippet directly on the page.
- For scripts that won't run in the embed, paste them into the Page Settings custom code section, then publish and test the live site.
To add a code snippet to a Webflow page for a contact form, you need to embed custom code using Webflow’s native embed functionality or include it in the page settings.
1. Prepare Your Code Snippet
- Ensure your code snippet is complete and includes all relevant HTML, CSS, and JavaScript if needed.
- Make sure any external assets (like script sources, API endpoints) are secure (https) and reliable.
2. Use the Embed Element in the Webflow Designer
- Go to the desired page in the Webflow Designer.
- Drag an “Embed” element from the Add ( + ) panel into the canvas where you want the form.
- Paste your code snippet inside the embed pop-up window.
- Click "Save & Close" to insert it.
3. Add Code in Page Settings (Optional)
If your code includes <script> tags that don’t work within the Embed element, add them in the page settings.
- Go to Page Settings by clicking the gear icon next to the page name in the Pages panel.
- Scroll down to the Custom Code section.
- Paste your snippet under Before </body> tag for scripts, or Inside <head> tag for CSS/meta code.
- Save changes and publish your site.
4. Publish Your Site
- Webflow's Designer does not render custom code snippets in preview mode.
- You must click “Publish” to see the code working on the live site.
5. Test the Functionality
- Visit the live site and test the contact form to ensure it submits and behaves as expected.
- Check for console errors if the form doesn’t work.
Summary
To add a contact form code snippet in Webflow, use the Embed element in the Designer or place scripts in the Page Settings custom code section, then publish your site to see it in action.
