• Usage

• Form Settings

  • General
  • Form Control Styles

• Form Controls

  • Input
  • Checkbox
  • RadioButton
  • TextArea
  • Select

A new Themler control that allows to build Forms:

The Form is intended to transfer data between the user and the server.
Let's look at an example of the most used form - Contact us form.
The Form consists of html part and server script.
HTML part of the form usually includes fields for filling in name, email and type of comment. Once the visitors of your website have filled out the contact form fields, they will click the Submit button to submit the information. To send the information you need a server script that will actually grab the data from the fields, compose into a message and send to your email.

Usage

1. Add Form control available under the Insert Tab >> More.

2. Add form controls using "Add Control" option on the Ribbon:
   

   

3. Add Submit button available under the Insert Tab:
   

   

4. Enable Button submit option:
   

   
   
   Not the Button will submit the form on click.

5. Configure Form and Form Controls (see below)

6. Since Themler does not provide server scripts for forms you will need to find ready script(PHP, for example) in the internet and upload it to your server.
   NOTE: In order to use PHP scripts your server should be able to execute PHP. In Addition to this you should configure your server to send emails.

Form Settings

General

Name - is the name of the Form.

Action - The action attribute defines the action to be performed when the form is submitted. Here you should specify the path to the server script which defines where to send the form-data when the contact form is submitted.

Method - is the HTTP method to use when sending form-data: POST/GET.

Mode - the layout of the form: DEFAULT/INLINE/GRID

Form Control Styles

By default Form Controls use default styles (Design Tab >> More). In Addition to this you can configure the styles of the controls on a separate form.

Label - the styles of the Label control for all form controls.
Input - the styles of the Input, Textarea and Select fields.
Checkbox and RadioButton - the styles of the Checkboxes and RadioButtons (including labels)

Form Controls

Form Controls are blocks that include label and form control fields, for example, input field and label.

Therefore all shape settings available under the Form Control's popup are applied to the whole block.

Input

The most important form element.

Type - The Type of the Input field. Input can vary in many ways, depending on the type attribute: Text, email, password, etc. Specifies title attribute.
ID - is the unique identifier of the field.
Name - is the name of the field.
Value - the option to specify field'svalue attribute.
For example, for "text", "password", and "hidden" types of Input - it defines the initial text entered in the field.
Placeholder - the option to specify field's placeholder attribute - a short hint that describes the expected value of an input element.
Maximum Length - specify how many characters can be typed in the field.
Text - the option tp specify a text of the input Label.

Checkbox

Checkbox is an Input element with type "checkbox". It uses bd-bootstrapcheckbox class.

Name - is the name of the field.
List of Values - specify a semicolon separated list of checkbox values and options.
One Option: value1;Option 1;
Multiple Options: value1;Option 1;value2;Option 2;

Inline - enable to change checkbox list layout to inline:

Text - the option to specify a text of the element's Label.

RadioButton

Checkbox is an Input element with type "radio". It uses bd-bootstrapradiobutton class.

Name - is the name of the field.
List of Values - specify a semicolon separated list of checkbox values and options.
Similar to the corresponding checkbox option (see above).

Inline - enable to change RadioButton list layout to inline:
Similar to the corresponding checkbox option (see above).

Text - the option to specify a text of the element's Label.

Select

The Select element is used to create a drop-down list.

ID - is the unique identifier of the field.
Name - is the name of the field.
Multiple - enable to select multiple options at once:

List of Values - specify a semicolon separated list of checkbox values and options.
Currently Themler does not support inserting of "disabled" options.

Text - the option to specify a text of the element's Label.

Textarea

The Textarea control is used to create a multi-line text input.

ID - is the unique identifier of the field.
Name - is the name of the field.
Placeholder - the option to specify field's placeholder attribute - a short hint that describes the expected value of an input element.
Text - the option to specify a text of the element's Label.

See Also

Simple HTML Contact Form Example