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.
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.
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.
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.
You’ll need to change two parts of your code first:
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.
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:
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.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.