Knowledgebase

Form Fields are the individual input elements that visitors interact with on your forms. Each field belongs to a Form Group and can be extensively configured to collect exactly the information you need. This article provides detailed guidance on creating, configuring, and managing form fields within your Site Manager.

Understanding how to properly configure form fields will help you create professional, user-friendly forms that collect accurate data while providing a smooth experience for your website visitors.

Understanding Form Fields

What Are Form Fields?

Form Fields are the individual components that make up your forms:

• Input Fields - Text boxes, dropdowns, checkboxes where users enter information
• Layout Elements - Headings, dividers, and spacing that organize your form
• Interactive Elements - Date pickers, radio buttons, and selection menus
• Content Elements - Paragraphs, HTML blocks, and embedded sections

Field Properties

Every form field has configurable properties:

• Field Type - Determines how the field appears and functions
• Name - Internal identifier for the field
• Label - Text that appears next to the field for users
• Validation - Rules for required fields and data format
• Options - Choices for dropdowns, checkboxes, and radio buttons

Accessing Field Management

Getting to Form Fields

1. Log into your Site Manager admin panel
2. Navigate to Forms in the main menu
3. Click on Form Fields
4. Expand the Form Group where you want to add or edit fields

Adding a New Field

1. Find the Form Group where you want to add a field
2. Click the dropdown arrow next to the group name
3. Select "add field" from the menu
4. The field configuration page will open

Field Types and Configuration

Input Field Types

Text (Short)

• Purpose: Single-line text input for names, emails, phone numbers
• Configuration Options:
  • Label text
  • Placeholder text
  • Default value
  • Required/optional setting
  • Tooltip help text
• Best Used For: Names, email addresses, phone numbers, short responses

Textarea (Long)

• Purpose: Multi-line text area for longer responses
• Configuration Options:
  • Label text
  • Placeholder text
  • Default value
  • Required/optional setting
  • Tooltip help text
• Best Used For: Comments, descriptions, detailed responses, special instructions

Dropdown (Select)

• Purpose: Single selection from a predefined list of options
• Configuration Options:
  • Label text
  • List of options (one per line)
  • Required/optional setting
  • Tooltip help text
• Best Used For: States/provinces, service preferences, ministry selections

Checkbox

• Purpose: Multiple selections from a list of options
• Configuration Options:
  • Label text
  • List of options (one per line)
  • Tooltip help text
• Best Used For: Multiple interests, availability options, permission checkboxes

Radio

• Purpose: Single selection from visible options
• Configuration Options:
  • Label text
  • List of options (one per line)
  • Tooltip help text
• Best Used For: Yes/No questions, single choices with few options

Date

• Purpose: Date selection with calendar picker
• Configuration Options:
  • Label text
  • Required/optional setting
  • Tooltip help text
• Best Used For: Birth dates, event dates, appointment scheduling

Date Range

• Purpose: Start and end date selection
• Configuration Options:
  • Label text
  • Required/optional setting
  • Tooltip help text
• Best Used For: Event duration, availability periods, vacation dates

Hidden

• Purpose: Pass data invisibly without user interaction
• Configuration Options:
  • Name (no label needed)
  • Default value
• Best Used For: Tracking codes, form identifiers, source tracking

Layout Field Types

Heading

• Purpose: Large section titles
• Configuration Options:
  • Heading text
• Best Used For: Major form sections, primary organization

Subheading

• Purpose: Smaller section titles
• Configuration Options:
  • Subheading text
• Best Used For: Subsections, secondary organization

Divider

• Purpose: Horizontal line to separate sections
• Configuration Options:
  • None (automatic horizontal line)
• Best Used For: Visual separation between form sections

Space

• Purpose: Adjustable vertical spacing
• Configuration Options:
  • Height (0-100 pixels)
• Best Used For: Custom spacing between elements

Paragraph

• Purpose: Rich text content blocks
• Configuration Options:
  • Paragraph content (with text editor)
• Best Used For: Instructions, explanations, additional information

HTML

• Purpose: Custom HTML content
• Configuration Options:
  • HTML code
  • Responsive settings (aspect ratios for embedded content)
• Best Used For: Embedded videos, custom formatting, advanced layouts

Section

• Purpose: Embedded content from other Site Manager sections
• Configuration Options:
  • Section selection
• Best Used For: Reusing existing content, complex information blocks

