Knowledge Base

Create and edit forms

Last Modified:
10 Dec 2018
User Level:
Power User

Description

The TERMINALFOUR Form Builder allows you to easily create advanced web forms without programming. The forms you create can be fully customized to meet your needs.

When you click create new form, you initially start with a blank form. Click on field types to add new fields to your form. Fields include text fields, drop-down boxes, buttons etc. Fields can have dependencies and validations associated with them.

When a form is created and a submission made, TERMINALFOUR creates a corresponding Content Type to manage the content.

Create a form

Diagram illustrating the steps to create a form

Form creation divides into six steps:

  • General Settings – add necessary form information such as name and description. You can also apply Bootstrap styling or use your own.
  • Fields - select, add and configure form fields. You can also base your form on an existing Content Type
  • Dependencies – optional rules that can show or hide a form field based on the value that is input in another. For example, you might want to hide a list of faculty names unless the respondent ticks a box identifying themselves as a faculty member
  • Submissions – specifies the location that the submissions will be saved to. By default, this is set to an unpublished Section in TERMINALFOUR but a published Section can be specified too. Fields can also be mapped to a Payment Gateway here. In order to use this, a Payment Gateway must already be configured in System settings. You can also customize the redirects (to a URL or TERMINALFOUR Section) and messages for submission success or failure
  • Emails – a copy of each submission can be mailed to one or more TERMINALFOUR Users. Non-TERMINALFOUR user mail addresses can also be added 
  • Finish –  forms can be deployed using:
    • T4 Tag to add to other TERMINALFOUR content or layouts
    • embed code to add your form to a page not managed by TERMINALFOUR
    • a shareable link that doesn't require a page to be created to deploy it

1 General settings

 

Screenshot of Form general settings

ItemDescription
Form name Sets the name used to identify the form in the application. Can be output on form (see option below)
Description Sets the text used to describe the form in the application. Can also be output on the form (see option below)
Display options
Show name on form Outputs the name specified above as a heading (h2) at the start of your form
Show description on form Outputs the description specified above as a paragraph of text at the beginning of your form
Include styling

Enables the inclusion of a CSS stylesheet with the form. By default TERMINALFOUR form builder uses a Bootstrap themed CSS to style your form. This is only relevant for forms that are included in the site using a T4 tag; embedded forms and standalone forms will always include styling.

If the form uses a date picker (for date fields), and the Include stylng is turned off, and the form is included in the site using a T4 tag, the date pickers will not display or function.

Screenshot of Form - show name and description

2 Fields

This is where you build your form by adding fields.

Screenshot of Forms fields and preview

Configure field mappings

Map to content type
By default, a content type is automatically created for each form. To create a form from an existing content type, choose configure field mappings.

Field / input types

To get started, click on a field type to add it to your form:

Icon Field type Description
Screenshot of Forms text input button Text input Adds a text input used for text, numbers, passwords, web addresses etc.
  Email input Adds an email input with an option to allow the user to receive a confirmation of their submission by email
Screenshot of Forms dropdown button Dropdown Allows users to select a single option from a dropdown
Screenshot of Forms Checkbox button Checkbox Allows multiple options to be selected from a group
Screenshot of Forms radio group button Radio group Allows users to select a single option from a group
Screenshot of Forms Date button Date Allows users to select a date and optional time
Screenshot of Forms Date Range button Date range Allows a start and end date to be set
Screenshot of Forms text area button Text area Allows multiple lines of text to be entered
Screenshot of field button Form WYSIWYG WYSIWYG

Displays a WYSIWYG editor to enter HTML.

TinyMCE, the WYSIWYG editor that Form Builder uses, follows the WAI specification making it compatible with screen readers. 
Find out more about Tiny MCE's Accessibility features.

Screenshot of Forms File button File Uploads a file
Screenshot of Forms Hidden button Hidden Adds an input that will submit a value without the user seeing it
Advanced inputs
Screenshot of Forms cc info button CC info Adds the required fields to accept payment information from the user. i.e. credit card number, expiry date etc. Only one occurrence allowed per form
reCAPTCHA Adds a Google reCAPTCHA field to help prevent spam submissions (available from TERMINALFOUR v8.2.10)
Static elements
Screenshot of Forms Heading button Heading Adds a Heading to the form
Screenshot of Forms Paragraph button Paragraph Adds text to the form - useful to explain parts of your form to users
Screenshot of Forms line break button Line break Adds a line between fields to divide the form into sections

Field settings

Once added, each field can be edited.

General
Field / input data typeItemDescription
All Label Sets the label displayed
All Hide Hide the label from the user
All Required field Sets the field as required
All Tooltip text Sets the text displayed when hovering over the form field
All Placeholder text Sets the text displayed in the form field
Email Confirmation email settings

Allow a user to receive a copy of their submission: Enables the user to receive a copy of their submission, sent to the email they enter in this field

Email subject: Sets the subject of the confirmation email

Dropdown, Checkbox, Radio group Field options

from existing list: The existing TERMINALFOUR list to get options from

manually: Option text, Option value and Selected

Text area Number of rows Sets the number of text rows in the textarea
Hidden "value" attribute Specifies a value for this field when the form is submitted
File File storage method

Add file to media library: Will add a new entry in the Media Library for each uploaded file

Upload file to file system: Will store the uploaded file on your system file system

