Forms may seem like a really tricky part of HTML, but you will find that it can be a simple matter to create a useful feedback form for your website. You don't need to know CGI or programming to do it.
Tools For Building an HTML Form
- a text editor
You can use your favorite HTML editor, but it should be able to manipulate form items and attributes. - a web host to place your feedback form on
- an email address to receive the feedback
- 30 minutes of free time
Steps to Build an HTML Form
- Open your text editor to create a blank page
- Build the main page container elements
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Feedback Form</title>
</head>
<body> - Give your page a heading.
<h1>Feedback Form</h1> - Start your form. Your
FORMelement will have a some special attributes:action="mailto:your email address"
This will send the form results to your email address (be sure to change it to your personal address)method="get"
This sends it all as one request to the mail program (thepostmethod has some unusual results in most browsers)enctype="text/plain"
This makes the results readable in your email box
<form action="mailto:your email address" method="get" enctype="text/plain"> - Add the questions to your form. My feedback form will have 3 questions: name, rating, and comments.
<p>
Name: <input type="text" id="name" size="30">
</p>
<p>
Please rate my site from 1 to 10 (1= bad and 10= good): <br />
<select id="rating"><br />
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option selected>10</option>
</select>
</p>
<p>
How would you suggest I improve it?<br />
<textarea id="improve" rows="5" cols="30"></textarea>
</p>
<p>
<input type="submit" value="Send Feedback"> <input type="reset">
</p> - Don't forget to close your form:
</form> - Put the final closing HTML tags on your web page:
</body>
</html> - Save the page as
feedback-form.html - Upload your form to your website.
- Validate your HTML to make sure that you haven't made any typos or other errors.
- Link to your form.
Congratulations! You now have a working feedback form on your site! You can see this form in action, or just view the HTML for the form on the next page.
