Updated 
May 27, 2020

Typeform allows you to build conversational forms, surveys, quizzes, and more – no coding required.

Typeform is a web-based platform that makes collecting and sharing information easy and conversational. You can use it to create surveys, apps, and more — without writing a single line of code. We’ll go over the 4 ways you can add Typeform to your Webflow project. 

In this lesson:

  1. Link to a Typeform
  2. Embed a Typeform in your project 
  3. Create a button that shows Typeform in a popup
  4. Place a Typeform into a responsive div block 

Link to a Typeform

You can add any link to your project — we’ll use a button for this lesson. 

To add a button to your project:

  1. Click the Add Elements icon in the left panel  (or, press “A” on your keyboard)
  2. Scroll to the Basics section in the Elements tab
  3. Drag a Button into your project

After adding the button, the Link Settings popup will open. If you're updating a previously added button, you can either click the cog icon on the button element in the canvas or open the Settings panel on the right to adjust your button settings.

In the form you created in Typeform, click the Share tab then Copy under Share your typeform.

Note: Make sure your Typeform is published first

Head back to the Designer of your Webflow project and paste the copied link into the URL field of your Button element’s link settings.

And that's part one!

Embed a Typeform in your project

First, you’ll want to create a blank page in your project for your Typeform. 

To add a page to your project:

  1. Click the Pages icon in the left panel (or, press “P” on your keyboard)
  2. Click the Create New Page icon


Now add an Embed element onto the blank page:

  1. Click the Add Elements icon in the left panel  (or, press “A” on your keyboard)
  2. Scroll to the Components section in the Elements panel
  3. Drag an Embed element onto your page

In a form you created in Typeform, click Share and then under More ways to share, click Embed into a web page.

Choose the Full page option, click Get the code, and then Copy code from the popup that appears.

Back in the Designer of your Webflow project, paste the copied Typeform code into your Embed element. Once it's pasted in, click Save & Close

Be sure to publish your project — the embed will only appear on the published or exported site. 

To publish and view your project:

  1. Click the Publish dropdown button (or, press Shift + P on your keyboard)
  2. Click Publish to Selected Domains 
  3. Click the link of your domain

Now you have a fully functional Typeform in your Webflow project.

You can link to this page from anywhere on the web. A common practice is adding the link to a separate page. When someone clicks on that link, it will take them to the full page you just created with the Typeform embedded.

Create a button that shows Typeform in a popup

Back on the same design you used in part 1, you’ll delete the button from earlier. From the Add panel, you’ll add an Embed element where the button was.

Once you’ve done that, head back to your Typeform, click the Share tab, and choose the Embed into a web page option from the More ways to share section. 

Choose the Popup option. You have a few choices for your button settings:

  • Text (e.g. Get Started)
  • Color
  • Font size
  • Border radius

Finally, click Get the code.

Back in your Webflow project, open your Embed element. Paste the code snippet from Typeform, Save & Close, and publish.

You can’t change the text color of our button in Typeform, but you can change it inside your Webflow project. 

To change your Typeform button’s text color:

  1. Select your Embed element on the canvas
  2. Scroll to the Typography section in the Style panel on the right, and click the color picker. Choose a color that fits your project
  3. Copy the HEX code value to your clipboard (e.g., #c3013f).
  4. Go back into your Embed element and search your code for the word “color.” You can do this by pressing Command F on Mac or Control F on PC and typing “color.” What you’re looking for is color, colon, white (e.g. color:white). This means the color for text here is white.
  5. Replace “white” by pasting the copied HEX code. Make sure there is only one pound (#) sign in front of the value.

You can search fonts right in your Embed element. Press Command F (on Mac) or Control F (on Windows) and type font-family. Your code may show the font “Helvetica.” You can replace or add a value that fits your project (e.g., Playfair Display). Save & Close and publish.

Now, if you click that button on the live site, the popup should work exactly as expected.

And that’s Typeform in a popup. 

Place a Typeform into a responsive div block

Your fourth option is to put a responsive Typeform inside a div block. 

Here’s how you can setup your responsive div block and Embed element:

  1. Drag an Embed element into the div block you’d like to hold your Typeform
  2. Scroll to the Position section in the Style panel for the Embed element (make sure the Embed element is selected), and change the position from relative to absolute
  3. Adjust the positioning to be a percentage of the total size (e.g., add 5% to all four sides by holding Shift and dragging the position controls)
  4. Select the div block that’s holding the Embed element.
  5. Scroll to the Position section in the Style panel for the div block and change the position to relative.
Note: When an element’s position is set to “absolute”, it places itself inside its parent element. But it will ONLY do that if its parent element (the element it sits in) is set to relative positioning (or any other position that’s not static)

In Typeform, under the Share tab, choose the Embed into a web page option from the More ways to share section. Within the Standard option (the default), change the height to 100%. Click Get the code, then Copy code from the popup that appears.

Back in Webflow, open your Embed element within your responsive div block and paste the Typeform code snippet you just copied. Save & Close, and publish your project.

On the published site, the code embed respects the rules you set inside the Designer.

That’s connecting Typeform to a Webflow project. Great work!

Related integrations