Field Widget

ALL PLANS

Overview

The Field Widget adds input fields to a Form Container in your campaign. Visitors to your live campaign can fill out these fields and use the Submit button to submit their information. If you want to provide entries yourself, you can do so inside the Campaign Builder and use visibility settings to hide the Form Container from the live campaign.

Adding the Field Widget

To add the Field Widget to your campaign:

1. Click the Field Widget icon in the Add Widgets Panel, or
2. Drag the icon into the Edit Widget Panel and into a Form Container Widget.

Note: Attempting to add a Field Widget outside of a Form Container will trigger an error message.

Widget Settings

The setting will automatically pop up when you add a new Field Widget. Otherwise, you can access the settings by clicking on the pencil icon for the Field Widget. 

Renaming the Widget

1. Click the pencil icon in the top-left corner (next to the widget name).
2. Enter a new name. By default, the name will update to the selected field type.

CSS ID

The CSS ID (starting with a #) is displayed in the top-right corner of the pop-up.

Field Type

The Field Type section allows you to choose the field type for your form. Field types are categorized into:

• Standard Fields: Can only be used once per list.
• Custom Fields: Can be used multiple times per list, are saved to your Field Library, and can be hidden so it doesn't appear on the live form.

Selecting a Standard Field

1. Click on the desired field type to select it.
2. Configure the field in the Field Settings section.
3. Standard field types that are already in use will no longer be selectable in the same Form Container.

Selecting a Custom Field

1. Choose the field type and check the Make hidden box if needed. Hidden fields do not display to entrants but can store additional data.
2. Customize the field in the Field Settings section.
3. Save the field to your Field Library for future use or select an existing custom field from your library.

Field Settings

The Field Settings section is where you configure most of the details for your field. Settings may vary depending on the field type, but common subsections include:

Layout

Choose a layout option if multiple layouts are available for the field type.

Text

Assign Labels or Placeholders to your field, if applicable.

Validation

Choose if you want the field to be required Always, When visible, or Never required (optional). 

If a Field Widget is set to Require Always but is hidden by itself or by a parent container (Starts Hidden), a warning will appear in the Edit Widgets panel. Click the warning icon to automatically adjust the setting to Required when visible.

Additionally, when adding a new Field Widget inside a Starts Hidden Container or Form Container Widget, the field's requirement will default to Required when visible to prevent validation errors in hidden fields.

The Require when visible setting makes a field required only if it's visible to the entrant. If the remains hidden, entrants don't need to complete it. If a hidden field is set to always required, entrants will see an error when submitting the form.

Error Messages

Add custom messages to display when validation errors occur.

Field Points

Assign points to the field. Entrants earn these points upon completing the field.

Other

Instructions: Add text to display below the field when it is selected.

Extra CSS Classes: Add one or more CSS classes to customize the field's appearance using custom CSS.

Note: Click the expand icon (▸) to open collapsible sections in the Field Settings.

Visibility

Control when and where the field is visible using the Visibility section. Options include:

• Setting specific dates and times.
• Displaying the field only in the Builder.
• Restricting visibility by country.

For more details, refer to the Widget Visibility Help Doc.

Extras

Explore advanced customization options in the Extras section, including:

• Main Tag
• CSS Classes
• Smart Labels

Learn about the Main Tag, CSS Classes, and Smart Labels settings here. 

Field Widget Styling Options

When the Widget is selected, you can customize the styling of the specific widget. Some of the options include changing the input box color, the maximum width of the widget, label font, and widget alignment. You will see the following areas of styling available in the Style Panel:

• Labels
• Input Box
• Help Text
• Widget