Streaming live at 10am (PST)

Embed Typeform into Webflow


#1

Hello everybody,

I'm having trouble embedding a Typeform into a Webflow.
I want to integrate as a full page, so I am copying the "Full page code" from Typeofrm, (but as a widget could also work).

Then I paste the code in Webflow using the "HTML embed" element. Even after publishing and in preview mode it doesn't show up !!
Is there something wrong with the elements am using, or just something else ? I do not know much in coding...

When I'm using the iframe it appears to be very small... and do not know how to extend it.

Thanks in advance


#2

Some things are wrong in the code you pasted.

Can you post here all the code that you're required to add to webflow? Paste it then wrap it into those brackets.

Also can you please share your seit'es read only link? (read the first post of the forum)


#4

Hi Vincent,

Here is the code from Typeform for the "Full page code".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

  <!--Add the title of your typeform below-->
  <title>Demande de devis de déménagement en ligne</title>

  <!--CSS styles that ensure your typeform takes up all the available screen space (DO NOT EDIT!)-->
  <style type="text/css">
    html{
      margin: 0;
      height: 100%;
      overflow: hidden;
    }
    iframe{
      position: absolute;
      left:0;
      right:0;
      bottom:0;
      top:0;
      border:0;
    }
  </style>
</head>
<body>
  <iframe id="typeform-full" width="100%" height="100%" frameborder="0" src="https://boussenot.typeform.com/to/t00RTE"></iframe>
  <script type="text/javascript" src="https://s3-eu-west-1.amazonaws.com/share.typeform.com/embed.js"></script>
</body>
</html>

and here is read only link:
https://preview.webflow.com/preview/boussenot?preview=9b4bb69544e9b9dfd007f035755933bf


#5

Ok so, to begin with, you can paste all this code in the custom code HEAD section at page level (diplay the page panel, click on the page options, go down and it's the first box of custom code)

Those are the style declarations so they need to be in the HEAD section.

  <style type="text/css">
    html{
      margin: 0;
      height: 100%;
      overflow: hidden;
    }
    iframe{
      position: absolute;
      left:0;
      right:0;
      bottom:0;
      top:0;
      border:0;
    }
  </style>

Add the following code into the box below, the box for code that will appear before the /body

<script type="text/javascript" src="https://s3-eu-west-1.amazonaws.com/share.typeform.com/embed.js"></script>

Now add the iframe into the designer view in a HTML embed:

<iframe id="typeform-full" width="100%" height="100%" frameborder="0" src="https://boussenot.typeform.com/to/t00RTE"></iframe>


#6

Come back when you did that, and tell us on what page you're working :slightly_smiling:


#7

OK Vincent,

(lunch break in France)

We are on the way, thanx a lot.
I'm working and trying on both pages "Code trial" & "Test"

Now it s appearing but it's still very small... Can't manage to lower the whole frame.


#8

(Yep, I had a fougasse with fromage de chèvre, and exceptionally a guy brought oysters from île d'Oléron, what did YOU get? ;-p )

Ok so your iframe is set to catch the max size of its container, let me go there to see what's possible to do. Be right back.


#9

So what's your goal?

I deleted your class on the html embed element because you already put a lot of margins and stuff there so... just to start clean. I added my class and just put a height, and I get that:

Do you have a mockup or photoshop of what you want to achieve?


#10

OK great.

I had a bowl of rice with maquereaux... Oysters sounds nice.

Almost there . Thank you ! I need to put Height margins at 700px (compare to your 60px) but so far so good.
I'm trying to embed a full page Typeform. On my mocket I have a widget but prefer a full page Typeform.

One last thing, when I'm pasting the navigation header, it's not pasting it correctly, and it is not overlayed on the typeform with transparency, like it is on the home page.. any tips ?

Merci beaucoup


#11

Ok, start to do things differently:

  • On home page, select the hero section and cancel the negatif top margin. (or zero it)
  • Select your navbar (dble click to edit the symbol) and click sur positon absolute (rather than relative) also set it to 100% width.

Now that's how you should proceed when you need a navab to hover the content. Make what's necessary on other page (remove negative top margins mostly).

Now it should work on your form page when you drag the symbol at the top.

Also FYI I didn't set the form at 60px height but 60VH height (I typed in VH). It mean 60%of the height of the page. It's like % but better.


#12

OK great. It works for the navigation bar. Although we still have this problem with the logo.

Also I don't have access to VH for height but only (%, PX, AUTO)

PS : I guess you're French. D'où ça ?


#13

La Rochelle / Paris : )

You have to type in the vh and vw units. Type "100 VH" and you'll get the vh. That's a neat trick : )


#14

OK perfect.

Last question. When we copy and paste the header things like the logo and the "Hamburger button" are not pasting in other pages properly... With the thing you told me before if I redesign the navigation bar, it should paste from one page to another properly ? Otherwise I'd appreciate a final neat trick from you :wink:

Very helpful in any case so MERCI BEAUCOUP...


#15

I don't really understand what "not properly" means.

To place your navbar on other pages, as it is a SYMBOL (green), drag it from the symbols panel. And then check if it's well place in the tree view. Needs to be right under the body.

Look: https://v.usetapes.com/SacA3VeMJZ


#16