Working with Forms 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:

• Adding a Form to Your Landing Page
• Customizing Your Form’s Appearance
• Adding & Editing Form Fields
• Adding Hidden Form Fields
• Tracking Form Submissions as Conversion Goals
• Modifying Form Confirmation Settings
• Reviewing Form Responses
• Glossary
• Related Articles

Adding a Form to Your Landing Page

Because Smart Builder pages comprise section templates, you will need to add a form section template to your page to add a form.

1. Navigate to your landing page in the Smart Builder.
2. Hover your cursor over an existing section (near where you’d like to add your new section).
3. Locate & click the plus icon that appears beneath an existing section. 
4. From the pop-up of section layouts, select the Forms option:
   
5. The new form section will appear on the page for you to further customize & update.

Customizing 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.

Adding & Editing Form Fields

1. Click anywhere within the form; icons will appear at the bottom of the section.
2. Click the Form Settings , then select the Add a Field option. 
3. 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.
4. Toggle the slider button to hide the field’s label,or to set the field as required:
   
5. When you’re happy with these changes, click the Submit button. Here's an example:
   

Follow these steps to edit existing form fields:

1. Click the field you’d like to edit, then the More button.
   
2. Within the dropdown menu, select options to:
   • Move the field up or down,
   • Edit the field, or
   • Delete the field.
   To edit the contents of the field, click the Edit Field option. A new window will appear.
3. Edit the values of your form fields as needed.
4. Click the Submit button to save these changes.

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

Adding 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 pass along.

Follow these steps to create hidden form fields:

1. Click anywhere within the form.
2. Click the Form Settings , then select the Add a hidden field option:
3. 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):
     
4. 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.
5. If you’re sending traffic to another page instead of a form confirmation dialogue box, check the option to Append form data to URL from the Form Confirmation settings near the bottom left-hand corner of your form element:

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

See our documentation for more on testing your URL parameters.

Tracking 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 are conversion goals:

1. Click anywhere within the 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 a conversion within the Page Overview.  

See our documentation for more on Conversion Goals. 

Modifying 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. Click anywhere within the form. 
2. Click the Form Settings button to modify your form confirmation settings.
3. In the window that appears, select a form confirmation option:
   
   1. 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:
        
   2. 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:
        
4. Press enter or click out of the pop-up to finalize these changes.

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

Reviewing 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, 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