Adding a Form in Smart Builder

Adding a form to your landing page enables you to set up a conversion goal. So, any time a page visitor completes the form on your page, you can track the action as a conversion goal.

Forms are the backbone of conversion optimization in the Unbounce builder. This article will explain the following:

• Add a Form to Your Landing Page
• Customize Your Form’s Appearance
• Add Form Fields
• Add Hidden Form Fields
• Edit an Existing Form Field
• Move or Delete Fields
• Track Form Submissions as Conversion Goals
• Modify Form Confirmation Settings
• Reviewing Form Responses
• Glossary
  • Related Articles

Add a Form to Your Landing Page

There are two ways to add a form to your Smart Builder page: using drag and drop, or adding a pre-build form template. 

Option 1: Drag and Drop a form

Click the Add tab on the left-hand side of Smart Builder, and drag a Form element into a section:

Option 1: Add a Form Section Template

1. Hover your cursor over an existing section (or near where you'd like to add your new section).
2. Click the + Add Section button that appears:
   
3. From the pop-up of section layouts, scroll down to the Forms section:
   
4. Select a Form template of your choice. 
5. The new form section will appear on the page for you to further customize & update.

Customize Your Form’s Appearance

Once you’ve added the form, you can edit its properties:

1. Click anywhere within the form; icons will appear at the bottom of the section.
2. To customize this form, click the Design Settings  button:
   
   
3. Using the options in the Design Settings pop-up, adjust the following:
   • Padding: adds extra space, or padding, around your form.
   • Background Color: changes the background color of your form (not the background color of the fields themselves). 

To edit the designs for the form fields:

1. Click Style Guide on the left-hand side of Smart Builder.
2. Navigate to the Form Field Label, Form Field Input, and Form Confirmation drop-down menu:
   
   
   • See the glossary at the end of this article to learn about each setting. 

Here, can edit the color, font family, size, and more for these properties. Here's an example for each:

Form Field Label

Form Field Input

Form Confirmation

Be sure to Save your page when you’re happy with these changes.

Add Form Fields

1. Single-click your form,
2. From the controls that appear at the bottom, select Form Settings .
3. On the left-hand side, select Add a Field: 
4. A new window will appear. Here, you can add & customize the form field by updating the field:
   • Name/ID
   • Type
   • Label
   • Placeholder text:
     
     
     See the end of this document for a glossary of these differences.
5. Toggle the slider button to hide the field’s label, or to set the field as required:
   
6. When you’re happy with these changes, scroll down and click the Submit button.

Here's an example of the newly added form field:

Add Hidden Form Fields

Creating hidden form fields lets you capture parameters within your landing page’s URL. For example, you can use hidden fields within your form to capture UTM (utm_source, utm_medium, etc.) or GCLID values from the page visitor’s URL.

That way, when they complete their form submissions, the values captured from hidden fields along the form submission will also be passed along.

Follow these steps to create hidden form fields:

1. Single-click your form. 
2. Click on Form Settings .
3. From the left-hand side menu, click Add a hidden field:
   
4. A new window will appear where you can customize your hidden field by updating the field:
   • Label & ID
   • Default value (can be left blank if you’re capturing UTM sources):
     
5. When you’re happy with these changes, click the Submit button.
   • This field will not be visible to your page visitors but will be visible to you in Smart Builder as you continue to edit your page.

Be sure to Save your page when you’re happy with these changes.

Edit an Existing Form Field

1. Click on the form field you'd like to edit. 
2. From the options that appear, select Edit:
   
3. A new window will appear.
4. Edit the values of your form fields as needed.
5. Click the Submit button to save these changes.

Be sure to Save your page when you’re happy with these changes.

Move or Delete Fields

To move fields up or down,

1. Click the field you’d like to move.
2. Select the Move ↑ or Move ↓ to reposition the fields:
   

To delete a form field, 

1. Click the field you’d like to delete.
2. Click the More button. Select Delete:
   
3. From the Delete Confirmation window, click Delete. 

Be sure to Save and Publish your page when you've made these changes. 

Track Form Submissions as Conversion Goals

If you add a form section template to your page, the form will automatically appear as a goal to track within the Conversions tab.

Here's how to track form submissions as conversion goals:

1. Single-click your form. 
2. Click on Form Settings .
3. Toggle the Conversion Tracking button; this will enable conversion tracking for this form:

Anytime a user completes a form submission, Unbounce will count this as a conversion within the Page Overview.  

See our documentation for more on Conversion Goals. 

Modify Form Confirmation Settings

Form confirmation settings let you determine the action that your form takes once your visitor completes a submission.

In Smart Builder, you can display a form confirmation message, or send visitors to another page using a URL redirect.

1. Single-click your form. 
2. Click on Form Settings .
3. From the left-hand side menu, you can choose between two different Form Confirmation settings:
4. In the window that appears, select a form confirmation option:
   

There are three form confirmation options: A success message, a form confirmation page, or a POST form data to a URL. 

Success Message

A message will appear on the landing page once your visitors submit the form on the landing page. 

• • • Edit the Form Success Message to your liking. 
    • Toggle the Show Preview button to view how the success message will appear on the live landing page:
      

Confirmation Page

Redirects the user to an external thank-you page (URL redirect).

• • • In the URL field, paste in the URL of the page you would like your visitor to be sent to once they submit your form.
    • Under Target, select whether you want the page to Open in the current window or Open in new window:
      

If you send form submissions along with the URL when customers land on the next page, check the option to Append form data to URL. See our documentation for more on Passing URL Parameters Through a Form in Smart Builder.

POST form data to a URL

The Post form data to a URL confirmation option allows you to send your form submissions via the POST method to a pre-defined external URL.

1. Enter your webhook or POST URL in the field provided:
   

Be sure to Save & Publish your page when you're happy with these updates.

Review Form Responses

Anytime a page visitor completes a form submission, the responses will funnel into the Leads table. 

You can access leads directly from the Page Overview. See our documentation to learn more: Getting Your Leads. 

Glossary

Form Field Label: The name of your form fields. Some examples of form labels are First Name, Last Name, Email, Phone Number, etc.

Form Field Input: The field where visitors can type in/ fill in their information.

Field Name/ID: the unique ID of your field. Aim to set different IDs for each of your form fields. Some examples of form IDs are firstName, phone_number, email, etc.

Field Type: The form field style you’d like to add to your pages, such as a dropdown menu, checkbox options, phone number, radio buttons, or text fields.

Field Placeholder Text: A hint, suggestion, or description of the information you’d like your visitors to input. An example of a placeholder is “ your name here” or “please enter a valid email address.”

Form Confirmation: The message that appears after a visitor completes a form submission. 

Related Articles

Tracking Events & Form Submissions with Google Tag Manager in Smart Builder

Tracking Apps for Smart Builder