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

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:
Gif demo of a user dragging and dropping an form element onto the page.

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:
    Add a section button in Smart Builder.
  3. From the pop-up of section layouts, scroll down to the Forms section:
    Select a form section template.
  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: Design Settings for forms.

  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:
    Form design editing properties in the Style Guide.

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

Form Field Label
Gif demo of a user editing the form field label designs.

Form Field Input
Gif demo of a user editing the form field input designs.

Form Confirmation
Gif demo of a user editing the form confirmation designs.

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 FieldAdd a field button within Form Settings.
  4. A new window will appear. Here, you can add & customize the form field by updating the field:
    • Name/ID
    • Type
    • Label
    • Placeholder text:
      Update form fields.
      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:
    Toggle required field, or hide field label.
  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:
Newly added field in Smart Builder form.

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:
    Add a hidden field button.
  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):
      Hidden field example.
  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.


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

Edit an Existing Form Field

  1. Click on the form field you'd like to edit. 
  2. From the options that appear, select Edit:
    Edit button for a form field.
  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:
    Arrow keys to move form fields up or down.

To delete a form field, 

  1. Click the field you’d like to delete.
  2. Click the More button. Select Delete:
    Delete a field in form.
  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: Toggling the Conversion Tracking button within the Form Settings.

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:
    Form Setting pop-up in Smart Builder.

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:
        Gif demo of a form confirmation success message set-up in the Form Settings.

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:
        Gif demo of a form confirmation page set-up in the Form Settings.

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:
    POST Form URL form confirmation option

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


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. 

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

Tracking Apps for Smart Builder