Tutorials

How to Embed a Form in Webflow

Lee Nathan
|
Jun 2, 2022
|
5 mins

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. But first, you’ll need two items—the form name and an API key.

The form name is whatever you chose to name it in the previous section. Getting the name right is critical, so you should probably copy and paste it to make your life easier. The exact name is in the title located in the upper-left-hand corner or can be found under form name in your form settings.

Next, you’ll need your API key. That can be found in the settings. You can get there by clicking the gear icon in the bottom lefthand side of the dashboard menu.

There are two API keys here. In Feathery, development mode means that you can test and freely navigate your form without restrictions. The Development API key will let you do that from your website as well. The Production API key will show your embedded form as a finished product.

Next, you’ll need the actual embed snippet itself. This is the code:

Copy that and proceed to the next section.

Or, 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.

You’ll need to change two parts of your code first:

  • Replace APIKey with the API key you found in the previous section. Get rid of the angle brackets but keep the single quotes.
  • Do the same thing with formName but this time use your form’s name.

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? Sign up for early access here.

Related

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Image Caption here

Static and dynamic content editing

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!

  • Lorem
  • Lorem Doloar

How to customize formatting for each rich text

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.