How to create online forms: The basics
Use the Forms module to easily build mobile-friendly forms and gather data directly on your website.
IN THIS ARTICLE:
How to add an online form to a page
- 1
-
Drag and drop the Forms module onto the page
Navigate to the page on which you'd like to create an online form. Once there, click Add Content > Core Modules > and click to drag and drop the Forms module onto the page.
Note: A form module can only be placed a) on a custom, interior (non-home) page. And b) there can be only one form module per page.
If you are using Sections, be sure to have a Row or Columns Section available to drag the Form module into.
- 2
-
Drag and drop fields into the form
Hover your cursor over the form to reveal two tabs: Basic and Prebuilt. Both tabs contain fields you can drag and drop into the "Drag Fields Here" area of the form. Continue adding fields as needed.
NOTE: Rearrange fields or groups of fields by clicking and dragging the orange handle, which is located along the right edge of each form field.
- 3
-
Customize your fields
Hover your cursor over a field and click the Settings icon ( illustrated below) to customize individual form fields. Use this method to edit field titles, set fields to "Required," enter field instructions, and much more.
NOTE: Click the Copy icon to duplicate a single field or group.
- 4
-
Edit the form's title (optional)
Click the title icon to show or hide a title for the form. Once the title is shown, click the title to edit it directly on the page.
- 5
-
Edit the form's settings
Click the Settings icon to open the Online Form Settings dialog, which contains two tabs: Basic and Advanced. (eCatholic Payments customers will see a third tab marked with a $.)
Basic Settings:
- Form Status - Select Enable to allow site visitors to see and complete the form or Disable to prevent visitors from accessing the form
- Alert Email Address - Enter email addresses you would like to receive notifications of form submissions (separate multiple email addresses with a comma)
- Limit Submissions - Toggle On to cap the number of form submissions at a specific amount
- On payment forms where payment is required, only submissions that also have been paid will count against the submission limit. Learn more
- Submit Button Text - Edit the text that appears on the form's "Submit" button. (e.g., "Reserve Your Spot")
- On-screen Submit Message - Edit the default message visitors see after submitting their data to the form
- Submission Limit Reached Message - Edit the default message visitors see if a form is Enabled, Limit Submissions are on, and the form has reached its submission limit
- Copy Online Form - Copy the form and select the page to which the form should be moved
Get full instructions: How to copy a form - Block form submissions - Enter specific text to block form submissions
Advanced Settings:
Payment Settings (eCatholic Payments feature only)
With eCatholic Payments, you can create custom payment forms using the Forms module.
Get full instructions: How to add a payment form to a page
- 6
-
Publish the form
Once you've finished adding fields and editing the form's settings, click the Publish button at the bottom of the page.
Understanding Basic form fields
Drag and drop the following Basic form fields into your online forms:
- Text Field - Allows visitors to enter basic text data into the form. Use when gathering smaller amounts of text data (e.g., a few words of text).
- Text Area - Allows visitors to enter basic text data into the form. Use when gathering larger amounts of text data (e.g., a paragraph or more of text, such as a "Comments" field).
- Select - Creates a drop-down menu of options that can be selected. Visitors must select one option.
- Radio Buttons - Creates a list of options that can be selected. Visitors must select one option.
- Checkboxes - Creates a list of options that can be selected. Visitors may select one or more options.
- Custom Text - Insert a paragraph of plain text into the form.
- Group - Organizes fields into groups
- Replicator - Organizes fields into groups that can be easily duplicated without having to copy and rename the group for each duplicate required. (e.g., Use this field when families are registering multiple children for an event. Since families have various numbers of children, the Replicator allows the form to respond to exactly how many children each family needs to register. See How to create a replicator group for a step-by-step guide.)
Understanding Prebuilt form fields
Prebuilt form fields are the most commonly used fields. Save time by dragging and dropping the following Prebuilt form fields into your online forms:
- First Name, Last Name
- City, State, Zip
- Auto Reply Email - Allows visitors to enter an email address that will automatically receive a confirmation message once the form is submitted.
- Reply-to address - In the Advanced settings of the Auto Reply Email field, add a Reply-to address. This means that if your visitors click Reply on the automated confirmation email they receive after completing your form, their message will go to the email address you specify.
- Phone
- Integer - Requires visitors to enter a whole number
- Date
- State
- I Agree... Checkbox - Creates a waiver with a checkbox that visitors must select before submitting the form.
In addition to setting form submission limits, the following fields allow for field limits.
- Basic form fields - Select, Radio buttons, and replicator
- Prebuilt form fields - Integer
See Form Field Limits for instructions on limiting form fields.
Managing form results and downloading data
Managing data submitted through your online forms is easy with the Form Results Manager: Filter form results, export a CSV file, edit/delete form submissions, and more. See How to manage form results with the Form Results Manager for complete instructions.