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 such as 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. A window will appear, where you may choose a Typeform section template:
   
   • See our documentation for more on Section templates. 
5. Once selected, the Typeform section template will appear on the page for you to customize:
   
   

Authorizing Typeform with Unbounce

1. Within the Typeform section template, click the Add Existing Form 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.
2. Click the Connect button to continue:
   
3. 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.
4. Once you’ve logged into the Typeform account, click Accept - a new page will appear with available Typeforms to choose from.

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.

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 & scroll to the very bottom of the page, and click the blue Choose this form button:
   

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

Creating a new Typeform

1. Scroll to the bottom of the list of available forms in Typeform, and click Create new form:
   
2. The Typeform web-app will appear in a new window, where you can start creating a new form to embed later. 

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

Resizing and Changing the Layout of your Typeform

To change the section layout, click the Change Layout icon at the bottom right-hand corner of the Typeform section. A window will appear at the bottom of the page, with different section templates to flip through.

To resize the form, single-click the form and use the drag icons (box icons on either side of the element) to reposition the form:

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.  

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 More Options button to view the Conversion Tracking for this Typeform. By default, the app will automatically track submissions to the Typeform as conversions:

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