Embed your form in a Webflow site

Webflow offers a highly customizable website building platform with a no-code approach, meaning that it’s accessible to all, and perfect for the needs of a growing business.

Read on to learn how you can embed your typeform into your Webflow site. Make it easy to collect leads, recommend products, register signups, or answer common questions!

There are two ways to embed a typeform into a Webflow site:

- Using the Typeform app in Webflow

- Using the Typeform embed code

Here’s what you’ll need to get started:

- A typeform you’d like to embed

- A free Webflow account if you're using the Typeform app in Webflow

- A paid Webflow account if you're using the Typeform embed code. If you’re on a Free account, you won’t be able to embed your Typeform embed code into your Webflow site, but you can use a Button or Link Block element to link to your form, instead.

Scroll down to read more, or click one of the following links to jump to that section:

- Embed your typeform in Webflow with the Typeform app

- Build your typeform and generate embed code

- Embed your typeform on a Webflow page

- Embed your typeform on all Webflow site pages

Have more questions about embedding on Webflow after reading this walkthrough? You can read Webflow’s guide to custom code embeds here.

Embed your typeform in Webflow with the Typeform app

If you’ve already created some typeforms, you can start embedding them straight away with the Typeform app in Webflow. You won’t have to switch between your Webflow site and your Typeform workspaces, or even have to open up an individual typeform to grab your embed code.

To embed a typeform in Webflow with the Typeform app:

1. Click this link to go straight to the Typeform app in the Webflow marketplace:

2. Click + Sign in to add in the top right corner if you haven’t already signed in to Webflow:

3. Enter your Webflow login credentials and click Log in:

4. Click + Add to site to add the Typeform app to your Webflow site:

5. To authorize the Typeform app, search for your Webflow workspaces or use the checkboxes to select them:

6. Once you’ve selected the workspaces you’re authorizing for the Typeform app, you can click Authorize App:

You’ll be taken to your Webflow workspace where you can open up an existing site or create a new one to start embedding your typeform:

7. To open an existing site, hover over it and click the Open Designer button that appears:

Now you’ll see your Webflow site in the designer:

8. Go to Apps on the left-hand panel and click it:

9. Hover over the Typeform field and click the Launch button that appears.

10. Here you can click Create new form to start building a form from scratch:

11. Log into your Typeform account, if you haven’t done so already:

Now you'll see the Typeform builder with different options to start creating a new form. You can find step-by-step instructions on how to create new form here.

You can also click Select form to add an existing form, if you've created one already:

I know I’ve said you wouldn’t have to flip back and forth between the two, but if you want to, you can also grab your typeform URL from the Create or Share panels in Typeform by copying the link…

… and pasting it in the URL field in Webflow, then clicking Embed.

In this example, let's look at the Select form option that takes you to your Typeform workspaces, where you can browse freely for the typeform you want to embed into your Webflow site. 

Now you can see your Typeform workspaces with an Embed form button on each of your forms:

12. You can search for or use the filters to find the typeform you’re looking for, and when you’re ready, click Embed form on the typeform you want to embed into Webflow:

You can also click the three dots next to a form to open it. You can rename, duplicate, or copy the form, or perform any other tasks available to your workspace role.

Once you open the form, you can add, delete, or edit its questions, adjust its design settings, or add logic to it, and simply click Embed in the top right corner when you're ready.

You can also switch between the different organizations you're a part of, add new workspaces or create new forms here, and customize them however you please.

13. Tada! The selected typeform has been added to your Webflow site:

14. Now that you've embedded your form, you can click Edit form to do just that, or Select form to replace it with a different one:

15. You can also click Customize embed settings, then toggle the switches to adjust the embedded typeform’s settings, or click Show All Settings to open and edit the form in the Typeform builder:

There you go! You’ve just embedded your Typeform into Webflow without having to mess around with your embed code, or switch between your Typeform and Webflow views while copying and pasting bits of code. You can ditch that second screen for now. You’re welcome :)

Build your typeform and generate embed code

1. Ready to start creating the perfect form? All you need to do is log into your Typeform Workspace and create a new typeform. Start from scratch, or choose one of our templates:

2. Now, add your favorite design and all the questions you need to ask. New to Typeform? Check out our guide to your first typeform here.

If you’re creating a form to do a specific job, like scheduling appointments or collecting orders, you can also check out our Do more with Typeform section for ideas, or click on one of the guides below:

• Capture leads with Typeform contact forms
• Use Typeform to collect event planning and registration signups
• Schedule Calendly appointments with Typeform

3. When your typeform is ready, click Publish in the top right corner of the screen. (You can also preview your form before publishing, to make sure everything looks right!)

4. Now that your typeform is live, it’s time to share it with your audience! Click the Share tab at the top of the page.

The Share page includes a variety of possibilities for sharing your typeform as an embed. 

Read about Typeform’s embed options here, and click Embed in a web page and select your preferred embed style to preview the embedded form:

You can embed your typeform on Webflow in any of the available formats.

5. After you’ve saved any custom embed settings, click Start embedding:

6. Select Webflow from the dropdown and click Copy:

This code is ready to go - all that’s left is to paste it into your Webflow page.

Embed your typeform on a Webflow page

1. Open your Webflow site designer from your Dashboard:

2. Within the designer, navigate to the page where you’d like to add your embedded typeform.

3. Click Add Element in the upper left-hand corner of the Designer:

4. Scroll down to the Embed (</>) element under Advanced.

Drag and drop an Embed element to the place on the page where you’d like your typeform to appear:

5. In the dialog box that appears, paste in your embed code from Typeform. (Not sure where to find your embed code? The section above has everything you need to know!)

Click Save & Close at the bottom of the editor.

6. Your embedded form will display after you publish your Webflow site. To publish your site, click the Publish button in the top toolbar. Select the domains you’d like to publish to, then click Publish to Selected Domains:

Open your site(s) after they’ve been published to make sure that everything is working correctly!

You can also preview your form on Typeform to check that everything is behaving as expected.

Embed your typeform on all Webflow site pages

You might want your typeform to show up on every page on your Webflow site, particularly if you’re embedding a contact form or FAQ guide.

This is easy to set up in your Webflow site settings, and it works especially well with the Side tab or Popover embed options.

1. From your Webflow Dashboard, click the three-dot menu on the card of the site where you’d like to embed your typeform:

2. Choose Settings.

3. Click the Custom Code tab. Paste in your typeform’s embed code in the Head Code box. (Not sure where to find your embed code? The section above has everything you need to know!)

Then, click the green Save Changes button.

4. You’ll have to publish your changes to see the embedded typeform on your site. Click the blue Publish button in the top right of the page. Then, choose the domains you’d like to publish to, and click Publish to Selected Domains:

5. Open your site(s) after they’ve been published to check that your typeform has embedded correctly.

You’re all set! Want more ideas for making the most out of Typeform? Our Do more with Typeform section has dozens of guides to get you started.

For tips on making your Webflow site the best it can be, check out the Webflow University.