HTML Contact Form

This tutorial shows how you can make a contact form. I'm making it as simple as possible so I am using text fields for all. Some people like to use combobox for subject so they can sort out mails that need to be sent on different e-mails.

Form tags:

These are form tags. In those goes form fields. About the parameters, there are 3 parameters what you can see action, method and id. Action tags mark the destination of form, method can be get or post and id marks the form(id is optional for this tutorial).

Source code viewer
<form action="url/of/your/php/script" method="post" id="contact_us"></form>
Programming Language: HTML

Form fields:

We are going to make 4 form fields name, senders e-mail, subject and message. We are using label tags for labels and input tags for form elements. Label is label for input. You can assign certain label to certain input by using labels for attribute and inputs name attribute. Inputs parameter type sets the type of input, we use text-boxes only. Value field is for value, you can fill values with strings when form is submitted and errors occurred, so clients data won't get lost. Size parameter controls length of text-box. By name attribute you later can catch data from POST.

Source code viewer
<label for="name">Name: </label>
<input type="text" name="name" value="" size="50" />
Programming Language: HTML

Source code viewer
<form action="url/of/your/php/script" method="post" id="contact_us">
  <label for="name">Name: </label><br><input type="text" name="name" value="" size="50" /><br /><br />
  <label for="email">Email Address: </label><br><input type="text" name="email" value="" size="50" /><br /><br />
  <label for="subject">Subject: </label><br><input type="text" name="subject" value="" size="50" /><br /><br />
  <label for="message">Message: </label><br><textarea name="message" cols="39" rows="6"></textarea><br /><br />
  <input type="submit" />
</form>
Programming Language: HTML

Next part of the tutorial: Popup Contact Form