Adding Typeform to your Smart Builder Page

Follow

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

  • A Smart Builder page, and
  • Login credentials with a Typeform account - any plan type works with this setup. 
  • A domain that is SSL secure - this Typeform integration 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 within the left-hand side menu.
  2. Click the plus button next to Typeform to install the app:
    smart-builder-apps
  3. A window will appear, where you may choose a Typeform section template:select-typeform-apps
  4. Once selected, the Typeform section template will appear on the page for you to customize:
    typeform-section-template

Authorizing Typeform with Unbounce

  1. Within the Typeform section template, click the Add Existing Form button:
    add-existing-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.
  2. Click the Connect button to continue:
    connect-typeform-authorization-step
  3. A page will appear with a list of required permissions Unbounce will need to connect with the Typeform web-app:
    review-permissions-toauthorize-typeform-with-account
    • 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.

This authorization process happens the first time you connect Typeform with Unbounce. If you need to revoke these permissions, navigate back to your Typeform account & click your avatar at the top right and corner, then select Settings. 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!

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:
    choose-from-list-of-forms-and-embed-onto-smart-builder

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:
    create-new-form-button
  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:
preview-typeform-in-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:

change-layout-of-typeform-and-resize-typeform

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:

conversion-tracking-radio-button-for-typeform

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