The Elements tab allows you to add and configure individual fields on your forms.
- Built-in elements provide basic functionality and can be used for most forms.
- Custom elements offer advanced layout and flexibility.
Although the Elements tab provides detailed control over individual fields, it is usually best to start with Groups when building a form. Groups are covered in the Form Setup KB.
Basic Structure
Each element on a form exists within a simple hierarchy:
FieldSet → Row → Column → Element
- FieldSet: A logical section of the form, e.g., Payment Information.
- Row: A horizontal container within a FieldSet.
- Column: A vertical container within a Row.
- Element: The actual label, input, radio button, or other field.
Example of a single row layout:
- Each column usually contains one element.
- In a typical layout, the first column contains a Label, and the second column contains an Input.
- When removing a field, drag the entire row so that all columns and elements within it are removed together.
Built-in Elements
Amount Radio Row
Displays predefined donation amounts that the user can select. Each option can optionally include a short description.
Example options:
- $180 – Builder
- $360 – Supporter
- $540 – Founder
- $770 – Patron
- $1,000 – Benefactor
An "Other" option is automatically added.
Usage:
- Drag the Amount Radio Row into the Payment Information FieldSet.
- Remove the standard Amount field by dragging the entire row off the form.
- Click the Setup button to edit the amount presets.
Payment Method
Allows users to choose their payment method (e.g., Credit Card or Check / Pay Later).
When a user will choose Check (Pay Later) is selected, the Credit Card Information section is automatically hidden and not required.
Usage:
- Drag the Payment Method element above the Credit Card Information section.
- Click the Setup button to rename the Check option (e.g., “Pay Later” or “Pay at the Door”). Regardless of what it's called, it will function in the same way: hide the Credit Card Information section.
Reservation Amount / Total Amount
Applicable when the form includes both a Guest Reservation group and a Donation:
- Reservation Amount: Automatically displayed below the Guest Reservation section.
- Total Amount: Combines the reservation total and donation amount.
Usage
- Drag these fields onto the form and place them where you want the to display (e.g., above the Submit button).
Notes
- These fields do not need to be added manually to display automatically they are there just to change the default of where these will appear..
Cover Processing Fee
Allows users to optionally add an amount to cover processing fees.
Documentation: Donor Covers Processing Fee Option
Promo Code
Allows users to enter a promotional or discount code. Applies to the Guest Group only. If valid and not expired, the Reservation Amount is discounted automatically.
- Promo Code: Code the user enters.
- Amount or Percent: Discount applied.
- Expiration Date: Last valid date for the code.
Custom Elements
Custom elements provide additional flexibility and are generally considered more advanced. They are most often used when adding fields that aren’t in the database.
Key Guidelines:
- Data Type: Leave this blank for custom fields not tied to database fields.
- Name & ID: Assign a unique Name and ID to each custom element. These identifiers are used when viewing submissions or receiving emails.
- It's easiest to use the Quick Layout Helps. For example, when dragging an Input Row onto the form, a row, two columns and a label and input are all created in one fell swoop. Then you can set the Label name and Input Name and ID accordingly. Columns widths are also set automatically.
Container Elements
- FieldSet – A logical section of the form (e.g., Payment Information).
- Row – A horizontal container within a FieldSet.
- Column – A vertical container within a Row.
TIP: The Columns width should always be set to a percent for example. The columns that contains the Label use 30% and and for the Input 70%. Together they are 100%.
Standard Elements
- Label – Text displayed to describe a field.
- Checkbox – Allows single or multiple selections.
- Input – Single-line text or number input.
- Text Area – Multi-line text input.
- Select – Dropdown list for single selection.
- Radio Button – Select one option from a group.
- Legend / HR – Visual separators or headings.
Quick Layout Helpers
- Input Row – Adds a label and input together in one row.
- Select Row – Adds a label and dropdown together in one row.
Field Settings
When an element is selected, several settings are available. In most cases, only adjust the following:
- Placeholder: Text shown before the user enters a value.
- Required: Determines whether the field must be completed.
- Setup: Some fields, such as Purpose or Title, include a Setup button to configure options.
Changing other settings may cause the field to function incorrectly.
Design Tips
- You can drag a group beside another group; this is the same as placing it below.
- There is no automatic ordering for groups. Move the top group to the bottom or reposition as needed.
- Avoid nesting groups or elements inside other groups. Place them on a blank area of the canvas instead.