Learn how to create your own website using HTML and CSS

Creating a Contact page

For a real website it is often desirable to have a means through which someone can contact you. This could be as simple as a page with your number or address if you want that information publicly known.

HTML also allows you the ability to create forms and display them on your website. There is basically only 2 things you can do with the form once you have it on your site. You can have the information in the form emailed to you, which will result in a very primitive email with key/value pairs for each input on the form. Or you can process the form with a server side scripting language, such as PHP. If you are feeling adventurous and/or curious after this tutorial, feel free to check out our PHP articles for a lesson on form processing.

So lets start creating our contact page. Open your "template.html" file and re-save it as "contact.html". You should now be able to click all the links in the navigation menu (excluding the "About Me" link) and go to those pages. How Exciting! The contact page is of course blank except for our template content.

Add the following content inside of your "contentWrapper" div.

There you see your heading enticing people to contact you. Then we have a paragraph with instructions, never overestimate your average web surfer. After that is where the meat and potatoes of the form comes in.

Here we have used the <form> tag to create a form element with an "id" attribute of "contactForm". Required attributes for form elements are "action" and "method". The action attribute tells the browser what to do with the form, i.e. what action to take. This will normally be the url of a server side script that will process the form. In this case we are just telling the users browser to send the information to our email using the computers default email client.

The method attribute tells the browser how to carry out that action. There are 2 possible values for the method attribute, "post" and "get". Post will most commonly be used as it is better suited for sending large amounts of data and imbeds it in the HTTP request. When you set the method attribute to "get", the information in the form will be appended to the url of the requested page. This is better suited to requesting something than sending something.

Next inside the form element is the "fieldset" element. Fieldset is used to group form elements together and could be omitted, but its more proper to include it.

Within the fieldset we have 3 divs with class attributes of "formRow". We gave them class names instead of id names because there is more than one element we want to define with the same style on this page.

In the first 2 "formRow" divs we have 2 elements. The "label" element is used to add a label to our form input. It should have the "for" attribute that describes which form input element the label is for.

After the label is the input element. This is another one of those tags that uses an ending slash instead of a separate closing tag. The "type" attribute is used to decide what type the input should be. Some of the possible choices are: text, password, checkbox, radio, image, file, hidden, submit and reset. The "name" attribute is also required, as it is used as a container for the information that the user enters into it. So for example when someone enters there email in the input with "name" attribute "email", whenever the form is submitted, their email information will be sent in a container named email, or whatever you named that input.

Inputs of text type are great for short,single line entries. But for gathering more information we need a text area. The third "formRow" div displays this. A textarea element uses the traditional open/close tags. They also require the "name" attribute. You can also specify the "rows" and "cols" to tell how wide and tall you want it to be. You can also do this with CSS.

Finally we have another div element that has a class name of "submit". I chose that because it is going to hold our submit element, pretty creative huh? The "input" element inside this div has a "type" attribute of "submit" which informs the browser we want to display a submit button. The "value" attribute tells the browser what we want the button to have written on it.

Save the "contact.html" file and view it in your browser. There is the form. Now here are some styles I made up to go with it and let you see what you can do with it. I think you can try to figure them out by now.