You can create and edit the forms you have set up in the Forms module. You will use them to give visitors of your site a possibility to contact you or to subscribe to a newsletter.
While editing forms, you are free to decide which information the user has to leave and which information the user can provide voluntarily. Existing forms can be adapted at any time and any number of new forms can be created. When creating forms, you will quickly become familiar with the functions and work with this module.
Forms – Overview
The first thing you see when you click on the Forms module is an overview of all available forms. You can now edit a form by clicking on the pencil icon or the form name. With the second icon you duplicate a form and with the recycler icon you delete it.
Use + Form name or the + icon above the content area to create a new form
A created form can be used as often as you like. To do this, you only need to add a form content element in the page view (or list view) and select the form in the plugin.
First you have to choose between a blank and a predefined form. In the blank form, you only have to define a form name and the form storage. The name can be changed at any time. For a predefined form, you must also select a start template. In our Website-Base you will find a template for a simple contact form consisting of two pages/steps, which already contains a privacy notice.
After creating the form you will get to the editing view.
On the left is the column in which a form page tree can be seen. A page is automatically created in the blank form. There are two pages in the predefined form. Pages can be added or deleted at any time.
In the middle, you add the individual form elements and select them for editing. Each element can also be selected using the form tree. If you have selected a page in the form page tree and not a single element, all elements are simply listed in the middle. Each element can be clicked on in this view, so that you can access the element's settings (right column).
In the right area, you can adjust the settings for the form, the contained pages and the individual elements.
If you select the form name in the form page tree, you can customize general information about the form in the right column.
- Form name: The form name can be changed here at any time.
- Submit label: This is the button that users press last to confirm and submit their entries.
- Use Invisible reCaptcha: Distinguishes bots from human behavior without requiring interaction with the user.
- Finisher: Define, for example, who is notified after sending and how the entered information is handled.
Finishers determine how information and files are handled when the user sends his information and who should be informed. You should observe the order of the finishers. Users and the Admin should always be notified first. If you do not want to save uploaded files in the system, the e-mails are followed by the deleting the uploads. Only at last a Finisher is placed to redirect the user to another page. You should refer to either an internal page or an external URL.
Mail Templates – email to the website user
With this finisher the user will be contacted at the given address. To do this, the email element must already be inserted in the form (or another element containing an email address). If the element is present, the element with the address can be selected in the required field. Additionally, you can specify a mail template, e.g. contact_user.
Mail Templates – email to the website admin
After submitting the entries, the admin of the site can also be notified. For this purpose, only the corresponding email address must be entered. Here you can also use the mail templates, in this case: contact_admin.
Prevents uploaded files from being saved in the system. The files are then only sent as attachments in the emails.
Forms – save user input to the database
Normally, user input is stored on the domain start page. If you want to specify a different page, you must enter the corresponding Page ID in this Finisher.
Redirect to a page
After sending the data, you can redirect the user to an internal page.
Redirect to a URL
Or you direct him to an external page, e.g. a landing page. Just enter a URL for this.
If you have selected a page in the form page tree, you can specify the step name and the label of the Previous and Next buttons. These settings must be made for each individual page. Where the buttons can then be seen on the page is shown in the frontend images of our example form.
To add a new step, click on the Create new step button in the form tree on the left. The page can then be filled with the elements of your choice.
When an element is clicked or added, you will see some fields that can be filled in. Most important are the label of the element, the placeholder, whether it is a required field and possibly validators.
To add a new element, select a page/step and click on the button Create new element in the middle area at the bottom. Then select what you need from the list of elements. You can see the available elements in a screenshot of the empty form.
Validators can be assigned to individual form elements. They control or limit the input of the users in the frontend. Not all validators are available for all elements. Some elements automatically contain a validator, such as the email element, while others have no validator selection. Optionally, you can add an error message to each validator, which appears if the validation fails. The following validators are available.
- Alphanumeric: The input must contain letters and numbers.
- Non-XML text: The validator checks whether the specified value is a valid text, that means it does not contain any XML tags.
- Strings length: Specify a minimum and a maximum number of characters for the input.
- Email: The Validator checks whether the input matches the form of an email address.
- The email element automatically contains this validator.
- Integer number: Checks if the given value is a valid number.
- Floating-point number: Checks whether the input is a floating point number.
- Number range: Specify a minimum and/or maximum of the number that users should enter.
- Number: Only available for element 'Number' and it is automatically selected.
- Regular expression: Enter a valid PHP PCRE regular expression. The validator checks if the user input matches the expression.
- Can check, for example, whether specified domain names correspond only to the top-level domain.
- File size: Ensures that no files that are too large are uploaded. Specify a minimum and a maximum.
- Files should not be larger than 10 MB.
- Validator is only available for file and image upload.
- Date range: Set the minimum date and maximum date.
- Only available for the element 'Date'.
- Number of submitted values: Checks whether the specified value contains the specified number of elements.
- Date/time: Checks if the specified value is valid. It is expected that the date string is formatted according to the W3C standard, i.e. "YYYYY-MM-DDT###:###:##:##+###:##", e.g. "2005-08-15T15:52:01+00:00".
- reCaptcha server-side validator: Only available for the element 'Hidden'.
Reference to the data protection agreement
Every contact form that requires the provision of personal data (e.g. name or e-mail address) must contain a data protection notice. When configuring this element, orientate yourself on the contact form already created in the Website-Base. In the predefined form, which contains a simple contact form, there is also a privacy notice.
Example form with three pages in the frontend
Preview of a Form in the Backend
You would like to know more?
All information about the available offers can be found on the pages of our website base. You have the option of having a website created at a fixed price or opt for a Website as a Service package with which no further hosting costs or security and function updates will be due to you.