How to Create an HTML Email Form
Email forms allow visitors to your site to contact you without having to open up their email client. It's a good way to add a professional look to your site, and it doesn't have to be difficult at all. You can do it yourself from scratch, or, with the help of some websites, you can even have the code generated online.
Other People Are Reading
Instructions
-
-
1
Define the form action. In this line of code, you will want to have the email address where you want to send the form's information, the subject of the email sent, the way the information will be sent (method) and how it will be encoded (enctype). It will look like this:
<form action="mailto:youremail@yourdomain.com?subject=e-mail contact form subject" method="post" enctype="text/plain"> -
2
Write the name of your form field. "Name" or "Email" are some example names for form.
-
-
3
Create your form field, and define the length of your fields. Your next line of code will look like this:
Name: <INPUT NAME="Name" TYPE="text" SIZE="20" MAXLENGTH="30"><BR>
You will have to define the input name, the type of form, the size of the field and the maximum length of the field. The length is designated in characters. -
4
Create your different fields by changing your input names. To create a checkbox, you can change your input type to "checkbox." To create a radio button, change the input type to "radio."
-
5
Create a large paragraph field by defining a text area. This will allow readers to write a little more freely. To do this, you will need to add the following line of code:
<TEXTAREA NAME="othercomments" ROWS="5" COLS="25"></textarea> -
6
Create your form button with the following code:
Name of your field: <INPUT TYPE="SUBMIT" name="submit" Value="Submit form">. The value will be the text placed on the button itself. -
7
End your form with </form>. Your end code will look like this:
<form action="mailto:youremail@yourdomain.com?subject=e-mail contact form subject" method="post" enctype="text/plain">
Name: <INPUT NAME="Name" TYPE="text" SIZE="20" MAXLENGTH="30"><BR>
E-mail: <INPUT NAME="E-mail" TYPE="text" SIZE="20" MAXLENGTH="30"><BR>
Comments: <TEXTAREA NAME="othercomments" ROWS="5" COLS="25"></textarea><br>
<INPUT TYPE="SUBMIT" name="submit" Value="Submit form"><br>
</form>
This code will open up an email window on your user's screen with all of the information. They will submit it from their email window, and it will contain all of the information to you.
-
1
Tips & Warnings
Sites like myContactForm.com and HTML Basix (see Resources for links) will allow you to create a form to your specifications. Cut and paste the generated code into your .html file. It is possible to insert a form through Dreamweaver as well. Navigate to Insert > Form and add each individual form element you'd like to your file.
