Ready to build a website that does it all? 🏆 Get the free Webflow x Typeform ebook

here
Signup
 

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 form 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 form 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 form 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 form in Webflow with the Typeform app

- Build your form and generate embed code

- Embed your form on a Webflow page

- Embed your form 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 form in Webflow with the Typeform app

If you’ve already created some forms, 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 form to grab your embed code.

To embed a form in Webflow with the Typeform app:

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

Screenshot 2023-10-16 at 11.06.30.png

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

Sign in to add.png

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

Webflow_login.png

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

Add_to_site.png

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

Authorize_select.png

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

Authorize_click.png

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 form:

Screenshot 2023-10-16 at 11.38.27.png

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

Open_designer.png

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

Screenshot 2023-10-16 at 10.53.15.png

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

Webflow_apps.png

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

Launch_app.png

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

Screenshot 2023-12-11 at 10.43.50.png

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

Typeform login.png

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.

Screenshot 2023-12-11 at 10.45.31.png

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

Webflow_select_form.png

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 form URL from the Create or Share panels in Typeform by copying the link…

Screenshot 2024-05-21 at 12.12.26.png

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

Webflow_embed.png

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 form you want to embed into your Webflow site. 

Webflow_select_form.png

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

Screenshot 2024-04-23 at 17.28.53.png

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

Screenshot 2024-04-23 at 17.30.34.png

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.

Screenshot 2023-10-03 at 11.32.54.png

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 when you're ready.

Screenshot 2024-04-23 at 17.35.25.png

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.

Screenshot 2024-04-23 at 17.36.41.png

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

Screenshot 2023-12-11 at 11.16.45.png

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:

Webflow_edit_select.png

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

Screenshot 2023-12-11 at 11.26.33.png

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 form 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 form. Start from scratch, or choose one of our content creation options:

Screenshot 2024-04-24 at 11.59.53.png

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

Screenshot 2024-04-29 at 10.18.11.png

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 form 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!)

Screenshot 2024-04-29 at 09.13.34.png

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

Screenshot 2024-04-29 at 10.19.41.png

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

Screenshot 2024-05-21 at 12.14.23.png

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:

Webflow_embed_mode.png

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

HC_Note_new.png
Note: If you choose to embed in a full-page format, you may need to adjust the CSS of the Webflow page so that your form displays properly. Unfortunately, our team can’t provide support for custom coding solutions, but you may find this Community discussion helpful!

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

Webflow_start_embedding.png

6. Select Webflow from the dropdown and click Copy:

Group_167__1_.png

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

Embed your form on a Webflow page

1. Open your Webflow site designer from your Dashboard:

webflow8.png

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

webflow9.png

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

webflow10.png

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

Screenshot 2023-09-18 at 11.36.11.png

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

webflow12.png

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!)

webflow13.png

Click Save & Close at the bottom of the editor.

HC_Note_new.png
Note: You can add further custom styling options to your embed code here. However, you may want to keep a developer friend or colleague on hand, as the Typeform team can’t provide support for custom code.

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:

webflow14.png

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

webflow20.png

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

Embed your form on all Webflow site pages

You might want your form 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 form:

webflow15.png

2. Choose Settings.

webflow16.png

3. Click the Custom Code tab. Paste in your form’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.

webflow17.png

4. You’ll have to publish your changes to see the embedded form 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:

webflow18.png

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

webflow19.png

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.

Tap into our community knowledge