Custom embedding

Related to:

Desktop

For desktop browsers, simply add an <iframe> element to your HTML document and set its src attribute to the public URL of your typeform. For example:

<iframe id=”my_typeform” src=”https://yourname.typeform.com/to/abc123″></iframe>

You can customise the layout and size of this <iframe> element (and therefore your typeform) using CSS, like so:

#my_typeform {
display: inline-block;
width: 800px;
height: 600px;
margin: 60px;
}

Keyboard shortcuts:

Don’t forget to set the focus onto the <iframe> using JavaScript in order to activate your typeform’s keyboard navigation. The following code snippet will do this for you:

<script>
document.getElementById(“my_typeform”).contentWindow.focus()
</script>

Touch Devices

We strongly recommend that you use only a fullscreen <iframe> element on mobile and touch devices in order to preserve the user experience. In other words, you should not display an <iframe> in the middle of your page (as described above for desktop browsers).

Instead you should display a link or button on your page which, when clicked, launches a fullscreen <iframe> in a popup/modal window (occupying 100% of the viewport height and 100% of the viewport width).

This means you need to detect the user’s device first, before deciding how the page will be rendered and how the <iframe> (your typeform) is going to be displayed. The following JavaScript code works well for detecting the majority of modern touch devices:

if (/mobile|tablet/i.test(navigator.userAgent)) {
// Mobile/Touch Device:
// –> Display link or button which launches iframe as popup/modal
// –> (or which simply redirects to the form on typeform.com)
} else {
// Other Devices:
// –> Display the inline iframe
}

For launching your typeform in a popup/modal window, again we recommend you use the embed code which we provide. You can find this code in the Share section of the Typeform admin area.

Native Mobile Apps (iOS + Android)

Typeforms can be embedded within iOS and Android apps using (UI)WebView components.

Customizing the button on embedded typeforms

The default popup button is a standard HTML link / anchor tag (<a>), which can be customized by applying CSS rules, targeting this element.

1. The default CSS styles included in the embed code are applied to the button with the specificity “.typeform-share.button” { … }

2. You can remove the default styles included in the embed code by removing the “button” class from the anchor element. (Just don’t remove the “typeform-share” class – that class is required for the popup code to function!)

3. You could add an id to the anchor element, and target that in your CSS rules, in order to override any other styles which are being applied.

Applying these changes, the modified anchor tag might look something like this:

<a class=”typeform-share” id=”typeform_launch_button” href=”https://yourname.typeform.com/to/AbC123″ data-mode=”1″ target=”_blank”>Launch me!</a>

The button can then be targeted in your CSS, like so:


#typeform_launch_button {

display: inline-block;

width: 200px;

line-height: 50px;

font-family: “Helvetica Nueue”;

text-transform: uppercase;

border: none;
color: red;
font-size: 20px;

// etc.

}

Was this article helpful?
Thanks!