Field Configuration Process

Basic Field Setup

1. Select Field Type - Choose from the dropdown menu in the Type field
2. Enter Field Name - Use a descriptive, unique name for internal reference
3. Configure Type-Specific Options - Settings will appear based on the field type selected

Common Configuration Options

Labels and Text

• Label - The text that appears next to the field for users
• Placeholder - Gray text that appears inside empty fields as a hint
• Tooltip - Help text that appears when users hover over an information icon
• Description - Additional explanatory text that appears below the field

Validation Settings

• Required - Toggle to make the field mandatory for form submission
• Disabled - Toggle to show the field but prevent user interaction

Field Options (for Dropdown, Checkbox, Radio)

• Enter options one per line in the Options field
• Each line becomes a selectable choice
• Leave blank lines to create spacing in option lists

Configuring Dropdown Options

For dropdown, checkbox, and radio fields:

1. Click in the Options field
2. Enter each choice on a separate line
3. Example:

   Orthodox
   Catholic
   Protestant
   Other

4. Users will see these exact options in the field

Setting Up Date Fields

Date and Date Range fields automatically include:

• Calendar popup for easy date selection
• Proper date formatting
• Validation to ensure valid dates

No additional configuration is required beyond the basic field setup.

Advanced HTML Field Configuration

HTML fields offer responsive options:

• Not Responsive - Fixed content size
• Responsive ratios - Various aspect ratios for embedded content (4:1, 16:9, 4:3, etc.)
• Use responsive settings when embedding videos or iframes

Field Management Operations

Editing Existing Fields

1. Find the field in your Form Fields list
2. Click the "edit" button next to the field
3. Make your changes in the configuration form
4. Click Save to apply changes

Reordering Fields

Use drag-and-drop to reorder fields within a group:

• Drag fields up or down to change their order
• The order in the admin interface matches the order visitors see
• Fields can be moved between groups by dragging

Duplicating Fields

To copy an existing field:

1. Find the field you want to copy
2. Click the dropdown arrow next to the field
3. Select "duplicate" from the menu
4. A copy will be created that you can then modify

Deleting Fields

Warning: Deleting a field will also delete all data collected through that field.

1. Find the field in your list
2. Click the dropdown arrow next to the field
3. Select "delete" from the menu
4. Confirm the deletion when prompted

Best Practices for Field Configuration

Field Design Guidelines

• Clear Labels - Use descriptive labels that clearly indicate what information is needed
• Helpful Placeholders - Provide examples or formatting hints in placeholder text
• Logical Grouping - Organize related fields together within Form Groups
• Progressive Disclosure - Put most important fields first, optional details later

User Experience Considerations

• Minimize Required Fields - Only require information you truly need
• Provide Help Text - Use tooltips and descriptions to guide users
• Use Appropriate Field Types - Match the field type to the data being collected
• Test on Different Devices - Verify forms work well on mobile devices

Data Collection Best Practices

• Consistent Naming - Use similar field names for the same type of data across forms
• Plan for Analysis - Consider how you'll use the collected data
• Respect Privacy - Only collect information you have a legitimate need for
• Consider Accessibility - Ensure forms can be used by visitors with disabilities

Field Validation and Requirements

Required Fields

When you mark a field as required:

• Users must complete the field before submitting the form
• The field label may be highlighted to indicate it's required
• Form submission will fail with an error if required fields are empty

Field-Specific Validation

The Site Manager automatically provides validation for:

• Email Fields - Validates proper email format
• Date Fields - Ensures valid date selection
• Required Fields - Prevents submission without completion

Error Handling

When validation fails:

• Users see specific error messages
• The form highlights problematic fields
• Submission is prevented until issues are resolved

Troubleshooting Common Issues

Fields Not Appearing on Forms

• Verify the field's Form Group is attached to the form
• Check that the field isn't disabled
• Ensure the field has a proper name and configuration

Dropdown Options Not Showing

• Check that options are entered one per line in the Options field
• Verify there are no special characters causing issues
• Ensure the field type is set to "select"

Date Picker Not Working

• Verify the field type is set to "date" or "daterange"
• Check that JavaScript is enabled in the visitor's browser
• Ensure the field has a proper name configured

Required Field Validation Failing

• Confirm the Required toggle is enabled
• Check that the field has a proper name
• Verify the field type supports required validation