How to Use Forms in HTML Email

Forms are a way to get responses quickly from your email subscribers without them having to hit the reply button. Email marketing is one of the most important aspects of online business. As many business owners have already discovered, email is an inexpensive marketing tactic that has great results. With email, you can get personal with your customers and offer special deals that will entice them to return to your service or purchase additional products. Using forms in HTML emails requires you to only enter a few lines of code.

Instructions

1. Open your HTML editor. There are a number of HTML editor programs available online including HTML Kit and Notepad ++. HTML editors will allow you to easily create the code you need to include a form in your HTML email, and will also let you check the code to ensure it is correct.

2. Create the form opening and closing tags. Forms are the area in which the information you require will be entered. For this example we will create a form that is sent to your email. The first step of the code will look like this:

   <form method="post" action="mailto:[e-mail]">
   ***this is where the inputs will go***
   </form>

3. Create text fields inside your form. Text fields are areas where the email recipient can enter their information. Text fields usually include name, address and possibly phone number. We use the break command <br /> to place the next input below the first. This is how you enter text fields in your form:

   <form method="post" action="mailto:[e-mail]">
   First Name: <input type="text" name="firstname"><br />
   Last Name: <input type="text" name="lastname">
   </form>

4. Create a text area for your form. Text areas in an HTML form allow recipients to enter questions and comments into your form. You can add as many rows (the text area height) and cols (the text area width) as needed for your form. The wrap value of "physical" means that when the comments are typed they will appear to you as they are in the text area box and not one consistent line in your email. This is how you create a text area in your form:

   <form method="post" action="mailto:[e-mail]">
   First Name: <input type="text" name="firstname"><br />
   Last Name: <input type="text" name="lastname"><br />
   <textarea rows="5" cols="25" wrap="physical" name="comments">
   Enter Comments Here
   </textarea><br />
   </form>

5. Create a submit button. The submit button allows your recipient to send you their information with a click of the mouse. Your submit button can say anything you wish by placing the text in the value area of the code. We will leave it as "Submit."

   <form method="post" action="mailto:[e-mail]">
   First Name: <input type="text" name="firstname"><br />
   Last Name: <input type="text" name="lastname"><br />
   <textarea rows="5" cols="25" wrap="physical" name="comments">
   Enter Comments Here
   </textarea><br />
   <input type="submit" value="Submit">
   </form>

6. Place the form in the body of your HTML email where it is needed. Depending on the size of your email you may want to place the form code closer to the top so your recipients can see it when the email is first opened.

Tips & Warnings

• You can also add drop down boxes, radio buttons and HTML check boxes to meet the needs of your form.

• Forms are not well liked by email clients and may not always work.

References

• HTML Kit
• Notepad ++: About Notepad ++
• W3Schools.com: HTML Forms & Inputs

Resources

• Do forms work in HTML email?
• W3C Schools