Embedding forms in Webflow
How to embed a form into Webflow in three steps
Last updated
How to embed a form into Webflow in three steps
Last updated
Sheet Monkey's free form builder requires that you have the Chrome Extension installed. If you haven't already installed the Chrome Extension, please start there.
You can embed any form that you build with Sheet Monkey’s Form Builder by just copying and pasting our embed code into WebFlow. Let’s break that down into step by step:
Open the form that you want to embed by activating the extension. Once the form is open, select the “Share” link. (Learn more about sharing forms.)
You can embed your form as an iFrame or HTML. The right method of embedding a form depends on your requirements:
Choose an iFrame if you don’t want to change the styles of the form you built or customize the HTML markup.
Choose HTML if you want to modify the markup of the form and override the default styles. Note: If you chose this method, you will need to recopy this snippet into your HTML each time you change the form.
Once you’ve configured your embed code, click “Copy” and open your Webflow editor.
Login to your Webflow account . Then open the designer for the selected Webflow project and open the page where you want to embed the form.
Once you’re on the the correct page, click the add icon and find the Embed Component.
Paste the embed code that you received from the Form Builder into the box that appears and then click “Save & Close”
Your form should immediately appear in the editor. You can preview it and move it around like any other Webflow component.
Note that the embedded forms are also fully responsive for mobile devices and dark and light modes.
Prefer visuals? Here's a video of the steps to embed a form in Webflow.
If you're still having trouble, please get in touch with us and we'd be happy to help.
