How to Embed a Form in Webflow

Webflow is one of the most powerful no/low-code web builders available, loved by web designers and non-designers alike.

Webflow gives you the tools to build everything you'd expect to find on a website, including forms.

However, Webflow only lets you create basic forms. If you want features like multiple steps, conditional branches, and custom validation, you'll need to embed a form built on Feathery.

Feathery is a low-code form builder that makes it easy for anybody to build great forms. In this article, you'll learn how to embed a Feathery form into your Webflow site.

A quick start with Feathery

First, you’ll want to create an account with Feathery. After that, all you need is a form. You can create one yourself or start with a pre-built template.

To create a form, go to the Forms tab, click Create Form, name your form in the pop-up, and click Create.

Now you should see the first step of your form. Click the step to open the visual editor. Then add an element from the menu on the left to your form. Feathery uses drag-and-drop components just like Webflow.

You can add various elements like buttons, text, and fields based on your needs.

You don’t actually need to build out your form yet. You just need something in it that will show up when you embed the form in Webflow.

Just be sure to hit publish in the upper-right hand corner when you’re done. And go back to the dashboard with the button in the upper-left.

Grabbing the embed snippet

Now that we have something to embed, it’s time to get the code. Click the dropdown arrow next to the publish button, and click the Javascript link under the embed section. This will copy the embed code of the live form to your clipboard.

To embed a preview version of your form, switch out the live SDK key in the embed code for your test key, which can be found in your settings. You can get there by clicking the gear icon in the bottom lefthand side of the dashboard menu.

In Feathery, a test key enables preview mode, which means that you can test and freely navigate your form without restrictions. The Live SDK key will show your embedded form as a finished product.

If you want to take a deep dive, you can get more info from Feathery’s docs.

Embedding a Feathery form in Webflow

This article’s focus is on using Feathery. If you need help using Webflow, you can get it from the official Webflow documentation.

Open up your website in the Webflow designer. Add an Embed element to your site where you want the form to appear.

Once you’ve added the Embed element, a code editor will pop up. Paste your snippet into the editor box. But don’t close it just yet.

Now you can Save & Close the editor.

Before you can see the embed, you’ll need to publish your page and preview it.

If you did everything right, you should now see your form on your page. Congratulations!

If your form isn’t displaying, open up the embed element’s code editor and double-check that you pasted everything properly.

Do more with Feathery and Webflow

Like Webflow, Feathery is built with designers and developers in mind. Feathery offers a fully flexible 2D visual editor with drag-and-drop controls for creating custom layouts and content. Webflow users that leverage Feathery can:

• Build signup/login pages that perfectly match brand style
• Design beautiful waitlist, contact, and lead capture forms
• Easily integrate forms with third-party tools, like Hubspot and Mailchimp

Feathery also supports setting up your own design system as an easy-to-edit theme directly in the platform, allowing your form to blend in seamlessly with the rest of your site.

Interested in using Feathery's Webflow-like designer to create your next form? Get started with a free account here.