Typeform is a powerful tool for creating interactive forms and surveys. If you are using Webflow to build your website, you may want to embed a Typeform into your page to collect user data or gather feedback. In this tutorial, we will walk you through the steps of embedding a Typeform into Webflow.
To get started, open your Webflow project and navigate to the page where you want to embed the Typeform. Let’s assume you want to add it to a section of your homepage. Here’s how you can do it:
Step 1: Create Your Typeform
First, log in to your Typeform account or create a new one if you don’t have an account already. Once logged in, click on the “Create a typeform” button to start building your form or survey. Typeform provides an intuitive interface that allows you to customize every aspect of your form.
Step 2: Customize Your Typeform
After creating a new typeform, you can customize its design and content according to your preferences. You can choose from various question types such as multiple-choice, short answer, rating scale, and many more. Additionally, you can apply themes and styles that match your website’s branding.
Step 3: Get the Embed Code
Once you have finished designing and customizing your typeform, it’s time to get the embed code. To do this, click on the “Share” button located at the top right corner of the typeform editor. In the sharing options panel that appears, select the “Embed” tab.
In this section, you will find different customization options for embedding your typeform into external websites or platforms. For Webflow integration specifically, make sure that the “Webflow” option is selected.
Copy the provided JavaScript code by clicking on the copy button next to it. This code contains all the necessary instructions to embed the typeform into your Webflow page.
Step 4: Embed Typeform in Webflow
Head back to your Webflow project and open the page where you want to embed the typeform. In the Webflow Designer, select the element or section where you want to place the typeform.
For a full-width typeform:
If you want the typeform to occupy the entire width of your page, create a new div block by clicking on the “+” icon in the Navigator panel. Give it a meaningful class name like “full-width-typeform”.
In this div block, paste the previously copied JavaScript code. You can do this by selecting the div block and pressing “Ctrl+V” or right-clicking and selecting “Paste”. Save your changes, and you have successfully embedded a full-width typeform into your Webflow page.
For a specific-sized typeform:
If you want to embed a typeform with specific dimensions, create an HTML embed element instead of a div block. To do this, click on the “+” icon in the Navigator panel and select “HTML Embed”.
Position and resize the HTML embed element according to your desired dimensions. Next, paste the JavaScript code into the HTML embed element by selecting it and pressing “Ctrl+V” or right-clicking and selecting “Paste”. Save your changes, and you now have an embedded typeform with custom dimensions on your Webflow page.
Conclusion
Embedding a Typeform into your Webflow website is a simple process that allows you to collect valuable data from your users. By following these steps, you can seamlessly integrate interactive forms or surveys into any section of your website.
Remember to customize your Typeform’s design and content before embedding it to provide a consistent user experience. With Typeform’s flexibility and Webflow’s powerful design capabilities, you can create engaging forms that blend seamlessly with your website.