How can I remove the white space at the top of a Typeform survey when embedding it onto my webpage using Webflow?

Published on
September 22, 2023

To remove the white space at the top of a Typeform survey when embedding it onto your webpage using Webflow, you can follow these steps:

  1. Open your Webflow project and go to the page where you want to embed the Typeform survey.

  2. Drag and drop an Embed element onto your page from the "Add" panel on the left side of the designer.

  3. Go to Typeform and copy the embed code for your survey. You can find this code by navigating to your survey's "Share" settings and selecting the "Embed" option.

  4. Paste the embed code into the Embed element in Webflow.

  5. By default, Typeform's embed code includes some styling that adds a margin and padding to the top of the survey. To remove the white space, you can add some custom CSS code to override these styles.

  6. Double-click on the Embed element in Webflow to open the code editor.

  7. Add the following CSS code inside a <style> tag:

[typeform-embed] {  margin: 0 !important;  padding-top: 0 !important;}
  1. Save and publish your changes.

With these steps, you should be able to remove the white space at the top of the Typeform survey when embedding it onto your Webflow webpage. Remember to adjust any other styling as needed to match your site's design.

Additional Questions:

  • How do I embed an external form into my Webflow site?
  • Can I customize the appearance of the embedded Typeform survey in Webflow?
  • Is it possible to add animations or interactions to a Typeform survey embedded in Webflow?