Scroll

Widgets - Menus and Contact Form

1. Widgets - Menus
2. Widgets - Contact Forms

1. Widgets - Menus

Menu is a widget that will help you to create and edit the Main menu of your website, add or remove menu items. There are two types of menu widgets available for Moto CMS HTML templates: Horizontal Menu and Vertical Menu. 
Menu1.png

Basically, both these two widgets are similar. The only difference is position of menu items. In all other aspects these two types of menus are identical.
menu2.png

Like any other widget, Main menu has its custom properties displayed on the right panel, when the widget is selected.Here you can edit menu item's text settings (change text font, color, size, etc), customize your menu style and sub menu style (buttons color, buttons hover mode color, size, etc).
menu3.png

By clicking the Edit Widget button, the widget's edit mode control panel will be opened where all the menu and submenu items will be displayed. You can add, delete or rename any of them.
greenshot_2013-05-22_21-09-04.png

“Maximum number of items” and “Maximum depth of subitems” - these values refer to the number of menu items and the number of levels of the sub menu items. For example on the screenshot there are:
menu5.png
That means, you can create unlimited number of items and two levels of sub items. Please note: this also means that on each subitem level you are able to create unlimited number of items.
greenshot_2013-05-22_21-53-33.png

Here you can see an example of how it may look like on the web site:
greenshot_2013-05-22_22-07-15.png

 

2. Widgets - Contact Forms

Contact_Form1.png

“Contact 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 starting with the simple three-field contact forms and up to registration forms with a large number of fields.

Like all other Moto CMS widgets, the Contact Form Widget has its own custom properties displayed on the right panel, when the module is selected. Here you can edit appearance of contact form.

forms1.png

In the Edit Widget mode will be opened a control panel that displays all the fields of the Contact Form. A built-in WYSIWYG Editor allows you to change the parameters of the existing fields, add or delete them. Here you may place the status field, and “Clear” and “Send” buttons, place radio-buttons if necessary and add Check-boxes.
forms2.png

The following options are available:
form3.png

- Item ID is a unique number of each Contact Form's item that is set automatically.

- Name is a title of the item.

- Field is required,  “Yes” or “No” - defines if the input field is required or not for submitting of the form. By default this value is set to “No”.

- Text to show is the text that will be showing up on the initialization form.

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

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

- Display as password defines whether the shown text to be displayed as a password (******) or not. By default this value is set to “No”.

- Validator — a validator type:

- String Validator;
- Email Validator;
- Number Validator;
- Date Validator.
form4.png

When you are using a validator, additional properties pertaining to a specific validator will appear.

1. String Validator

Minimum characters — minimum number of characters that are 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. They are used only if the “Regular expression” is present.

forms5.png

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

forms6.png

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

forms7.png

4. 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 will be used.

forms8.png

Configuration”

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”:
formconfig1.png

formconfig2.png

Here you may change the following settings:

- Email from source - Item ID of the Contact Form field to be used for the “from” or “sender” label in the e-mail you will receive.

- Email to - an e-mail address, which is used for receiving messages sent from your contact form. You can specify several e-mail addresses, separating them with a comma. For example: first_email@domain.comsecond_email@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 will be shown, if for some reason the email will not be submitted.

- Message sent text - the text that is shown when the email is sent without any errors.

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

- Plain text - choose if the message should be sent as a plain text (Yes) or as HTML (No).

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

SMTP - you can set SMTP server for contact form.
SMTP.png

The validation error messages are shown to users, 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.
formconfig3.png

Have more questions? Submit a request

Comments