How to build your form?


After you click “Dashboard”, you will enter following interface.

How to design one simple and basic form?


On this page, you can build your form such as adding and editing fields & controls. You can also customize form appearance through “Form Style” editor.

This interface includes three sections. In the left panel, all fields and elements display and they can be added to the form. You only need to simply drag and drop them into the middle area. In the middle panel, it’s the form preview, where you can manipulate each of components. In the right panel, it’s a visual form style editor, where you can customize the appearance of your form. You can change background color, text color and the width of field title.

Next, we will give some directions on how to build one simple and basic form which is not multi-step & multi-column form.

How to add a field?

Building your form starts with adding fields, please follow steps below.

1.Please place your mouse over one field in the left panel and drag it to the middle area.
2.Please enter the middle area and there’s a box which will indicate where to put the field. Please see a sample below, you can put the field in the box.

3.Please drop the button once you place it where you need.

How to edit a field?

1.Please click pencil icon in each added field, then a window will pop up.
2.Please edit options according to your need.
3.Please click “Save”.

Options in each field will be slightly different, next we will explain them one by one.

Text box


Field Name: Please input a name for this field.

Field Type: You can choose one field type from dropdown list.

Width: You can define the width of textbox.

Max Length: You can specify how many characters a user can enter.

IsRequired: If you check this option, this field will be mandatory.

Validator: Please choose one validation method from dropdown list.

Place Holder: Please input text here, then it will display in the textbox. See an example below.

Help Text: Please input text here, then the text will display when your mouse hovers over the blue icon on the right of the field. Please see an example below.

Text Area


Height: You can define the height of box in which users can input text.

For explainations on other options, please refer to Text box above.

Checkbox


For explainations on options, please refer to Text box above.

Dropdown List


List Items: You can input items which will display in the list, separating each item by “enter” key.
See an example below.

Back-end

Front-end

For explainations on other options, please refer to Text box above.

Radio List


For explainations on options, please refer to dropdown list above.

Checkbox List


For explainations on options, please refer to dropdown list above.

Header


Text: Please input text here.

Paragraph


Text: Please input text here.

Listbox


For explainations on all options, please refer to dropdown list above.

DatePicker


Date Format: In default, the date format will be yyyy/mm/dd. You can also adjust the date format according to your need, such as mm/dd/yyyy.

Display Time: If you check this option, users can choose time in the front-end.
See below.

There are two slider bars. The top slider is for choosing hour and the bottom slider is for choosing minute.

For explainations on other options, please refer to Text box above.

Agree


Text: You can input the text for this field.

Upload


Allowed File Types: For security reason, admin can restrict only which formats of files are allowed to upload. If left blank, it means that there's no limit on the format of files. Here, you need to enter file extension, such as jpg|doc|xls

For explainations on other options, please refer to Text box above.

How to copy a field?

Please directly click the copy icon to copy a field, then duplicated field will appear on the right.

How to delete a field?

Please see the area #1. After clicking trash icon, this field/control will be deleted.
Please note, for the trash icon in area#2, it's for deleting the entire row and it will delete all controls/fields included in this row.

How to define form styles?

In form style section, you can change the look and feel of the form through changing background color, text color, control border color, control background color, control text color, button background color, button text color and the width of field title.

If you don't want to trouble yourself with matching colors, you can also use our ten kinds of predefined colors. Predefined color themes are popular and versatile and I believe they can match the overall appearance of your website.

Use Background Color: If you uncheck this option, then the form won’t have any background color.

Background Color: Please click the control, then it will appear one color picker and you can choose one background color according to your need.

Please note: This option will only be valid after you check option “Use Background Color”.

Text Color: Please click the control, then it will appear one color picker which allows you to change the color of all texts in the form.

Control Border Color: Please click the control, then it will apear one color picker which allows you to change the border color of all controls in the form. See below, we mark the border color.

Control Background Color: Please click the control, then it will apear one color picker which allows you to change the background color of all controls in the form. See the green part below, it’s the background color of controls.

Control Text Color: Please click the control, then it will apear one color picker which allows you to change the text color of all controls in the form. See the red part below, it’s the text color of controls.

Button Background Color: Please click the control, then it will apear one color picker which allows you to change the background color of the button in the form. See the pink part below, it’s the background color of the submit button.

Button Text Color: Please click the control, then it will apear one color picker which allows you to change the text color of the button in the form. See the black text below, it’s the text color of the submit button.

Label And Control Layout:
Through this option, you can determine the form will display horizontally or vertically.
In default, "Vertical" option will be checked. If you setup a multi-column form, we suggest checking "Vertical" option and it will display vertically. If you just need a simple and one column form, both horizontal and vertical options are ok.

Form Width(px): You can configure a width for your form. In default, it will be 700.

Field Title Width: You can define the width of field title according to your need.

Use Button Shadow: After checking this option, there will appear shadow effect on the submit button.

Predefined Colors: There are ten kinds of predefined color themes, you can apply one according to your need. When your mouse hovers over each item, it will appear one thumbnai and this can help you quickly select one color theme.

How to design one multi-step form?


Multi-step function will help you break large forms into managable steps for your users to complete with ease.

Regarding how to setup one multi-step form, please refer to following article.

http://www.dnnsmart.net/Support/Articles/tabid/222/ContentId/39/language/en-US/How-to-create-multi-step-forms-.aspx

How to design one multi-column layout form?


Multi-column function allows you to turn a long form into a multi-column layout form, which makes the page look shorter and more concise.

Regarding how to setup one multi-column form, please refer to following article.

http://www.dnnsmart.net/Support/Articles/tabid/222/ContentId/38/language/en-US/How-to-create-a-multi-column-layout-form-.aspx

Option Settings


On this page, you can do some basic settings for the form.

Clear Expired History: You can configure it automatically clears all submission history before how many days. Filling in zero means that it won't clear automatically.

File Upload Folder: When you use "Upload" control, you can specify the directory which the file will be uploaded into.

Upload As Email Attachments: If this option is checked, the file uploaded by the user will be sent to the email receiver as an email attachment.

For explainations on all options, please see below.

Send Admin Email: After checking this option, it will send an email to admin after users submitting the form.

Send Auto Reply Email: After checking this option, it will send an auto reply email to submitters after they submit the form successfully.

Email Receivers: It represents email receivers of the form, you can add Email addresses separating by a semicolon (;) here.

Email Sender: This is the email sender of the form, please input an email address. Email sender won’t receive any email, it only presents who sends emails to submitters. After the submitter gets an email and he clicks “Reply” button, Email sender will be filled as email receiver automatically.

Use Google reCAPTCHA: After checking this option, Google reCAPTCHA feature will be enabled.

Google reCAPTCHA Site Key: Please follow instructions to get one key and input it here.
You can refer to the link below to get the site key.
https://developers.google.com/recaptcha/intro
Please check the address below, where the key was generated.
http://www.google.com/recaptcha/admin

Templates


On this page, you can define templates for admin email, auto reply email and submission result.

Admin Email Template


Admin Email Subject: It’s the subject of the email which will be sent to admin.

Admin Email Content: It’s the template of the email which will be sent to admin, you can load default template or customize the template according to your need.

Please see a sample below, it’s an email which was sent to admin after a user submitted the form.

Auto Reply Template


Auto Reply Subject: It’s the subject of the auto reply email.

Auto Reply Template: It’s the template of the auto reply email, you can load default plain text or input the text according to your need.

Please see a sample below, it’s an auto reply email which was sent to the submitter.

Submission Result Template


It’s the template of submission result, you can load default plain text or input the text according to your need.

Please see a screenshot below, this interface displayed after users submitted the form.