Form Widget

Form Widget is created to manage different contact forms on the website. With the help of this widget you can create and edit various forms beginning with

the simple three-field contact forms and up to registration forms with a large number of fields.

1. Like any other module, the Forms Widget has got its custom properties displayed on the right panel, when the module is selected.

Switching to the Edit Widget, Forms Widget opens a control panel that displays all the fields included. A built-in WYSIWYG Editor allows you to change the

parameters of the existing fields, add new ones or delete the fields. Here you may place the status field, and the “Reset” and “Submit” buttons. Please click

the field to open its properties on the right.

2. The following options are available:

- Item ID is a unique item number of the form. It’s not required for the item numbers to be put in order. It’s quite possible for the item with ID = 2 to go first. But it is significant for them to be unique and the number of items should correspond to the highest ID. For example, if you have four items, the IDs should be from 1 to 4.

- Name is a name of the form item, which is used for the validation error messages or is bound with a given field and its value on sending a message.

- Field is required and takes one of the two values “Yes” or “No” and defines if the input field is required or not by submitting the form. By default requires to be set to “No”.

- Text to show is the text that will be showing up on the initialization form (for the forms that do not have labels with a field name).

- Restrict indicates the set of characters that a user may enter into the text field. For example: my_txt.restrict = "A-Z 0-9"; or my_txt.restrict = "^a-z". If the value    of the restrict property is null, you can enter any character. If the value of the restrict property is an empty string, you can't enter any character. If the value of the restrict property is a string of characters, you can enter only characters in the string into the text field. If the string begins with ^, all characters are initially accepted and succeeding characters in the string are excluded from the set of accepted characters. If the string does not begin with ^, no characters are initially accepted and succeeding characters in the string are included in the set of accepted characters.

- Maximum length defines the maximum number of symbols allowed in the selected field.

- Display as password takes one of the two values ‘Yes’ or ‘No’ and defines whether the showed text to be displayed as a password (******) or not. By default requires to be set to “No”.

- Multiline - you may activate or deactivate the multiline function for the selected field.

3. Validator — a validator type:

- String Validator;
- Email Validator;
- Number Validator;
- Date Validator.
When using a validator, additional properties pertaining to a specific validator which can be used.

 

String Validator:
Minimum characters — minimum number of characters that is allowed for this field;
Regular expression — regular expression and the field value should match. It is used together with “Regular expression flags”.
Regular expression flags — regular expression options. It is used only if the “Regular expression” is present. The possible options are as follows:
g — global, defines whether the search should match all occurrences of the given pattern. If it is omitted, just the first occurrence should be matched;
i — caseInsensitive. If it is present, the case is disregarded;
m — multiline.

Email Validator:
Min letters after last point — minimum number of characters before the last dot;
Max letters after last point — maximum number of characters before the last dot;
Min letters before @ - minimum number of characters before '@';
Min letters before @ - maximum number of characters before '@'.

Number Validator:
Max value — maximum value;
Min value — minimum value;
Allow negative — defines whether you are allowed to enter a negative number.

Date Validator:
Mask - a mask, which the date should be validated with. By default it is mm/dd/yyyy. The dividers do not matter. If mm, dd or yyyy cannot be found, the default mask is used.

4. Beside the management of the form fields, the contact form module has its own settings. In order to get to the settings, please click the button “Configuration”. Here you may change the following settings:

 

 

- Email from source - ID of the input field to use for the “from: ” or “sender: ” label in your e-mail client.

- Email to - an e-mail address, which is used to receive messages from your contact form. You can specify several e-mail addresses, separating them with a comma. For example: first_email@domain.com, second_email@domain.com, third@domain.com.

- Form processing text - the text that your visitor sees while waiting until the processing is over.

- Message sent failed text - the text that is showed, if the form is not submitted because of a server error.

- Message sent text - the text that is showed to the user, when the form is submitted without any errors.

- Subject source - the subject of the e-mails that will be sent through this contact form.

- Plain text - set whether to send the message as a plain text (Yes) or as HTML (No).

- Validate required only - allows to set whether to validate only required fields (Yes/No). The default value is 'Yes', which means the fields of your contact form that are not required are not validated. For example, if the e-mail field of your form is set as not required (just as a example), the form will be processed even if the user types in an incorrect e-mail address.

5. The validation error messages show to the user, when the form fails to validate. The form supports different types of validators. Here you can change the text of the error messages that the validators produce. You can use the {LABEL} keyword in these messages. It will output the label value of the field where an error occurs.

Advanced Contact Form Widget

 

This Contact Form lets your visitors leave messages for you, without representing your personal email address.

 

This widget is an advanced version of simple Form Widget. The structure of the widget is the same except following features:

 

 

 

1. Drop-down list that allows user to choose some characteristics from the list filling the Form.

 

2. Check-box Item;

 

3. Radio-button;

 

4. File upload item allows user attach files to the message. This item has following characteristics:

 

• item id

• order in mail;

• tab order;

• name;

• text to show;

• allowed extensions.

• field is required (yes or no)

 

Also see our Video Tutorial about Advanced Contact Form widget here.