 |
|
|
 |
 
|
 How to Make a Simple Email FormHome > Build > Programming > HTML by Aaron West This is one of the most frequently asked questions I receive. Many people just want to add a simple form that sends a piece of email, without having to learn endless code that will never be used. If you're one of these people, this tutorial is for you. You can follow the instructions in this tutorial, or cut and paste the code provided at the end into your site. The <FORM> tag For the form to do what you want, you must define it correctly within the <FORM> container tag. Here is a sample of how the code should be written: <FORM ACTION="mailto:you@youraddress.com" METHOD="POST" enctype="text/html"> The action field is what the form should do when submitted. Since this will be sent to an email address, all you need is the mailto action followed by the address. The enctype is how the information should be encoded. If you want to be able to read the information clearly within your mail client, you should make sure this is set to "text/plain". Otherwise it will come out as one long line. Next you'll need to make some text fields. For most of these you'll use the <INPUT> tag. Here is an example: <INPUT TYPE="text" NAME="fieldname" SIZE="15"> The type determines what type of INPUT this will be. In this case it will be a single line text field. The name of the field is how it will be labeled in your mailbox. The size is the width of the field in characters. You may wish to give the user more than one line. For this you would use the <TEXTAREA> tag. Here is an example: <TEXTAREA NAME="comment" COLS="25" ROWS="3"> The name is how the field will be labeled in your mailbox. The COLS attribute is the character width of the field. The ROWS attribute is the number of lines in the field. The ROWS attribute can be left off if you only need 2 lines. Now we will want to make some buttons to submit the form. These are also created with the <INPUT> tag. A submit button would look like this: <INPUT TYPE="submit" NAME="Submit" VALUE="Submit"> Make sure the TYPE is set to 'submit'. This can also be "reset" if you would like a button that resets the form. The name is how this will show up in your mailbox. The Value is how the button will read on the screen. For example, you could label it "Click It" or "Send It". Once you have completed these steps, close off the FORM with a </FORM> and you are all set to go. When someone fills out the form, it will appear like this in your email: name=Aaron See a sample of the code in the box below. Note: This form was positioned within a table in order to align the information better. If you would like to learn Tables, please see the Tables Tutorial. You are more than welcome to cut the code out of this box and paste it into your design. Just make sure you change the email address in the <FORM> tag.
Here is how the form will appear:
|
||||||||||||||||
|
