Adding and Editing Forms in the Classic Builder

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 explains the steps for creating, editing, and styling a single step form in the Classic builder. To create a multi-step form, take a look at this article

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. 

Or check out this workaround for Classic Builder. 

Adding a Form to Your Landing Page

1. Drag and drop the Form Widget from the left side of the Classic Builder and add it to your page. A new dialog box will appear:
   
    

2. In the dialog, you'll see the Field Templates or Field Types options, which you can use to start building your form: 

   

   • Field Templates: Pre-determined field inputs based on commonly used form fields, such as first name, email, phone number, etc. 
   • Field Types: Form fields you can customize based on your specific form needs. 
3. Click on a Field Template or Field Type of your choosing to populate your form fields:
   
   • You can change the order of your form fields, or delete a form field using the directional buttons or the garbage icon.
4. To customize your form fields, click on the field and type in the changes in the far-right column:
   

Field Label

The label will appear once the form is on the landing page. 

• Some examples include "Company", "City", and "How did you hear about us"?  

Field Placeholder Text

A hint or cue inside an input field gives users a hint or suggestion about the info they should input.

• A common placeholder is "Enter your company details here". 

Field name and ID

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.

This allows you to use custom field names depending on what integration you're sending your leads to. See Setting up Field Mapping to learn more. 

Validation options

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. 

Once you’ve customized your form, click the Save button in the bottom right corner of the dialog box:

Be sure to Save your landing page on the top-right-hand corner of Classic Builder. 

Editing Your Form Appearance Properties

You can edit your form’s appearance by using the Properties tab on the right side of the builder.

Click on the form, and the properties will appear on the right-hand side:

 

The Geometry Section

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

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

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

The Field Attributes Section

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

The Checkbox/Radio Button Section

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

The Button Settings Section

The Classic Builder automatically positions the submit button alongside the form.

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

The Element Metadata Section

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:

• A Form to a Lightbox
• Toggling Between Horizontal and Vertical Forms
• Passing URL parameters through a form (including UTM or GCLID Tracking)
• Prefilling Form Fields 
• Modifying Form Error Messages