Contact Form

by Luky March 3rd 2009, 1:10 pm

Make a Contact Form For Your Forum

This tutorial will show you how to add, on a distinct HTML page, a form that anyone can write in and that will be sent to an e-mail address of your choice.

First you need to create a new HTML page so go to;
Administration panel => Modules => HTML => HTML pages management.
Click on the

button.

On the next page choose any Title for your page. Choose Yes from the "Do you wish to use your forum page header and page
footer ?" option if you want to match the design of the new page with the one your forum has. Choose No if you want to
change other things about it as well such as Alignment, color, text effects etc.

At the "Use this page as homepage ?" option choose No.
In the "Html source" field add this code to start with:

Code:: <form action="mailto:your_e-mail_address@domain.com" method="post" enctype="text/plain">

Replace "your_e-mail_address@domain.com" with the e-mail address where you want the form to be sent.

Now after that first piece of code you can add as many fields as you want for your form and I will give you a few examples:

For a simple input field add this code:

Code:: First Name:<br> <input type="text" name="name">

and the result will be this:

Of course you can replace "First Name" with any message that you want.

You can also set a default value for the field which means a preset text that will appear in the field.Note that users can remove the preselected text.To do this you need to add this code:

Code:: First Name:<br> <input type="text" value="Type your First Name" name="name">

and the result will be:

To change the text simply edit the Type your First Name message and add whatever you wish.

Radio Type forms

You can also add other type of fields such as Radio Type forms.

Radio Type forms are forms where the user can choose only one out of more options.

A simple code for this is:

Code:: Your Gender:<br> Male:<input type="radio" name="Sex" value="male"> <br> Female:<input type="radio" name="Sex" value="female">

and the result is:

Checkboxes Type forms

Another type of forms are checkboxes. These are similar with the radio type forms with just one major difference: While on the Radio type forms you can only choose one out of the available options, in the checkbox type forms you can choose as many options as you wish, even all of them.

To create such a type of form use this code:

Code:: Which is your favorite color?<br> I like red<input type="checkbox" name="color" value="Red"><br> I like blue<input type="checkbox" name="color" value="Blue"><br> I like yellow<input type="checkbox" name="color" value="Yellow"><br> I like green<input type="checkbox" name="color" value="Green">

And the result will be:

Drop down box

You can also add Drop Down boxes from where your users will be able to choose one option from a multiple number of options. For this use this code:

Code:: Your favorite color is ? <select name="color"> <option value="Red">Red</option> <option value="Blue">Blue</option> <option value="Yellow">Yellow</option> <option value="Green">Green</option> </select>

The result will be:

Large field for text

You can also add large fields of texts to allow your members to comment or give there opinion about something.

For this use this code:

Code:: Comments:<br><textarea name="comments" rows="6" cols="65"></textarea>

The result will be :

You can change the number of rows and cols to alter the number of characters members can type.

Additionally you can add all the forms or just the one's you want in a table for a better look or for separating them into categories.For this, simply add this code before you add the codes for a form:

Code:: <legend>Personal Info </legend>

So to sum up if you use this code:

Code:: <form action="mailto:your_e-mail_address@domain.com" method="post" enctype="text/plain"> <legend>Personal info</legend> Name:<br> <input type="text" name="name"> <br> Mail:<br> <input type="text" name="mail"> <br><br> Which is your favorite color?<br> I like red<input type="checkbox" name="color" value="Red"><br> I like blue<input type="checkbox" name="color" value="Blue"><br> I like yellow<input type="checkbox" name="color" value="Yellow"><br> I like green<input type="checkbox" name="color" value="Green"> <br><br>Comments:<br><textarea name="comments" rows="6" cols="65"></textarea> </form>

The result will be:

Whatever form/forms you choose for your page you will need to add a submit button. For this add the following code:

Code:: <input type="submit" value="Send">

You can also additionally add a reset button so that when members press it all the fields will go back to there default
values. For this add this code:

Code:: <input type="reset" value="Reset">

It will look like this:

You can change the value Send and Reset to anything you like.

That's all.