WIMPLE Contact Form

Site admin creates a form, sets basic properties, and chooses the preferred mail settings.

Blank form layout (in the right pane) before starting to define its field(s).

Add the first field (type 'Radio Button') and set its properties in the left pane.

Upon adding the field, see immediate update in form layout in the right pane.

Add the second field 'Name' (type 'Single-line Text') and set its properties.

'Name' field is made mandatory and placed on the second row.

Add the third field 'Phone Number' (type 'Single-line Text') with the 'Numeric Only' option.

'Phone number' is added on the third row with 33% width.

Add the field 'Profession' (type 'Dropdown List') with its properties, including the permitted options separated by '|'.

'Profession' with 33% width is placed to the right of 'Phone Number' on the third row.

Add 'Email' field (type 'Single-line Text') with its properties, including the 'Email Validation' option (will accept only valid email format input).

The 'Email' field is placed on the fourth row.

Add the 'Question' field (type 'Multi-line Text') with maximum 500 characters and place it on a new row.

After adding 'Question', the latest form layout is shown in the right pane.

Add a 'Checkbox' type field in a new (sixth) row.

In the right pane, the checkbox field appears at the bottom of the form.

Add 'Date of birth'(type 'Date') field, placed in between 'Phone number' and 'Profession' on the third row.

'Date of birth' field is seen in between 'Phone number' and 'Profession' fields with a calendar date picker.

Adding 'reCAPTCHA' type field on a new row.

The 'reCAPTCHA' field appears below the 'Checkbox' type field.

Add a 'Note' type field (with rich text editor) to display any important information / notification.

A formatted text (read-only) is now placed on the last row of the form.

Use 'Edit' mode (hover mouse over field in right pane and click 'Edit' ) to change 'Name' field width from 100% to 50%.

The 'Name' field now takes half of its original width.

Edit the 'Email' field to put it to the right of 'Name' with 50% width.

The 'Email' field is now placed after 'Name' on the same (second) row.

In the right pane, hovering mouse over a row of field(s) shows 'Edit' and 'Delete' icons; an entire row can be deleted via the 'Delete' icon.

View the newly-created form (depending on existing page layout) as it will appear to the frontend user.