Embedding Jotform onto your Landing Page

Follow

Jotform is a form builder that makes it simple to create customizable & highly robust forms, with features such as conditional form logic, payment collection options, approval flows, and a wide variety of form templates.

This article will explain how to link and embed a form from Jotform onto your landing page, using Unbounce Apps for Smart Builder.

What You’ll Need:

  1. A Smart Builder page, and
  2. A Jotform account (with a pre-existing form). 
  3. The Thank You Page setting in Jotform is set to the Show a Thank You Page option.
    • Redirecting to another page after the form submission (Redirect to External Link) will not track the conversion in Unbounce.
  4. Recommended - A domain that is SSL secure

Installing the Jotform App

  1. Navigate to the Appstab on the left-hand side of Smart Builder.
  2. Search and locate the Jotform App.
  3. Click the plus button next to Jotform to install the app.
  4. You may see a pop-up that appears, explaining that you can swap an element on your page with this App:
    A pop-up on top of Smart Builder explaining that this App is swappable.

To learn more about changing elements, see our documentation: Changing Elements on your Smart Builder Page.

Once you've installed the App, you can apply it to the landing page.

Embedding a Form from Jotform 

Now that you've installed the app, you can replace a current element on the page with a form from Jotform instead. 

To speed up the set-up and authentication process, sign in to Jotform in another tab within the same browser. 

  1. Locate an element on your page you wish to swap to a Jotform form. 
  2. Single-click the element and click the Change Element icon. A pop-up will appear.
  3. Within the drop-down menu, select Forms from the list - then select Jotform:
    Select Jotform option from drop-down menu in Smart Builder.
    • If you're not signed into Jotform yet, a pop-up will appear with fields to sign into Jotform. 
  4. Next, a pop-up will appear with authorization permissions to allow forms from Jotform to work in Unbounce:
    Authorize Jotform pop-up in Smart Builder.
  5. Click the Allow button. 
  6. A new page will appear in Smart Builder, with options to select pre-existing forms from your Jotform account: 
    A pop-up window with existing Jotform form to choose from.
  7. Select a form from the list; the form will appear in Smart Builder: 
    A gif demo of a user selecting a Jotform form from the list - the form appears in Smart Builder.

And that's it! To see the form in real-time, toggle the Preview button at the top of Smart Builder. 

To add a Jotform at any time, change an element with Jotform app, and click the button Add a Jotform to get started:

A Jotform section in Smart Builder

Be sure to Save and Publish your landing page to finalize these changes.

Editing or Updating A Form

You may want to adjust the height, width, or change the form on your page. You can make these updates by utilizing the Jotform Settings. 

Update the Form's Height and Width

  1. Single-click on the form. 
  2. Click the gear icon to launch the Jotform Settings.  
  3. In the Form Height field, set the desired pixel size for the height of the form.
    • Depending on other elements in the page section, you may want the form height smaller or larger. 
  4. Press the enter key on your keyboard and the form size will update. 
  5. To increase or decrease the form's width, drag the small boxes next to the form either left or right:
    Gif demo of a user increasing the width and height of the Jotform form.

Refresh or Change Form

Say you've made changes to the form in Jotform, and want those changes to reflect in Smart Builder, or, you'd like to change the form altogether. 

  1. Single-click on the form. 
  2. Click the gear icon to launch the Jotform Settings.  
    • Click the blue Refresh Form button to refresh the form; wait a few moments, and the updated form will appear in Smart Builder. 
    • Click the Change Form button to change the form and options to select pre-existing forms from your Jotform account will reappear. 
      Options to change or refresh Jotform form.

Enabling Conversion Tracking

To track conversions & submissions from the Jotform form in Unbounce,

  1. Single-click on the form. 
  2. Click the gear icon to launch the Jotform Settings.  
  3. Toggle the radio button with the Conversion Tracking label:
    Radio button to toggle conversion tracking for Jotform.

See Setting Conversion Goals in Smart Builder to learn more about conversion tracking in Smart Builder. 


Do you agree or disagree with this statement: This article helped me find the information I needed quickly and easily.

Select an option and leave us some feedback in the comments:

Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply