Get Email Feedback

In this tutorial we are going to create a form which will allow people to email you from your website. Lots of sites have forms like these called 'comment' or 'contact us' forms.

Go Berserk has one here.

Let's make one.

1. First we'll make the form with <form> tags, like this:
   

   <form>
   </form>
   		

   
   If you save the code and open the page in a browser, you won't see anything because we haven't put anything into the form yet.
   
   
2. Let's add in a box to put the user's comments into:
   

   <form">
   	Comment:<br />
   	<textarea name="comment" rows="15" cols="30" >
   Please type your comments here
   	</textarea>
   </form>
   		

   
   This makes a box using the <textarea /> tags.
   • We've called the box "comment", using name="comment". We'll use the name later on.
   • We're going to make the box 30 columns (or characters) wide using cols="30", and 15 rows (or lines) high using rows="15"
   • We've added some text into the box already, to tell the user what to do: Please type your comments here.
   
   
   
3. Save the code and open the page in a browser
   You'll see this:
   
   Comment
   Please type your comments here
   
   
   
4. Now let's add a button to send the comments using the <input /> tag, like this:

   <form>
   	Comment:<br />
   	<textarea name="comment" rows="15" cols="30" >
   		Please type your comments here
   	</textarea><br />
   	<input type="submit" value="Send" />
   </form>
   		

   
   This will make a button (type="submit") to send (value="Send") the comments.
   
   
5. save the code and open the page in a browser
   You'll see this:
   
   Comment
   Please type your comments here
   
   
   Unfortunately, nothing will happen if you click the Send button, because we haven't told the code where to send the comments to yet.
   
   
6. Now let's say where to send the comments to, like this:

   <form  action="mailto:dog@go-berserk.com" method="post" enctype="text/plain">
   	Comment:<br />
   	<textarea name="comment" rows="15" cols="30" >
   		Please type your comments here
   	</textarea><br />
   	<input type="submit" value="Send" />
   </form>
   		

   
   This will send (action="mailto:) the comments to dog@go-berserk.com. It will also make sure the comments are sent:
   • as text (enctype="text/plain")
   • and that they are sent safely, without showing the details on the webpage (method="post")
   
   
   
7. save the code and open the page in a browser
   You'll see this:
   
   Comment
   Please type your comments here
   
   
   You should change the email address to an email that you want to send the comments to.
   
   If you click on the submit button now, the page will send the message to dog@go-berserk.com using whatever email account has been set up on your computer.
   If you don't have an email account set up on your computer, then the email program will open and ask you to set up an account.
   
   
8. Let's add some more details (using more <input> tags), like the name of the user making the comments:
   

   <form action="mailto:dog@go-berserk.com" method="post" enctype="text/plain">
   	 Name:<br />
   <input type="text" name="name" size="35" value="Please type your name here"><br />
   	Comment:<br />
   	<textarea name="comment" rows="15" cols="30" >
   		Please type your comments here
   	</textarea><br />
   	<input type="submit" value="Send" />
   </form>
   		

   
   This will make a one-line text box (type="text") with a name of "name" (name="name") and will be 35 characters wide (size="35"). The text box will also have "Please type your name here" inside it (value="Please type your name here"), but you can write over that.
   
   If you save the page now and refresh it, you'll see the name box.
   If you click the Send button, you'll see the name appear in the email.
   
   
9. Let's add the email details of the person sending the comments (using more <input type="text"> tags):
   

   <form action="mailto:dog@go-berserk.com" method="post" enctype="text/plain">
   	 Name:<br />
   <input type="text" name="name" size="35" value="Please type your name here"><br />
   	 Email:<br />
   <input type="text" name="mail" size="35" value="Please type your email here"><br />
   	Comment:<br />
   	<textarea name="comment" rows="15" cols="30" >
   		Please type your comments here
   	</textarea><br />
   	<input type="submit" value="Send" />
   </form>
   		

   
   This will make another one-line text box (type="text") with a name of "mail" (name="name"). The text box will also have "Please type your email here" inside it (value="Please type your email here").
   
   If you save the page now and refresh it, you'll see the email box, and if you click the Send button, you'll see the email address appear in the email.
   
   Name
   
   Email
   
   Comment
   Please type your comments here
   
   
   

more tutorials to try

you might like to try these tutorials too:

• how to write text backwards