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

This article will help you out with:

• Adding and Editing Basic Forms
• Toggling between Horizontal/Vertical Form Fields

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.

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?

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.
   
2. Drag the "Columns" slider control button to the right to horizontally shift your form fields.
   
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.
   
2. Drag the "Columns" slider control button to the left to vertically shift your form fields.
   
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.
   
2. Drag the "Columns" slider control button to the left to vertically shift your form fields.
   
3. To revert back to horizontal form fields, drag the "Columns" slider control button back to the right.

Related Articles:

• Loading a form in a lightbox
• Passing URL parameters through a form
• Setting up forms to pre-fill for UTM tracking
• Setting up multi-step forms
• Adding Placeholder (Hint) Text to Form Fields
• Modifying form error messages