The Form Editor is a user-friendly tool that allows you to create various types of web forms for interacting with site visitors or collecting user information. With its intuitive interface, similar to the Text and Image Editor but with added customization options, you can design and configure forms such as feedback forms, subscription forms, surveys, and more.
Adding a Form to Your Website
1. Navigate to the Build tab from the left menu and select the Forms category.
2. Drag and drop the form element onto the desired place of the page. Blue placeholder will indicate the closest available drop location.
Form Components
1. Elements: Configure the content, including form fields, checkboxes, radio buttons, and the call-to-action button.
2. Settings: Define what happens upon form submission, such as sending data to an email or database.
Form Elements
The Text Field allows users to input short, single-line text entries in your form.
Field Types
The Type setting determines the kind of data users can enter:
- Text – Displays the input exactly as typed.
- Password – Hides input characters by displaying them as *** (e.g., for passwords).
- Hidden – Stores system-related information (e.g., referrer or browser details) or pre-filled data that users should not see.
- File* – Allows visitors to upload images, audio, video, or other files. Submitted files generate an email with a clickable download link.
Customization Options
- Name – A unique identifier for referencing the field within the form editor and in emails or blog entries generated by the form.
- Width – Adjust the field's width by entering a value or dragging the resize handles.
- Max Length – Sets the maximum number of characters the field can accept.
- Validate As – Defines the required content type (e.g., an email field must contain a properly formatted email address). If the input is invalid, users will see a prompt to correct it.
- Hint – Displays helper text when users click inside the field, providing guidance or examples.
- Default Value – Pre-fills the field with a predefined value that users can modify.
File Uploads*
- To store uploaded files, the form must be linked to a database.
- Files stored in the database will remain accessible and count toward the account’s storage limit.
- File links sent via email do not use storage but will expire after 30 days
2. Text Area
The Text Area form field is similar to the Text Field, but it allows for longer, multi-line text input.
Customization Options
In addition to the identical for the Text Field - Name, Label, Width, Hint, Validate As and Default Value, there are following options for the Text Area:
- Height – Adjust the height of the text area either by changing the number in the height field or by dragging the resize controls of the text area.
- Wrap – Defines how the text is displayed when submitted in emails or displayed in forums/blogs.
- Default – Uses the browser or email client’s default text wrapping settings.
- Off – Disables text wrapping, so the text will not break onto new lines when typed.
- Physical – Displays the text exactly as it was wrapped in the Text Area.
- Virtual – Allows the email client to decide how the text will be wrapped.
3. Select Field
The Select Field allows users to choose from a predefined list of options. It can be displayed as either a dropdown menu or a list, depending on the selected configuration.
Customization Options
- Type – Defines how the options are displayed:
- Menu – Displays a dropdown where users can select one option.
- List – Shows all available options in a vertical list.
- Options – Represents the selectable choices in the field.
- Option Name – The text displayed in the dropdown or list.
- Option Value – The actual data sent in emails when the option is selected.
- Order & Management – Use the up/down arrows to rearrange options, delete unwanted ones, or set a default selection that appears when the form loads.
Checkboxes allow users to select multiple options from a list or toggle a single option on or off. They are useful for presenting multiple-choice selections where more than one option can be chosen.
Customization Options
- Name – The unique identifier for the checkbox, used in the Form Template Editor, emails, and blog entries. Think of it as the question users are answering by selecting or deselecting checkboxes.
- Value – Represents the selected answer. For example, if the checkbox value is set to "Yes", checking the box means the user has responded affirmatively.
- Selected by Default – If enabled, the checkbox will be pre-checked when the form loads.
- Mandatory – Requires users to check the box before submitting the form. This is useful for agreement checkboxes, such as requiring users to accept Terms and Conditions before submission.
Radio buttons are used when only one option can be selected from a predefined list. Unlike checkboxes, selecting one radio button automatically deselects any other option in the same group.
Customization Options
- Group Name – All radio buttons representing choices for the same question must belong to the same group. Only one button per group can be selected at a time.
- Value – Represents the answer choice. For example, if the question is "Do you like my site?", the group name could be "LikeMySite", with value options Yes, No, and Needs More Work. If a user selects Yes, the submitted response will appear as: LikeMySite: Yes.
- Default State – Allows pre-selecting a radio button when the form loads.
- Mandatory – Requires the user to select an option before submitting the form.
6. Feedback Form
The Form editor includes a built-in Feedback form wizard, which can be easily added by selecting the F icon.
This form comes pre-configured with all the necessary fields for submitting feedback, including a Call To Action button. The fields are set with default options, but you can customize them as needed to better suit your requirements.
7. Success/Error Messages
After the form is submitted, the system displays either a success or error message. You can control the placement of these messages by specifying their location in the editor.
Use the Info icon to select where you want the messages to appear. In the Form Properties, when Advanced Options are enabled, you can also customize the Success Message. If the field is left blank, the default success message will be displayed. However, if you prefer, you can enter a custom message, in the Form Properties, that will be shown to your visitors upon successful submission of the form.
8. Call-to-Action Button
The Call-to-Action (CTA) button is a crucial element of the form, as it enables users to submit their input and complete the form’s intended actions. Without it, form submission is not possible.
To insert a CTA button, locate its icon under the Inline Elements section of the Form Editor toolbar and click on it. Once added, click on the button to configure it as a submission button. In the Link drop-down menu, select {Submit Form} to enable form submission.
If you need a reset button, you can create one by following the same steps and selecting {Reset} instead. Additionally, the right panel provides an editable field where you can customize the button’s Caption text to match your form’s needs.
Call-to-Action Button Properties & Customization
- Button Caption & Sub-Caption: Set the main text and optional sub-text displayed on the button.
- Size: Choose from small, medium, or large button sizes.
- Minimum Width: Define a minimum button width for consistency in layout.
- Mouse-Over Caption & Sub-Caption: Specify alternative text that appears when users hover over the button.
- Text Transition: If a mouse-over caption is set, select a transition effect for a smooth visual change.
- Highlight Effect: Add an animation effect that activates 3 seconds after the page loads and repeats every 30 seconds.
- Color: Select from three pre-defined button colors.
- Alignment: Align the button within the content (left, center, or right).
- Padding: Adjust the button’s padding in pixels for optimal spacing.
- Button Icon: Choose an icon from the Stock Image Library or upload a custom image.
- Mouse-Over Icon: Optionally, add a different icon that appears on hover.
- Icon Location: Position the icon before or after the button caption.
Form Settings
1. Next Page
Specify the page that should open after successful form submission. This can be a dedicated ‘Thank You’ page or any other relevant page on your site. Be default, the form is set to keep users on the same page, upon successful submission. To change that - via Link type choose the desired page.
2. Send to Email
Enable Send to Email to receive form submissions via email from your website visitors. This will expand additional options:
|
- To Email – Enter the email address where form submissions should be delivered, e.g., orders@contactmywebsite.com. |
|
|
- From Email – To ensure deliverability of form submissions, we have disabled the option to specify the sender's email address. |
|
|
- Mail Subject – Define the subject line of the email (e.g., "New Information Request"). You can also use $xxxxx$ wildcards to personalize the subject based on user input. |
3. Email Format & Template Editor
Choose the format of the email:
- Plain – Sends text-only emails, stripping any formatting.
- HTML – Sends formatted emails, provided your email client supports HTML.
For custom email layouts, select Use Template, which opens the Template Editor:
- The Template Editor functions as a simplified text and image editor.
- Use the Value dropdown to insert placeholders corresponding to form fields.
- Once saved, every form submission will generate an email based on your template structure.
4. Send Confirmation Email
This feature sends an automated response to visitors confirming their submission.
- To Email – Enter the email address where form submissions should be delivered, e.g., orders@contactmywebsite.com.
- From Email – To ensure deliverability of form submissions, we have disabled the option to specify the sender's email address.
- Mail Subject – Define the subject line of the email (e.g., "New Information Request").
- Message Content – Enable via Use Template > Edit to open the Text Template Editor, where you can customize the confirmation message. Use Merge Tags to insert form field data (e.g., $Email$).
5. Send to Database
Enable Send to Database to store submitted form data in a site-hosted database. The form automatically creates a dedicated database with required columns matching form field names and data types. You may also use an imported database, but ensure it has matching column names and types.
Additional Settings:
- Requires Confirmation – Sends an email with a confirmation link that users must click to validate their submission.
- Require Approval – Notifies a moderator via email, requiring them to approve or reject the submission before it is stored. This helps prevent spam or accidental submissions.
For additional details, refer to the Database Editor application tutorial.