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 update the designs for the form fields:

1. Click the Edit form fields style in Style Guide button within the Design Settings pop-up.
   • The Style Guide will appear on the left-hand side of Smart Builder.
2. Here, you can edit the color, font family, size, and more for your Form Field Label, Form Field Input, and 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 More Options button, 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.

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:
   
   
3. To edit the contents of the field, click the Edit Field option. 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.

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 More Optionsbutton, 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.

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 the More Options button.
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 pop-up 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 Label: The name of your form fields. Some examples of form labels are First Name, Last Name, Email, Phone Number, etc.

Form Input: The blank fields that page visitors will type in/ fill with 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.”

Related Articles

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

Tracking Apps for Smart Builder