Want to create your own customized form for your newly created website? Let’s understand working of forms by creating simple contact us form.

In this example, I want to create one simple contact form which includes Name, Email, Phone, Subject and Message. All you need is Forms and List Module and its configuration.

Let’s get started!

First of all, all you need is to login into your site.

Please enter your site’s credential to get log in.

Go to your desired page you wish to add form. Here, I want to add form on contact us page. So I am moving to Contact Us page and enable edit mode.

After entering into edit mode follow the following steps:

1. To add Forms and List Module, go to module setting bar as below.

2. Search Form and List Module from module list and drag it to your desired pane.

Now you need to configure your module.

Before it’s configuration, figure out which fields do you want to include in your form.

Here I want to include 5 fields which are Name, Email, Phone, Subject and Message.

Now, it’s time to configure it.

Click on the configuration button.

After clicking on the configuration button you will get to see one window as follow.

You need to click on the Add New Columns Button in order to create new fields of your form.

Let’s add our first field named “Name”.

Click on Add New Column Button.

After clicking on Add Button, you will display a bunch of options.

1. Type: In the type field, you are given ample of options to choose. Select an appropriate type for your field. Here, we want to create a field named “Name”. So text type will be appropriate.

2. Title: Give your field title. In our case, the title name will be Name.

3. Help Text: This is an optional field. If you want to guide your user which content should go in the particular field. You can add short instruction to the help text.

4. Default Value: You can add any value while your form loads. This is an optional field.

Ex: Here I want to display default name “Anna Sthesia” whenever my form gets loaded.

5. Required: In simple terms, the Required field is the field that user have to have to fill it. It cannot be left blank. This field is also an optional one to configure. This is up to you whether you want to make it required field or not.

6. Validation rule: Many times, what happens is, the user adds the wrong data in the form. To prevent such cases, DNN Forms and List module provides a validation rule field. This is the field where you can define your criteria for the specific field.

Ex: One can set validation rule for valid telephone number, valid email address, only integer values are allowed etc.

7. Validation Message: When a user tries to enter wrong data as per the validation rule that we have set in the Validation Rule field, the content we enter in this field will display to the user.

Ex: Please enter valid email address, only integer values are allowed, please enter valid telephone number etc.

8. CSS style: You can give your own style to the specific field of the form.

After all the steps, click on the Save button. There you go, you have created the first field of your very first form successfully.

Likewise, I am adding my rest of the fields of the forms.

i.e: Email, Phone, Subject and Message.

Please select relevant type for the fields.

Here are the values I have set for the rest of the fields.

Email Field:

Contact Number field:

In the forms and list module, there is no such field for the telephone number. So, here I have taken type “text” and added a validation rule to validate the mobile number. This will prevent the user to enter false data.

Entered Validation Rule for valid contact number is:

^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})(?: *x(\d+))?\s*$

Subject field: Subject field’s configuration is same as the Name field. Please do take reference of name field and create subject field.

Message filed:

By performing above steps, we have created our first contact us form. But this is not the end.

Now, Go to again on your page. Go to edit option. Select Forms and List configuration.

After opting Forms and list configuration, you will display following page.

Once you entered into the Page Related Settings, please select Form option as below:

After selecting the Form option, you will get to see an instruction saying “Please apply also "Create Record/Submit Form" permissions in Module Settings!”

What does that mean?

Well, Don’t get panic! Just click on Save Configuration and Return Button.

By clicking on Save Configuration and Return Button again you are redirected to the main edit page. Go to module settings of your module and select settings option as following

Now, Select permissions tab out there. Search for all users and make sure that checkbox of Create Record/Submit Form is checked. Update it.

By enabling Create Records/Submit Forms option, we are letting every user to submit their data through form.

How site admin can see recorded/submitted data of the form?

We have created a form to gather data from all users who have been using this site. Right? So it is very necessary to display all the data that our users have submitted through the form. So where this all data goes might be a crucial question for every admin of the site.

Relax Admin, not to worry at all!!

Again login to your site and go to edit mode of the page where you have created your form.

Clicking on Show Records Button, you will display all the data that your user has submitted through the form. See, how simple it is!

What if admin wants to change the default styling of form?

To cop up with your existing site design, sometimes it is necessary to change the styling of your form module. A question may arise, where to update/override CSS for forms?

Here is the solution!

When you create your form using Forms and List Module, DNN will create one folder named “UserDefined Table” in the DesktopModules folder.

You can find this folder on the following path:

You can update/override CSS in module.css file.