Advanced
ItemDescription
"name" attribute Specifies a specific name attribute for this field when the form is submitted
Input data type Specifies an HTML5 data type for this input. For example a number or web address. Validation for these additional types is handled automatically. Options are; Text, Email address, Number, Password, Telephone number, URL / Web address
CSS class Specifies a CSS class to be added to the field
ID Specifies a specific id attribute for this field
Validation

Validation can be set for different input data types.

Field / input data typeItemDescription
Text, Email address, Number, Password, Telephone number, URL / Web address, Date, Date range, Text area Required field Sets the field as required
Text, Telephone number Validation text pattern Specifies a regex pattern to use to validate the field
Text, Email address, Password, Telephone number, URL / Web address, Text area Minimum length Ensure that input has at least N characters
Text, Email address, Password, Telephone number, URL / Web address, Text area Maximum length Ensure that input has less than or equal to N characters
Number Minimum value Ensure that input will not be lower than this value
Number Maximum value Ensure that input is not greater than this value
Password Must match another field Ensure that this field has the same value as another
Password Must contain a numeric digit Digit from 0 to 9
Password Must contain a symbol Any of the following symbols will be valid: %+\/'@!#$^?:.(){}~[]-_
Password Must contain a capital letter Must contain a capital letter
Date, Date range Minimum date Ensures the date set is later than this date
Date, Date range Maximum date Ensures the date set is earlier than this date
Date range Min date range difference Ensures that the second date in a range must be at least the specified amount after the first selected date. Time scale options are; Hour(s), Day(s), Week(s), Month(s), Year(s)
File Accepted file extensions 
  1. Allow any file
  2. Specify allowed file extensions: Sets the allowed file extensions. Separated with a space and no .
File Max upload size
  1. Default size (50000KB)
  2. Specify max upload size
Submit and Reset buttons

Button text: Sets the text displayed on the submit button

Show reset button: Adds a reset button to the form that allows users to clear all fields

When the user clicks the submit button a Google Tag Manager (GTM) custom event named formSubmitted is fired, which also contains the name and description of the form:

{
  'event':'formSubmitted',
  'formName': 'The form name',
  'formDescription': 'The form description'
}

This event can be used in Google Tag Manager so form submissions are tracked. 

3 Dependencies

Show and hide fields based on sets of rules.

Dependencies read like a sentence and allow you to show or hide a field based on the value of another one. Click the 'Add dependency' button to get started.

For each dependency you can have one or more "if" statements and then can show or hide another field based on those conditions.

The operators for the if statements will vary based on the field input type:

  • is
  • is not
  • contains
  • does not contain
  • is selected
  • not selected
  • begins with
  • ends with
  • is populated
  • is not populated

The 'option value' should be entered rather than the 'option text' for any list based fields.

4 Submissions

Configure how the data people submit will be dealt with

When the form has been filled out and submitted, how do you want to deal with the data? By default, any submissions are saved in a child section of the form library, but you can also specify a different section you want to save the submissions to or send to a payment gateway

Save submissions to

  1. TERMINALFOUR only: Will save the submissions to an unpublished section within TERMINALFOUR
  2. Named child section: Will save the submissions to one specific section. Enter child section name.
  3. Specified section: Will save the submissions to a named child section of each form instance. Select the section.

Submission name mapping: Sets a field to use as the submission content name

Channel mapping: Sets the channel(s) associated with form submissions

Additional Submission Options

This allows the submissions to also submit to a configured Payment gateway.

Payment gateway field mappings
To correctly process payments, each payment gateway requires certain fields. Fields that are not editable here can be configured in the payment gateway configuration for the gateway selected above. You can specify universal values for all submissions here, map them to values submitted in the form, or even calculate them from the values of multiple fields in your form.

The amount can be set in one of three ways:

  1. Mapped to form field
  2. Manually specified
  3. Calculated value

The currency can be set in one of two ways:

  1. Mapped to form field
  2. Manually specified

On a successful submission

These options specify what happens when a submission is successfully saved.

  • Show a message. There is a default message that can be amended.
  • Redirect to a TERMINALFOUR section. Select the section.
  • Redirect to a URL. Enter the URL.

On a failed submission

In the unlikely event of a submission failure, these options determine the behavior of the form.

  • Show a message. There is a default message that can be amended.
  • Redirect to a TERMINALFOUR section. Select the section.
  • Redirect to a URL. Enter the URL.

5 Emails

Set who gets emailed a copy of each form submission.

Files included in a form submission will be attached to the email. In the email itself, the label of the file field will appear with the file name next to it.
The email is in HTML format with a mailto link and a list of form fields and their submitted values.

System users and groups

Select the users or groups you would like to receive submissions via email.

Non-system recipients

Specify email addresses that should receive copies of each submission. Use this option if a user with the email address does not already exist within your system.

Recipient email addresses: Comma separated list of email addresses that will receive a copy of each submission

Additional options

Subject field mapping: Sets a text field from your form to be used as part of the email subject

Recipient minimum user level: Sets the minimum user level that will receive emails for users in the selected groups

6 Finish

Copy and paste one of the code snippets to deploy your form.

T4 tag: Use this code if you are adding this form to other TERMINALFOUR content or layouts
Embed code: Use this if you want to add this form to a web page not managed by TERMINALFOUR
Shareable link: Use this if you simply want to share the form with other users without having to create another page