Adding and Editing Form Fields

Follow

Note

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

Note

Only one form is allowed per landing page.

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, UTM tracking, and multi-step forms. This article will get you on your way.

This article will help you out with:



Adding and Editing Form Fields

  1. Double click on the form fields to edit an existing form

OR

  1. Drag and drop the Form Widget from the Widget Panel on the left to add a new form
  2. Select fields from the custom and pre-defined fields on the left of the Form Designer
  3. Click fields to edit
    • Field-specific options will appear on the right of the Form Designer
    • Move fields up and down using the directional buttons below the field in the Form Designer
    • Delete fields with the red button below the field in the Form Designer
  4. Click Done once you're happy with the Form

Name and email are set as required fields and email will automatically validate email addresses to ensure that an actual email is used. If you add a phone number field you can set it to validate for different regions.

Note:

Australian validation will allow 8-10 digits.
UK validation will allow 10-13 digits, beginning with +, 44, or 0.
Generic validation will allow 6-12 digits, and special characters.

Custom Field Names

You also have the option of entering different values for 'Field Name and ID' and 'Form Label'. This is useful if you will be downloading a CSV of your leads, and you’d like the value name to be simpler or shorter. This also allows multiple fields to have the same label, so you can specify uppercase characters for their form field labels. 

By default, the field 'Field Name and ID' will be the same as your 'Field Label'. If you want to customize it, simply uncheck “Auto-generate from Field Label” in the 'Name and ID' section.

You can also add text fields that you name yourself, checkboxes, radio buttons, custom and pre-made dropdown menus, or hidden fields - which can be useful with some of our advanced features and integrations. Please note that hidden fields will only have an input option for 'Field Name and ID', not 'Field Label'.

When you switch between fields, the "Auto-generate from Field Label" will only be re-checked if the value of the 'Field Name and ID' exactly matches the auto-generated version of the 'Field Label'. 


Form Properties

Single click the form fields and you'll see the Form Properties on the right on the Page Builder.

Geometry

Manually adjust size and position.

Form Confirmation

See our next section

Label Attributes

Adjust alignment, and font face, colour, and size.

Field Attributes

Adjust field height, spacing between, and internal font size. You can also select the field border, - including corner radius - background and text colours as well as turning on or off an inner shadow.

Checkbox & Radio Button Attributes

If you've added checkboxes or radio buttons you can adjust font face, colour, and size.


Toggling Between Horizontal/Vertical Form Fields

Switching up your form field's horizontal/vertical attributes offers you another way to display your information within dimension-restricted forms, so that you may avoid covering vital content and create an overall better user experience. Cool, huh?

Pro-tip:

For landing pages and overlays only:

If you used a custom script
as a workaround for extending the horizontal/vertical functionality of a form prior to this feature being released, your form might be adversely affected if you decide to republish the page or overlay (sticky bar forms will not be affected).

If you do need to republish an existing page or overlay that contains a custom script for extending the horizontal/vertical functionality, we recommend that you do a quick check by duplicating your page/overlay and republishing the duplicate version. If the script in your duplicate does break after you do this, you’ll want to make sure that before you next republish the live version, you remove the custom script.

Feel free to check out the chatter in the Community on this new feature for more insight! 

This section will help you out with:

  • Toggling between Horizontal/Vertical Form Fields in Landing Pages
  • Toggling between Horizontal/Vertical Form Fields in Overlays
  • Toggling between Horizontal/Vertical Form Fields in Sticky Bars

Toggling between Horizontal/Vertical Form Fields in Landing Pages

Your new landing page form fields will be set to vertical display (stacked on top of each other) by default when you create your form. Follow these steps to switch your form field to horizontal display (stacked side-by-side) instead:

  1. Select your form fields and scroll down to "Field Attributes" in the Properties panel.
    Scroll_down_to_Field_Attributes__LPs_.png
  2. Drag the "Columns" slider control button to the right to horizontally shift your form fields.
    Enabling_Horizontal_Form_Field__Landing_Pages_.gif
  3. To revert back to vertical form fields, drag the "Columns" slider control button back to the left.

Toggling Between Horizontal/Vertical Form Fields in Overlays

Your new overlay form fields will be set to vertical display (stacked on top of each other) by default when you create your form. Follow these steps to switch your form field to horizontal display (stacked side-by-side) instead:

  1. Select your form fields and scroll down to "Field Attributes" in the Properties panel.
    Scroll_down_to_Field_Attributes__Overlays___Original_.png
  2. Drag the "Columns" slider control button to the left to vertically shift your form fields.
    Enabling_Horizontal_Form_Field__Overlays_.gif
  3. To revert back to vertical form fields, drag the "Columns" slider control button back to the left.

Toggling Between Horizontal/Vertical Form Fields in Sticky Bars

Your new sticky bar form fields will be set to horizontal display (stacked side-by-side) by default when you create your form. Follow these steps to switch your form field to vertical display (stacked on top of each other) instead:

  1. Select your form fields and scroll down to "Field Attributes" in the Properties panel.
    Scroll_down_to_Field_Attributes.png
  2. Drag the "Columns" slider control button to the left to vertically shift your form fields.
    Enabling_Vertical_Form_Field__Sticky_Bars_.gif
  3. To revert back to horizontal form fields, drag the "Columns" slider control button back to the right.

 


Related Articles:


Was this article helpful?
23 out of 33 found this helpful