1. Documentation
  2. Working in the Classic Unbounce Builder
  3. Adding Forms in the Classic Builder

Adding and Editing Forms in the Classic Builder

Follow
Avatar
Leslee Teehankee
Last Updated

Forms are a foundational element for lead generation landing pages. How you design your Unbounce form greatly impacts your conversion rates, and dictates the information that will come your way once a lead has converted.

There are several more advanced uses of forms, including pre-filling form fields, and UTM tracking. This article will get you on your way.

This article will explain how to add and customize a form in the Classic Builder. 

Before Getting Started

We recommend that you do not use Unbounce to collect sensitive information such as credit card numbers or personal health data.

At this time, you can add up to one form per landing page only. If you'd like to add multiple forms to your page, we recommend trying out Smart Builder! See our documentation on Working with Forms in Smart Builder. 

Adding a Form to Your Landing Page

  1. Drag and drop the Form form_button.pngWidget from the left side of the Unbounce Builder to the place on the page where you’d like to add your new form. A new dialog box will appear.

    form_fields_design_your_form_left_column_only.png

    1. Click on the Custom Field form options left of the dialog box to populate your form fields.
    2. A preview of your form fields will appear in the middle of the dialog box.
      • You can change the order of your form fields, or delete a form field by using the directional buttons or the garbage icon. form_fields_directional_and_garbage_button.png
      • Once you’ve clicked on a form field in the middle column, it will appear as grey. You can edit the specific form field in the column on the right side of the box:
        form_fields_design_your_form.png

If you'd like to make your form field required for submission, select the check box beside Required Field under Validation Options

    • Drop-down menu custom fields are always required, and therefore do not have the Required field checkbox for validation options. 
  1. Once you’ve customized your form, click the Done button in the bottom right corner of the dialog box.

Note

The phone number field differs per region set and will accept the following formats:

North America: +1 with a 10-digit number.

UK: +44 with a 10-digit number.

Australia: +61 with an eight-digit number.

Using Custom Field Names for Field Mapping

Unbounce allows you to enter different values for Field Name, Field ID, and Field Label.

This can be a useful tool in the following ways:

  • Shorter or simpler value names when downloading a CSV of your leads.
  • Custom names for your analytics tracking.
  • Setting up Field Mapping.

By default, your Field name and ID field will be the same as your Field Label. To customize the fields, deselect the Auto-generate from Field Label box.

Editing Your Form Appearance Properties

Once you’ve selected your form fields and created your form, you can edit your form’s appearance by using the Properties tab on the right side of the Builder. Click on the form you'd like to edit to access the Form Properties tab. 

form-field-properties.png

The Geometry Section

form_fields_geometry_button.png

Edit the form's width or position on the page with the properties in the Geometry.  

  • Use the Size fields to enter an exact numerical value in pixels for the Width of your form.
  • Use the Position fields to enter an exact numerical value in pixels to move your form in relation to the Left of the page and the Top of the page.

The Form Confirmation Section

form_fields_form_confirmation.png

form_fields_show_confirmation_dialog.png

The Form Confirmation section lets you determine your form's action once your customer has hit the confirmation button. It also allows you to access and edit your confirmation dialog box.

See this article to learn about the form confirmation dialog: What is a Form Confirmation Dialog?

The Label Attributes Section

form_fields_label_attributes.png

The Label Attributes section allows you to adjust the appearance of your form labels.

The Field Attributes Section

form_fields_field_attributes.png

The Field Attributes section allows you to adjust the appearance of your form fields.

The Checkbox/Radio Button Section

form_fields_checkbox_radio_button.png

The Checkbox/Radio Button section allows you to adjust the appearance of your checkbox and radio button form fields.

The Button Settings Section

form_fields_button_settings.png
The Classic Builder automatically positions the submit button for you in relation to your form.

If you want to manually set your form submission button placement, untick the Auto position submit button checkbox.

The Element Metadata Section

form_fields_element_metadata.png

The Element Metadata section contains important information that’s unique to your form. The ID value is often required when you want to apply custom CSS, HTML, or scripts that apply to this form.

Reviewing Responses from Forms

Once you've published your page with your working form, you can review any form data within the Leads table. In other words, details from form submissions will appear in the Leads table. 

Want to learn more about forms? Check out the following articles:

Related articles