Embedding Jotform onto your Landing Page

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 Apps tab 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. The Jotform app will appear in the Add tab in Smart Builder.

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

Embedding a Form from Jotform 

1. Drag and drop the Jotform app into a section in Smart Builder.
   
   
2. Click the button Add a Jotform to get started. 
   • If you're not signed into Jotform yet, a window will appear with fields to sign into Jotform. 
3. Next, a window will appear with authorization permissions to allow forms from Jotform to work in Unbounce:
   
4. After the permissions window closes, select the Add a Jotform button again. A new page will appear in Smart Builder, with options to select pre-existing forms from your Jotform account.
5. Select a form from the list; the form will appear in Smart Builder: 
   

And that's it! To see the form in real-time, toggle the Preview button at the top of 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:
   

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. 
     

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:
   

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