The following is the first of a short series of tutorials concentrating on building and handling a contact form on your website. This, the first part, will concentrate on the HTML of the form. The second will cover the PHP handling and a third anf final tutorial will consider possible enhancements, enhancing security and other ways to expand the basic form.
First off then, we'll be creating the form itself. I will only cover the form here, as including anything else will just confuse matters. Every HTML form begins with a "form" tag. The form tag has a number of optional attributes, however the only required attribute is the "action" - which tells the form where to send the data entered when it has been submitted.
So, to start off our contact form:
| <form action="handle_contact.php"> |
This line indicates that when the form is submitted it will be sent to a php script called "handle_contact.php". I will cover the details of this script in part 2 so don't worry about that now. The method attribute is also relevant in our case, as this will determine how the form will send the data to the PHP script - and equally - how the PHP script will pick it up. Therefore we should ammend the code to look like this:
| <form action="handle_contact.php" method="post"> |
Right, now we've said a form is coming, so lets put some fields in it. In this example we will capture the visitor's name, company, email, telephone, fax, and supply them with space to enter a title and the text of their message. So, starting with the name, lets add an input box:
| <label for="name">Name:</label><br />
<input type="text" name="name" value="" size="20" /><br /> |
The above is an input field with a type of text - which tells it to be a text box. The name attribute will be used to get what has been entered later on in part 2. Value is left blank as the field is empty to begin with, and the size is the number of characters that will be displayed on the page. A label for the field has also been included in order to tell the user what is required to be entered into the box.
Now we have one text box in place, lets create the rest:
| <br />
<label for="company">Company:</label><br /> <input type="text" name="company" value="" size="20" /><br /> <br /> <label for="email">Email:</label><br /> <input type="text" name="email" value="" size="20" /><br /> <br /> <label for="telephone">Telephone:</label><br /> <input type="text" name="telephone" value="" size="20" /><br /> <br /> <label for="fax">Fax:</label><br /> <input type="text" name="fax" value="" size="20" /><br /> <br /> <label for="title">Title:</label><br /> <input type="text" name="title" value="" size="20" /><br /> |
Now we have all of our text boxes in place. You’ll see that I’ve included line breaks in order to keep things nice and neat on the page. Next we need a larger box for the actual message. For this we need a “textarea”.
| <textarea name="comments" rows="5" cols="20"></textarea> |
Above is a textarea field. With the attributes it has been given, this textarea will be 20 columns wide and 5 rows deep. This should be adequate, and if the user fills this area it will automatically scroll down to fit.
Now the form is almost complete, all that is needed now is a submit button that will send the information once its complete. This uses the input element again.
| <input type=”submit” value=”Send” /> |
This will display a submit button with the text “Send” on it. To finish off the form the form element must be terminated with its end tag:
| </form> |
This will display a page similar to this one here, and to make things a little easier here is the full code listing:
| <form action="handle_contact.php" method="post">
<label for="name">Name:</label><br /> <input type="text" name="name" value="" size="20" /><br /> <br /> <label for="company">Company:</label><br /> <input type="text" name="company" value="" size="20" /><br /> <br /> <label for="email">Email:</label><br /> <input type="text" name="email" value="" size="20" /><br /> <br /> <label for="telephone">Telephone:</label><br /> <input type="text" name="telephone" value="" size="20" /><br /> <br /> <label for="fax">Fax:</label><br /> <input type="text" name="fax" value="" size="20" /><br /> <br /> <label for="title">Title:</label><br /> <input type="text" name="title" value="" size="20" /><br /> <br /> <label for="comments">Comments:</label><br /> <textarea name="comments" rows="5" cols="20"></textarea><br /> <br /> <input type="submit" value="Send" /> </form> |
So there you have it, a nice simple form. In the next step we will look at checking the user has entered data in the boxes, and also the all important sending of the email.
Downloads
The scripts associated with this tutorial can be downloaded here.
