You can create templates for your web forms for future usage. To facilitate creating templates, you can click the Form template tab where you can develop your own template or use the default one.
If you use the default template, your web form would display as usually:
Custom web form templates are created using the visual editor:
In this case, a web form based on the custom template would look as follows:
There are two methods to create templates.
Let us create a template and questions for a web form. We shall use the components from the Form elements panel.
The Additional elements menu contains fully-functional controls that you can use in your forms:
The component Form title displays a web form title specified in the component settings. The component Form description can be added to print the description for a web form. In order to notify a user about errors they can make while filling in the form, you can add the validator component Form errors that displays errors, if any. If you need to display some message to a user upon form completion, add the component Form response message. It will display the specified text to a user after clicking Submit (or similar button), e.g. "Your request has been sent".
The New form fields menu contains the following components.
All these components can be easily configured. Consider an example of web form field creation. Choose a field (component) that matches the nature of the intended question best, and add it to the page being edited. For example, use the Date component where you would expect a user to enter the date. Configure the component in the property inspector:
String identifier is generated automatically; it uniquely defines the form field. The identifier name is
new_field_randomnumber. You can type any other name here, but you must ensure that it is unique.
Redefine the new field name to birthdate.
Title (question text) specifies the text displayed beside the field:
- for Input field caption ;
- in the web form result table and filter;
- when displaying web form results or errors.
In our example, type Date of birth here.
Uses HTML – defines whether HTML are used in the title.
Required – if checked, a user must provide an answer (or any other required value) in this field. Enable this option for the Date of birth field.
Show in HTML result table – specifies that an HTML table of the web form results includes a column containing values of this field (in the public section).
Show in Excel result table – the same as with Show in HTML result table, but for Excel tables.
Field type – indicates the type name of a given field; read-only.
Answers – field values. The intention varies depending on the field type:
- default value and value length: for text, date, email, url, password, image, file;
- number of columns and rows: for textarea;
- options, the order and the default selection flag: for radio, checkbox, dropdown, multiselect.
Now, add the Input field caption component and set its properties (the identifier and style).
Identifier: here you have to select the identifier of the field for which the text label will be displayed. In our example – birthdate.
To define the label appearance, you can choose the required CSS style in the Style list.
Since we use the component (Field title) to render the text label, the common visual cue for mandatory fields (asterisk, *) will be added automatically without having to use the component "Required" sign .
Alternatively, you can enter the field title directly in the editor. For example, add the Date field and set its properties as follows:
The text Date of birth will be displayed in the public section, but the question “When were you born?” – in the question list:
As we want to make this field mandatory, add the component "Required" sign so that the asterisk will be rendered:
To enable users post or cancel the form, add the following buttons: Send , Apply , Cancel .
: if you have enabled the option Use CAPTCHA
when creating the form, remember to add at least one CAPTCHA
component to the form. Otherwise, this option will be reset when saving the form:
You can find the detailed information on using and configuring the components in the documentation.