Embed Typeform into Webflow – Webflow tutorial

By | February 15, 2020


So there are four ways we’re going to cover
adding Typeform to your Webflow project. The first is really straightforward — it links
out from a link in your project to Typeform’s website. Second is a full-page option, this
embeds a Typeform on a dedicated page INSIDE your project (that takes up the whole page).
The third option is a popup. This adds a script (when the site is published) it shows a clickable
button (a call to action) that launches our Typeform in a popup. And the fourth thing
we’re going to quickly cover is a way to put the form into an existing div block , we’ll
fit it into a responsive layout we already built in Webflow. Okay. First part. Two things here. We have
our Webflow project. That’s one. And we have our Typeform (we created a form in Typeform).
That’s two. And what we’ll do in Webflow is select any link (here we have a button). And
we’ll open up our link settings. Now, you’ll probably want to make sure your Typeform is published first, and we’ll head on over to the share tab. This right here, this link is what we want to copy. Back in Webflow? Let’s paste that link we
just copied. That’s it. That’s part one. Second part. Full-page option. Here’s a blank
page. This part will also go very quickly. We’ll add an Embed element (this is a custom
embed element where we can paste in our own code) — we’ll add that to our project. Over
in Typeform? Back in the Share tab? This time, let’s embed this into a web page (we’ll make
that selection). A few options at the top we’ll use full page. Get the code? Let’s grab it (let’s copy it
to our clipboard). Back in Webflow? Paste. Once it’s pasted in, let’s save and close.
And this is what our Typeform looks like. Except, no. Let’s publish our project (because
the embed will only appear on the published or exported site). And when we do? This is
what it looks like. A fully functional form. Now how do we use it? We can link to this
page from any other place on the web. A common pattern here is adding the link to a separate
page (when someone clicks on this link, we want to take them to the full page we just
created that has the Typeform embedded). If we go into Preview mode? And we press that
button? Nothing. That’s because we have to press publish. But rest assured, on the
published site, clicking that link on THIS page takes us to our full contact page we
just created. But that’s a full page (a dedicated page).
Okay, third part. What about a pop up? So. We’re back on the same design we used
in part 1. (This is our button that linked out to Typeform’s site). Let’s delete
that button from earlier. And we’ll go to the Add panel. And lets add the custom embed
element where our button was (we’ll just drag that right in). And once we’ve done that, all we have to
do is go back to Typeform, same route as earlier (we’ll go to share), and this time we’ll
choose to embed this form in a web page. Now our goal is to have this form pop up. So let’s
select popup. And here we have a few options. What’s popup mode? It doesn’t matter.
Because what we’re really here for is in our button settings. Let’s change the text to whatever we want — we’ll do “Get started.” Let’s experiment with font size — we can preview
this visually. Let’s take a look at border radius (we can do this in a percentage format).
And finally, we can also set the button color — we’ll change it to white. Now. We’re all thinking the same
thing. The contrast might be a bit low in the preview here. That’s fine, because we’ve done all we
came here to do. Let’s get the code by pressing “get the code.” And let’s copy it to our clipboard. Back in Webflow? We have
our custom embed open here — let’s paste in that code snippet. Save and close? Let’s go up and publish our changes. And when we do, when we go in and preview our site It’s terrible. Maybe not terrible, but
it could be a lot better. Because contrast. Our goal is to change the text color (we want
the text color to be red — so it matches the background color). So. Let’s go to our
color picker and pick that value ( let’s copy that HEX code value to our clipboard).
So once we do that, we can go back into our code editor (inside the custom embed element).
And we’re going to search our code (we’re just pressing Command F on Mac or Control
F on PC — and we’re typing “color.” And what we’re looking for is color colon
white. What does that indicate? It means the color for text here is white. Which is probably
why we have low contrast against the button. Which is white. Let’s change it to our red color. We’re
just replacing the existing hex value with the one we copied to our clipboard earlier. But that’s what we have to do
to change the text color. What about things like font? Well all we do is search for font
right here (we’re looking for font-family). Because it lists the font “Helvetica.”
We can replace or add a value first. We’ll type the font we want to use right there…
A comma afterwards and not before. And when we do and save and close our work? (Let’s
close our search because we’re done with that.) We’ll publish now and check the site
in Chrome. And it looks pretty good. If we click that
button? You’ll see the popup is working exactly as we expected. Is it strange that
pressing a button that says “Get started” opens a popup that presents yet another button
that says “Get started”? Probably. But that’s Typeform in a popup. Now. Before
we wrap up, we want to show a fourth option: another option Typeform has. Here’s a layout we already created in Webflow.
It’s sort of a side-by-side. And this iPad? It’s just a PNG sitting inside a div block
(it’s just an image of an iPad with a white background inside a div block we called iPad
wrapper). But here’s the interesting part. We want to put a responsive Typeform INSIDE
the iPad. How do we do it? Like this: Let’s drag a code embed (a custom code embed)
into the div block (what we’re dragging in will be a sibling of the iPad image and
a child of the iPad wrapper). And it’s a mess. But that’s okay. By default, an HTML
embed (its position) is static. But we want to absolutely position this element — so
we’ll do that in a second. But here’s how absolute positioning works: When an element’s position is set to “absolute”,
it places itself (it positions itself) inside its parent element. But it will ONLY do that
if its parent element (the element it’s sitting inside) is set to relative positioning
(or any other position that’s not static). How does that apply here? Well, the wrapper it’s in is (by default)
set to static. So to do this, (1) we’ll select that wrapper it’s in (this is the
wrapper called “iPad wrapper”) and we’ll set its position to relative. (2), we’ll
select our custom code embed…and we’ll set its position to absolute, with absolute
positioning set to take up the full space available… and (3) so it fits inside the
iPad SCREEN, we’ll adjust the top positioning to be a percentage of the total size. And we can adjust this on all four sides at once by holding
shift and dragging. We’ll land on 5%. That means as the size of the wrapper (as
the size of the div block that our iPad is in…and our Typeform is in) — as that resizes?
It remains responsive. Now. Could we publish and test? Sure, but
it will look like this. That’s because we haven’t pasted in the actual code snippet.
So over in Typeform, under Share, let’s go over and embed it in a web page. And this
time, we’ll use their Standard option (that’s the one that comes up by default). And we’ll
change the height to 100%. (We’ll choose that percentage unit from the dropdown.) So.
We have width and height at 100% each…let’s get that code snippet, and let’s copy it
to our clipboard. Back in Muse (that’s the wrong screen).
Back in Webflow, let’s open up our code editor..and when we do, we’ll paste in that
snippet we just copied to our clipboard. Save and close? That should work. Let’s go up and publish our changes. And
that’s it. On the published site, the code embed respects the rules we set inside the
Designer. Because we used 5%? That extra space around the edges? It scales proportionally
with the iPad. And if it’s too tight on smaller screens?
We can go to our Tablet view, and select our container (this is our top-level container).
And since it’s using flexbox, all we have to do is change the direction to Vertical.
That way things stack vertically. And with the magic of video editing, let’s cut to
the published site where – That’s the published site. So. We covered
linking out to Typeform, we covered creating a separate page for our Typeform, we did a
version with a button that opens a popup, and we walked through a side-by-side design
which embeds the Typeform in a picture of an iPad. And that’s connecting Typeform to a Webflow project.

Leave a Reply

Your email address will not be published. Required fields are marked *