Views: 12844
Last Modified: 10.10.2012

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:

Click on image to enlarge

Custom web form templates are created using the visual editor:

Click on image to enlarge

In this case, a web form based on the custom template would look as follows:

Click on image to enlarge

There are two methods to create templates.

  • Create a form and questions as described in the previous lessons. Then, open the form template for editing. In this mode, the Form elements panel has the following items:

    The Existing form fields contains fields that are already properly configured and ready to use. You will find instructions on how to create your own fields and questions below.

  • The template and the web form can be created concurrently. In this mode, the drop-down sections New form fields and Additional elements are available:

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:

Click on image to enlarge

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:

  1. for Input field caption ;
  2. in the web form result table and filter;
  3. 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).

Click on image to enlarge

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:

Click on image to enlarge

The text Date of birth will be displayed in the public section, but the question “When were you born?” – in the question list:

Click on image to enlarge

As we want to make this field mandatory, add the component "Required" sign so that the asterisk will be rendered:

Click on image to enlarge

To enable users post or cancel the form, add the following buttons: Send , Apply , Cancel .

Note: 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:

Click on image to enlarge

You can find the detailed information on using and configuring the components in the documentation.

Courses developed by «Bitrix», Inc.