Adding Typeform to your Smart Builder Page

Typeform is a web-based platform that makes it simple to create forms and surveys in a fun and engaging way. 

With features like conditional logic, customized flexible or multi-step forms, and advanced form analytics, Typeform can help you build a more conversational experience with users. 

This article will explain how to embed a custom conversational Typeform onto your landing page, using Unbounce Apps for Smart Builder.

What You’ll Need:

1. A Smart Builder page,
2. Login credentials with a Typeform account - any plan type works with this setup, and
3. A domain that is SSL secure - this Typeform app will only work on pages linked to a secure domain (https://). 

Do note that this Typeform App works only with Smart Builder. See our documentation to learn more about using native Unbounce forms in Smart Builder or adding editing forms in the Classic Builder.

Installing the Typeform App

1. Navigate to the Apps tab on the left-hand side of Smart Builder.
2. Search and locate the Typeform App.
3. Click the plus button next to Typeform to install the app.
4. The Typeform app will appear in the Add tab in Smart Builder.
   

You can now drag and drop the Typeform app anywhere on your page. To learn more about drag and drop, see this article: Using Drag and Drop in Smart Builder.  

Authorizing Typeform with Unbounce

1. Drag and drop the Typeform app onto your page:
   
2. Click Add a Typeform button:
   
   • You can update and change the form or create a new form from scratch at a later time. This step is to ensure that you authorize Typeform with Unbounce.
   • If you're running into an error on this page, see the FAQ at the end of this doc to learn more. 
3. Click the Connect button to continue:
   
4. A page will appear with a list of required permissions Unbounce will need to connect with the Typeform web-app:
   
   • If you’d like to sign into a different Typeform account, click the Choose a different account button and follow the prompts to sign in.
5. Once you’ve logged into the Typeform account, click Accept - a new page will appear with available Typeforms to choose from.

Embedding a Typeform

Now that you’ve authorized your Typeform account with Unbounce, you can embed the form directly to your page! You can either embed an existing form, or create a new Typeform. 

Embed an existing form

1. Scroll the list of available forms in your Typeform account to apply it to your page.
2. Select a form, and it will appear in Smart Builder:
   

And that’s it! The form will appear on the landing page!

Creating a new Typeform

1. From the list of available forms in Typeform, click Create new Typeform at the top-right-hand corner:
   
2. The Typeform web-app will appear in a new window, where you can create a new form to embed later. 

To test the form, toggle the Preview at the top of Smart Builder:

Resizing your Typeform

To resize the form's height,

1. Single-click the form and use the drag icons (box icons on either side of the element) to reposition the form:
   

To adjust the form's height,

1. Click the gear  icon next to the Typeform; the Typeform Settings will reappear. 
2. Under the Form Height section, type in a custom pixel height for your Typeform:
   
3. Click X to keep the changes.

Need to make edits to your Typeform fields, change the design or layout?

See Typeform’s documentation on how to style and design your form, and apply more custom formatting options.  

Be sure to Save and Republish your page!

Conversion Tracking & Typeform

You can enable or remove conversion tracking for your Typeform on your page. That way, any time a user completes a form subscription via Typeform, Unbounce will track this as a conversion.

Click the gear  icon to relaunch the Typeform Settings. Toggle the Conversion Tracking button:

To view information about your leads, you must log in to the Typeform web app and navigate to the Results section.

Revoking Typeform Access

This authorization process happens the first time you connect Typeform with Unbounce. If you need to revoke these permissions,

1. Navigate back to your Typeform account & click your avatar at the top right and corner.
2. Select Settings.
3. Navigate to Authorized Apps and click Revoke next to Unbounce.

Typeform FAQ

Why can't I add a Typeform? I'm coming across an error page.

When you first set up a Typeform account within your Unbounce client, that Typeform account will remain linked and authenticated to that unique Unbounce client. 

So, if you try to embed a form from a different Typeform account into the same Unbounce client, the authentication will not work, and you may encounter an error. 

To use a different Typeform account, you must install and authorize the app in a new Unbounce client. See our documentation to learn more about Adding a new Client.