Creating a Contact Form-w/pictures!
Posted by Lindsayanng on February 16th, 2009I have ALWAYS struggled with creating a contact form, mainly because there are very few good tutorials out there on how to do it.
Well, I finally found a good tutorial on how to make a contact form that WORKS. Now, you have to have dreamweaver if you want to follow this tutorial step by step. If you do not have dreamweaver, you can still use this!!! Just download the file and put it into your website’s folder and skip to the bottom where I have the complete code, copy and paste and change the proper fields to match what you need. If you are confused about what the fields are for, the rest of the tutorial will help you.
The first thing you have to do is download this file:
And then unzip it to reveal the FormToEmail.php file. Then you have to move that file to your website’s root folder.
Then you open Dreamweaver and you can either create a new page, or open an existing page that you want to add the contact form to. You should probably view your page in split view so you can see what is happening and make sure things are clean.
Now go to the top menu bar and click INSERT and then FORM and then choose FORM from the top of the flyout menu. It will show you this window:
You will then choose browse for the ACTION and browse to the formtoemail.php file that you just downloaded and put in your website’s folder. You will choose post as your action. You can leave the encoding type blank, and you can choose a name if you would like, something like “quote request” or “product information” You can leave the target blank. You will see code that looks like this:
<form action="formtoemail.php" method="get"></form>
You will want to put your cursor between the >< and click enter a few times to put some space between the opening and closing <form></form> tags.
Now you will go back to Insert and then Form and Label The label is exactly what it sounds like. It is the label for that particular field. You you will write “name” and that will label the field where your visitor will enter their name or “email” for the form where you want them to write their email address. When you insert the label code you will see this:
<label></label>
You will again put your cursor inbetween the <label></label> tags and type your label there like “name” or “email”
From there you will again go to INSERT and then FORM and then choose TextField. The “TextField” is the actual place where the visitor will enter their name, email, or other information. You will see this box pop up.
You will now put the name of that field in there like “name” or “email”. The value is some text that will be pre filled for the visitor, you can leave this blank. You will then put the size in pixels for the form field. Usually 50px is a good size, and the maximum number of charactors that you would like to put for that field. Click OK and you will see this code:
<input name="name" type="text" size="50px" maxlength="35" />
You have now completed the coding for one field. You can simply copy and paste that code for the other fields and change the names and the labels.
<label>Name</label><input name="name" type="text" size="50px" maxlength="35" />
When you get to pasting the code for the box where you want people to be able to have an unlimited number of lines to fill, like a MESSAGE box, you will click on the radio button that says “Multiline” and you add as many lines as you would like for that form.
You now have to add a submit button
INSERT > FORM > BUTTON and choose submit button from the drop down. This will add your submit button. You can place it where ever you would like.
Your email form will now be technically complete and the code will look like this:
<form action="formtoemail.php" method="get"> <label>name</label><input name="name" type="text" size="50px" maxlength="35" /> <label>email</label><input name="name" type="text" size="50px" maxlength="35" /> <label>phone</label><input name="name" type="text" size="50px" maxlength="35" /> <label>message</label> <textarea name="name" cols="50px" rows="10"></textarea> <input name="submit" type="submit" /> </form>
But it will look like this:
You should definitely subscribe because next we will talk about how to style your contact sheets!
Now, there is ONE last thing to do.
Open the FormToEmail.php file and at the very top change this line to your actual email address.
$my_email="name@yourdomain.com";You can also create a special page to redirect your customers to after clicking submit by changing this line to an actual file path.
$continue="/";So that is it. You upload your files to your website and HAVE FUN!!!
Want to know who is offering this awesome content? Here it is! Someone who is relatively new to web design. I am new enough to still remember how absolutely frustrating it was to try and get anything done in this field, but have also been around long enough to be able to help those that are where I was a year ago.
Aside from web design, I run the office of my dad's engineering business, and do book keeping by trade.
I love my pets.. All 6 cats, 1 peg legged dogs, and 1 hedgehog. LOVE THEM!!
Oh yea, and my husband. He lets me chase my dreams and I let him do the same. We are happy people because of it. Read more from this author
