What settings do I need to change in Webflow to display the full height of a Typeform embedded using the embed function?

Published on
September 22, 2023

To display the full height of a Typeform embedded using the embed function in Webflow, you will need to adjust the following settings:

  1. Set the height of the embed component:
  • Open the page where you have embedded the Typeform.
  • Locate the embed component and select it.
  • In the Style panel, specify the height of the component. You can set it to 100vh to make it occupy the full height of the viewport.
  1. Enable scrolling for the embed component:
  • While the embed component is selected, go to the Settings panel.
  • Check the "Overflow" option and select "Scroll" from the dropdown menu. This will allow the embedded Typeform to be scrolled if its content exceeds the height of the component.
  1. Adjust the height of the Typeform:
  • Access your Typeform account and open the form you want to embed.
  • In the Typeform Builder, go to the Settings tab.
  • Scroll down to the "Embed" section and click on the "Customize" button.
  • In the customization options, adjust the height of the form. You can set it to 100% to match the height of the embed component in Webflow.

By following these steps, you can ensure that the Typeform embedded in Webflow will display the full height and be scrollable if needed.

Additional Questions:

  1. How do I adjust the height of an embedded Typeform in Webflow?
  2. Can I make a Typeform embedded in Webflow occupy the full height of the viewport?
  3. What settings should I change to enable scrolling for an embedded Typeform in Webflow?