Creating a Form
This page shows you the basics of creating a form within equate forms.
To create a new form, go to the overview page. In the left-hand tree structure, right-click the desired root node or folder. This action will display a menu. Choose "Create," then select "Form." You will now be taken to a page matching the description below.
Naming a form
To enhance user-friendliness, naming a form is essential. In a manner similar to Umbraco's content creation, there's a text box at the top of the form builder for this purpose. If left blank, the form remains unnamed, but please note, naming is a required step during creation.
Groups within a form
To create a group, click the "Add Group" button within the form builder. The new group will initially have the name "Undefined Name". You can rename it by entering a new name in the input box at the top-left corner of the group and then saving the form. To configure group settings, click the "Settings" icon at the top-right of the newly created group.
Configuration Options:
Columns - Columns specify how you desire your form layout to be, At the moment the maximum amount of columns allowed on a group is 2 and the default column configuration is set to 1
Input types within a form
After following the previous steps, you can add questions to your form. Click "Add Question" in the new group. If successful, an overlay appears. Click the "Select Input Type" button
Below are the currently available Input Types and Configuration Options used on Equate Forms:
Textbox
A textbox is commonly used for submitting short text within a form.
See below the customization options available:
Label - The label displayed on the form input
Placeholder Text - The placeholder text displayed in the input
Help Text - The help text displayed on the input
Max length - Specify the max length for this question
Present Validation - Select a preset validation for this question
Email
UK Postcode
Number Only
Text Only
Validation Message - The message that displays when validation doesn't match
Validation Regex - The validation regex equate forms should use to validate
Required Question - Prevent form submission unless this question is populated
Inline Label - Position the label next to the input rather than above it.
Conditions - Determine different events inside your form to either show/hide question(s)
Textarea
A text area is a multi-line input field where users can enter larger amounts of text. It's commonly used for writing paragraphs, feedback, comments, or descriptions.
See below the customization options available:
Rows - Specify the amount of rows in your text area
Label - The label displayed on the form input
Placeholder Text - The placeholder text displayed in the input
Help Text - The help text displayed on the input
Max length - Specify the max length for this question
Required Question - Prevent form submission unless this question is populated
Inline Label - Position the label next to the input rather than above it.
Conditions - Determine different events inside your form to either show/hide question(s)
Selectbox
A selectbox, or drop down, is an HTML form element that provides users with a list of options in a compact view. Users can choose one option from the dropdown, making it ideal for situations where space is limited, and the selection list is not too long. The selectbox enhances user interface by keeping forms organized and efficient for gathering specific user input.
See below the customization options available:
Add a select list item - Name your select list item below and click 'add'
Label - The label displayed on the form input
Help Text - The help text displayed on the input
Required Question - Prevent form submission unless this question is populated
Inline Label - Position the label next to the input rather than above it.
Conditions - Determine different events inside your form to either show/hide question(s)
Radio
A radio button, part of HTML form elements, allows users to select a single option from a predefined set of choices. Each button in a group is mutually exclusive, ensuring only one selection is possible at any one time, ideal for scenarios with limited and distinct options.
See below the customization options available:
Columns - Specify the amount of columns there are in your radio list
Add a Radio - Enter a name for your radio input, then click 'Add.'
Vertical Sort - Arranges items into columns for easy vertical viewing
Label - The label displayed on the form input
Help Text - The help text displayed on the input
Required Question - Prevent form submission unless this question is populated
Inline Label - Position the label next to the input rather than above it.
Conditions - Determine different events inside your form to either show/hide question(s)
Checkbox
A checkbox is an HTML form element that allows users to select one or more options from a set. Unlike radio buttons, multiple checkboxes can be checked simultaneously. This makes checkboxes ideal for scenarios where users need to choose multiple items, such as selecting preferences or agreeing to terms. Checkboxes often accompany labels to provide context about the selectable option.
See below the customization options available:
Columns - Specify the amount of columns there are in your radio list
Add a Checkbox - Name your checkbox input below and click 'add'
Vertical Sort - Arranges items into columns for easy vertical viewing
Label - The label displayed on the form input
Help Text - The help text displayed on the input
Required Question - Prevent form submission unless this question is populated
Inline Label - Position the label next to the input rather than above it.
Conditions - Determine different events inside your form to either show/hide question(s)
Hidden
A hidden input is an HTML form element that is invisible to the user but maintains data that can be submitted with a form. It is useful for including information that should not be altered by the user, such as tracking information or a constant value needed for form processing. Hidden inputs are often used in conjunction with server-side scripts to retain the state or pass additional data.
See below the customization options available:
Hidden Value - Specify the hidden value that gets submitted with the form, if not specified the Alias will match with a query string parameter and automatically fill the hidden input.
Conditions - Show/Hide specified inputs determined on certain conditions
Title & Description
A Title & Description in a form provides users with clear information about the purpose of the form and guides them on what information is required. The title succinctly identifies the form's intent, while the description offers additional context or instructions to ensure accurate and complete responses from the users.
See below the customization options available:
Title - Specify a title for this question
Heading Type - Specify the size of this title
Description - Specify a description for this question
Conditions - Show/Hide specified inputs determined on certain conditions
Password
A password input is a type of form field used to securely capture user passwords. By masking the entered characters, it ensures confidentiality and protects sensitive data from being viewed by others. It often includes validation rules to enforce security, like minimum length and character requirements.
See below the customization options available:
Label - The label displayed on the form input
Placeholder Text - The placeholder text displayed in the input
Help Text - The help text displayed on the input
Must Contain - Must contain at least one of the following
Min Length - Specify the min length for this question
Max Length - Specify the max length for this question
Validation Message - The message that displays when validation doesn't match
Required Question - Prevent form submission unless this question is populated
Inline Label - Position the label next to the input rather than above it.
Conditions - Determine different events inside your form to either show/hide question(s)
Date/Time
A Date/Time input is a form field used to capture date and time information from the user. It typically provides a calendar and clock interface to ensure users can easily select accurate date and time values. This input type may include validation to ensure the provided data meets specific format requirements and often supports both date-only and time-only entries.
See below the customization options available:
Allow Time - Enable time on this date input
Label - The label displayed on the form input
Placeholder Text - The placeholder text displayed in the input
Help Text - The help text displayed on the input
Date Validation - The date/time will validate as per selected below:
Past Date - (Only allow dates that are set in the past)
Future Date - (Only allow dates that are set in the future)
Enable Date Range Validation
Date Range - Validate a date between two date ranges.
Validation Message - The message that displays when validation doesn't match
Required Question - Prevent form submission unless this question is populated
Inline Label - Position the label next to the input rather than above it.
Conditions - Determine different events inside your form to either show/hide question(s)
File Upload
A File Upload is a form component that enables users to attach and submit a singular file with their form responses. It includes options for selecting files from their device and supporting various file types and sizes as defined by the form's configuration settings. The file upload field includes options for file validation to ensure that only acceptable files are submitted.
See below the customization options available:
Label - The label displayed on the form input
Help Text - The help text displayed on the input
Allowed Files - Specify the files a user can upload
Picture
Document
Audio
Video
File Size Limit - Specify the max file size in megabytes (mb)
Validation Message - The message that displays when validation doesn't match
Required Question - Prevent form submission unless this question is populated
Inline Label - Position the label next to the input rather than above it.
Conditions - Determine different events inside your form to either show/hide question(s)
Multi-Upload
A Multi-Upload is a form component that enables users to attach and submit multiple files with their form responses. It includes options for selecting files from their device and supporting various file types and sizes as defined by the form's configuration settings. The file upload field includes options for file validation to ensure that only acceptable files are submitted.
See below the customization options available:
Label - The label displayed on the form input
Help Text - The help text displayed on the input
Allowed Files - Specify the files a user can upload
Picture
Document
Audio
Video
File Size Limit - Specify the max file size in megabytes (mb)
File Limit - Specify the max number of files allowed for this question, if no value is present then the file limit is 5.
Validation Message - The message that displays when validation doesn't match
Required Question - Prevent form submission unless this question is populated
Inline Label - Position the label next to the input rather than above it.
Conditions - Determine different events inside your form to either show/hide question(s)
Video
Display a video inside your form
Video Id - The youtube video ID that is placed in the URL for example if the link is "https://www.youtube.com/watch?v=thisisatestID" you'd enter "thisisatestID"
Conditions - Determine different events inside your form to either show/hide question(s)
Terms and Conditions
A Terms and Conditions input on a form is a mandatory checkbox that users must select to indicate they agree with the outlined legal terms before submitting the form. It ensures that users acknowledge and accept the rules and guidelines provided by the form creator, which often pertains to privacy, usage policies, and liabilities.
Terms Page URL - Specify the URL of the terms page
Policy Page URL - Specify the URL of the policy page
Label - The label displayed on the form input You can use placeholders {terms} & {policy} in parts where you'd like to display the specified page(s)
Conditions - Determine different events inside your form to either show/hide question(s)
ReCAPTCHA v2
ReCAPTCHA v2 is a security feature integrated into forms to distinguish between human users and bots. It helps prevent automated abuse by requiring users to complete tasks such as clicking checkboxes or identifying images. This enhances form security by reducing spam and unauthorized submissions.
Conditions - Determine different events inside your form to either show/hide question(s)
ReCAPTCHA v3
ReCAPTCHA v3 is a security mechanism that helps protect forms from bots without user interaction. Unlike v2, it runs in the background and analyzes user behavior to assign a risk score. This score enables the system to take action based on the likelihood that the user is a bot, allowing for a seamless user experience while maintaining security.
Conditions - Determine different events inside your form to either show/hide question(s)
Stripe - Premium Feature
Stripe is a popular payment processing platform used to handle online transactions securely. In a form context, a Stripe input typically involves capturing payment details like card numbers, expiry dates, and CVC codes. It helps streamline the payment process by securely collecting and transmitting sensitive information to the Stripe servers, ensuring compliance with industry standards such as PCI-DSS.
Price - Enter the price of your product NOTE: Enter a value as a decimal, for example for £10 you would enter £10.00
Currency - Select the currency related to your country
GBP
USD
EUR
Label - The label displayed on the form input
Help Text - The help text displayed on the input
Conditions - Determine different events inside your form to either show/hide question(s)
Last updated