Adding and Editing Form Fields

Forms are a foundational element for lead generation landing pages. How you design your forms has a huge impact on 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.

---

 

---

Adding a Form to Your Landing Page

1. Drag and drop the Form Widget 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.

   
   
   
   1. Click on the form options on the left side of the dialog box to populate your chosen 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. 
   • 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.

Once you’ve customized your form to your needs, click the Done button in the bottom right corner of the dialog box.

 

Using Custom Field Names for Field Mapping

Unbounce gives you the option of entering different values for Field Name and 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.

Your Field name and ID field will be the same as your Field Label by default. 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. 

The GEOMETRY Section

• 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 the action that your form takes once your customer has hit the confirmation button. It also allows you to access and edit your confirmation dialog box.

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 Builder automatically positions the submit button for you in relation to your form. If you’d like to manually set the placement of your form submit button, deselect 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.

 

Want to know what more you can do with forms? Check out the following articles:

• Loading a form in a lightbox
• Toggling Between Horizontal and Vertical Forms
• Passing URL parameters through a form
• Setting up forms to pre-fill for UTM tracking
• Adding Placeholder (Hint) Text to Form Fields
• Modifying form error messages

---