Working with Forms in Smart Builder

Follow

Adding a form onto 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 onto 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 popup of section layouts, select the Forms option:
    adding-a-form-section-template-in-smart-builder
  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:
    design-settings-for-forms
  3. Using the options in the Design Settings, 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).
      updating-form-padding-and-background-colors-with-design-settings
  4. In the Design Settings, click the Edit Forms Field Style in Style Guide button.
  5. The Style Guide will appear on the left-hand side of Smart Builder.
  6. Scroll down within the Style Guide until you see the Form Label & Form Input tabs.
  7. Here, you can edit the color, font family, size, and more for your Form Label & Form Input:
    updating-form-labels-and-inputs-with-style-guide

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

Adding & Editing Form Fields

Follow these steps to add a new field to your form

  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. 
    add-a-form-field-option
  3. A new window will appear. Here, you can add & customize the form field by updating the field:
    1. Name/ID
    2. Type
    3. Label
    4. Placeholder text:
      update-newly-added-form-field
      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:
    toggle-required-options-for-form-fields
  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.
    editing-form-field-options
  2. Within the dropdown menu, select options to:
      • Move the field up or down,
      • Delete the field, or
      • Edit the field:

    editing-form-fields-examples
  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 pass along as well.

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:
    how-to-add-a-hidden-field
  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):
      hidden-field-example
  4. When you’re happy with these changes, click the Submit button.
    • This field will not be visible to your page visitors but visible to you in Smart Builder as you continue to edit your page.

See our documentation for more on testing your URL parameters.

Note:

Note: To test the functionality of your form, be sure to preview your page or Publish the page to test the live version.

Tracking Form Submissions as Conversion Goals

If you add a form section template onto 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:
    toggling-conversion-tracking-for-smart-builder-forms

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 Message

Note: As Smart Builder is still in the Beta phase, our teams are continuously working on improving forms and form submission options (such as redirects). Keep an eye out for these updates in the future! 

Adding a form confirmation message lets your visitors know that their form submission is complete. To modify the message, follow these steps:

  1. Click anywhere within the form. 
  2. Click the More Options button, then select the Setup Form Confirmation option:
    updating-the-form-confirmation-message
  3. In the new window that appears, change the form confirmation message to your choosing:
    form-confirmation-message-example
  4. Click the Submit button when you’re happy with these changes.

Be sure to Save & Publish your page when you're happy with these updates. Currently, the only available form confirmation option is a form confirmation message. 

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, 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.”