GabrielSoft - 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.

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. (GabrielSoft Payments customers will see a third tab marked with a $.)

Online Form Basic Settings:

  • Alert Email Address - Enter email addresses you would like to receive notifications of form submissions (separate multiple email addresses with a comma)
  • Submit Message - Edit the default message visitors see after submitting their data to the form

Advanced Settings

  • Enable Submission Limit - 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
  • 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

Payment Settings (GabrielSoft Payments feature only)

With GabrielSoft 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.
  • Email
  • 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.

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.