Dreamweaver Tutorial - Create a Contact Form In Dreamweaver
In this tutorial you will learn how to create your all important Dreamweaver Contact Form and have the details of the form emailed straight to your INBOX. Capturing Contact Information of potential customers in extremely important in the business world. Don’t let those potential customers or clients disappear just because you didn’t have a Contact Form on your website. By following this Dreamweaver Tutorial you will have a WORKING Contact Form up and running in a few easy steps.
NOTE: Before we start you will need to download this PHP Form to Email Script and unzip it to the root directory of your website. A file named FormToEmail.php will be there.
Now you are ready to begin inserting the form and the fields you would like onto the page. In this example I am going to create anew page, but you can easily add this to an existing page if you already have one in mind for the form to be placed on.
1. In Dreamweaver, choose File > New The New Document Dialog Box appears.
2. In the Blank Document list, choose HTML, then click Create to create a new HTML document.
3. In the Title text field in the Document toolbar, enter Contact Form to add a title to your document.
4. Choose File > Save, then save the document in your local site folder. Name it ContactForm.htm.
5. Next we are going to Insert a Form onto the page, Choose Insert > Form then Form from the Flyout Menu. A Form dialog box will then open. In the Action text box type in FormtoEmail.php (this is the file you extracted to the root of your website earlier). Change the Method to POST and then in the NAME text box type in ContactForm.
6. Next step is to place the form objects onto the page (the information we would like to collect). In this example I have placed a text box for Name and Email Address, and also a Text Area for Comments. To do this click inside your form object and then from the top menu select Insert > Form > Label. From the Code Window click in between the LABEL Tags and type in Name:. Next from the toip menu again select Insert > Form > Text Field. Name the Text field name from the properties box at the bottom.
Repeat those steps and add another Label and Text Field and name it email.
7. Add another Label and type in Comments. Then add a Text Area, go to Inset > Form > Text Area in the top menu. Name the Text Area comments from the Properties box at the bottom and give the Character Width a value of 50 and the Number of Lines a value of 10.
8. Add a Button. Again from the top menu Insert > Form > Button. Your Form should now look like this: (note I have put each element on a different line to help with the usability).
9. Now we need to edit a couple of lines in the FormtoEmail.php file. Open the file in Dreamweaver. The first line you need to edit is the line that starts with $my_email.
Change the email address to the address you want the emails to be sent to. The other line that you may wish to change is this one:
This is where the visitor will be directed after they have pressed the SUBMIT button. If you have a page that you like to direct them to then place the location of the file in there, or simply leave it blank and they will get a thank you message on the same page.
10. Upload both files to your web server and bingo all done. You should know have a working contact form.
In an upcoming Tutorial I am going to show you how to use Dreamweaver and CSS (Cascading Style Sheets) to jazz up your forms with a bit of style! So make sure you SUBSCRIBE to my RSS Feed so you don’t miss out.
You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.
March 7th, 2008 at 5:28 am
Excellent! Thanks for the step-by-step. It looks easy.
March 19th, 2008 at 2:46 am
That’s it? That’s all one needs to create an e-mail form? Here I thought I’d need a DB set up and ready to go. Very cool.
March 19th, 2008 at 11:16 am
One issue I’m having… the e-mails don’t seem to actually send. Everything seems to work right, but no e-mails seem to be going out. I’ve checked and double checked, and everything is input correctly it seems…
March 19th, 2008 at 12:15 pm
Yep, it definitely won’t actually send the e-mail and I’m not sure why. Everything is done as directed… could it be my hosting service, GoDaddy.com’s issue?
March 21st, 2008 at 5:25 pm
Hey thanks This was easy and it helped me learn dreamweaver more.
March 21st, 2008 at 10:46 pm
@Bildo
Just check with your Host and see whether you are able to relay through their mail servers. It sounds like that may be the issue
Cheers
Daniel
March 28th, 2008 at 7:58 am
I’m practicing and learning dreamweaver and this tutorial was excelent, very simple and really works!
April 4th, 2008 at 7:50 pm
Great Stuff. What I have always been looking for. Thanks
April 4th, 2008 at 9:50 pm
I have followed the instructions but it didnt work. As ssoon as I press the submit button it isays page cannot be found.
Thanks,
ilker
April 5th, 2008 at 5:39 am
just followed the tutorial and got the same results as ilker “file not found” and no email was recieved. i’m also hosted on godaddy, didn’t see any response to that question.
April 5th, 2008 at 8:08 am
@Iker and @lee
Make sure you check that the file is in the correct location and that the Form Action value is exactly the same as the file name (case sensitive).
Cheers
Daniel
April 6th, 2008 at 6:31 am
to those using godaddy… they suck. get a new host. i’ve had so many problems with clients that use them. they don’t allow you to use any 3rd party scripts for emails or anything. supposedly it’s to be more “secure”. but it’s just annoying.
April 6th, 2008 at 8:22 am
@timmy
I have heard bad things about GoDaddy as well. I use BlueHost and Highly recomment them
Check them out here if you want to change.
Cheers
Daniel
April 7th, 2008 at 10:26 pm
it doesn’t work for me (i followed the tutorial and got the same results as ilker “file not found” and no email was recieved.)
April 8th, 2008 at 5:45 am
I am using GoDaddy and Having problems with them as well
April 8th, 2008 at 12:20 pm
G’day Everyone
Thanks for all your comments. It seems a lot of people are having issues with GoDaddy. From what I can gather they do not allow you to run 3rd Party Scripts. If that is the case then this will not work.
If anyone has recommendations for these people on Hosts that they use then please share your thoughts. As I have said in an earlier comment I use BlueHost and find them really good.
On another note a few people have emailed me with problems like “File Not Found Error”. Just make sure that you double check the file location and also the name of the file. It is case sensitive so that is causing the issue for some.
Cheers
Daniel
April 11th, 2008 at 4:31 am
Dear Daniel,
Its looks cool i done all but not yet uploaded.Will be posting result after upload.
You are simple great
April 11th, 2008 at 9:28 pm
Hey just to let you all know, for Godaddy you just change the FormTomail.php to gdform.asp
Thanks for your help in setting up the forms though!
April 17th, 2008 at 6:10 pm
Great Stuff. What I have always been looking for. Thanks
April 18th, 2008 at 12:56 pm
Dude it works. I had to capitalize the ‘T’ in FormToEmail but that was a quick fix and you rock.
Stay coo.
April 20th, 2008 at 11:08 am
Hi Daniel,
Thanks so much for the script. I am a total Dreamweaver newbie and this was so much less confusing than the other tutorials I’ve found. I did however have the same problem as the others with the message saying “URL not found” (or whatever!) after I clicked the Submit button. I’ve found a weird glitch with Dreamweaver and wanted to pass it on. Whenever you have the option of either typing in a file name or navigating and choosing the file…DEFINITELY go with navigating and clicking. I’ve found no matter how exact you’ve typed something Dreamweaver somehow doesnt recognize it. When I type in FormtoEmail.php….it doesnt recognize it and I got that URL not found message. When I navigate to it BINGO! It likes it then and the form works great. For whatever its worth to everyone out there, give it a try. It worked for me! Have Fun!
April 25th, 2008 at 6:23 am
[...] the contact and links page, i used a step by step guide at http://dreamweaverspot.com/adobe-dreamweaver-tutorial-contact-forms/ which helped me insert a contact form on my [...]
April 26th, 2008 at 5:04 am
This tutorial was very helpful. It was short, sweet, and to the point. It was easy to understand, so for beginners like me, you should definitely give it a try.
I think, however, that it should be a little more attractive with more images, but the content was excellent.
April 26th, 2008 at 5:07 am
Short, sweet, and to the point. Most importantly, very helpful. Should be more attractive, in terms of images and colors, but the content really worked/helped.
April 28th, 2008 at 10:20 am
Awesome work !!!!
April 29th, 2008 at 3:37 pm
Great tut, everything is working great. One question though. Is there a way to make the thank you message a popup?
April 29th, 2008 at 7:08 pm
Hi,
Great tutorial, still trying to get it to work, My question.
Does this work whilst using WAMPSERVER on my local computer?
Many thanks and keep it up!
John
April 29th, 2008 at 11:29 pm
@John
I am not to familiar with WAMPSERVER from what I can gather it is Apache, PHP, MySQL on Windows right?
For this to work you need to have an SMTP Server to be able to send the mail.
Cheers
May 2nd, 2008 at 11:48 am
Hi Daniel,
Thanks so much for the script, but I have a problem to run the Contact Form. It was running 2 days and it stop working. I contacted the web.com and they told me if the PHP script is over 4.3.2 than you will have to upgrade the plan. So, my question is what is the code of the PHP?
Thanks again
Fred
May 2nd, 2008 at 9:09 pm
For others, the reason you are getting not found errors is that in the TUT it doesn’t capitalize the ‘T’. Check your case.
My issues is that once I hit submit on the site, it says that YOU CANNOT SUBMIT AN EMPTY FORM
ANy idea why this is?
May 2nd, 2008 at 9:30 pm
NM I had a bad field in my form within dreamweaver, this solved it. I get the form to email perfectly, just two questions.
With the submit button, how can I stop the emails from saying Submit = Submit at the bottom.
Also how to I change the From field. Currently it’s popping up as Whatever@fairfax.dreamhost.com (yes I use dreamhost)
Is there a way to adjust that? Or is it server side?
May 3rd, 2008 at 8:41 am
For those that have been trying to upload the PHP file on GoDaddy, GoDaddy has its own PHP file for contact forms that works very well. See their help section.
May 5th, 2008 at 5:13 am
Thank you so much. It was very easy and helpful…
May 6th, 2008 at 12:09 pm
hi i test it & it work very well but
i make a test to send to one of my emails but it go to the spam
what can i do to have it normaly in mybox
thanks
May 7th, 2008 at 7:08 am
[...] tutorial is from Dreamweaver Spot that give you info about how to create a PHP contact form for your [...]
May 7th, 2008 at 12:23 pm
@sherif
This could be to do with many things, spam filter levels on your mailserver, the content that is being typed into the fields etc.
Some things to check anyway, Who is hosting your mail?
May 9th, 2008 at 8:40 am
You are my hero! It totally worked! Thank you!
May 13th, 2008 at 9:18 pm
I get a message after clicking the submit button which reads: Method not allowed - The requested method POST is not allowed for the URL/FormToEmail.php. Any ideas?
May 13th, 2008 at 11:40 pm
@Casa
This usually means that the server does not support PHP, contact their Tech Support and find out.
Cheers
Daniel
May 18th, 2008 at 2:53 am
Brilliant tutorial, thank you! After I got out of trying to think ahead and followed your instructions it’s integrated and working great! I’ve even managed to make it work with graphical fields and several other functions. Very impressed. Thanks for your help!
May 20th, 2008 at 5:57 am
Hi,
I followed this tutorial for a form on my mates site, however whenever i go to send the message and click the submit button, it trys to download the “FormToEmail.php” file?
My form action is exactly as yours, and my php file is as exaclty as yours is.
any help?
Thanks
Justin
June 2nd, 2008 at 12:55 pm
hi
June 2nd, 2008 at 1:03 pm
goodday:
i am so glad that you had given a well detailed tutorial but unfortunately some of its part are malfunctioning such as handling of errors..its enable to send message even the forms are blank. try to visit my trial site:http://www.jrmsc-tc.com/comments.html
please help me with this..
your email is much appriciated
June 3rd, 2008 at 6:01 am
the form works awesome! I could be wrong, but I think that you would have to change the javascript to have mutiple forms to different e-mails on the same page, correct? What needs to be changed in the code to do this?
June 3rd, 2008 at 6:24 am
doh! please disregard everything I just wrote…..I was looking at some other code….
June 12th, 2008 at 1:33 pm
This is fucking outstanding! THANK YOU VERY MUCH. I was struggling until I hit this page. You’re my hero…for today.
June 13th, 2008 at 8:38 am
I 2nd that. I can’t tell you how much i appreciate this.
June 16th, 2008 at 10:05 pm
thanks man
June 19th, 2008 at 10:31 pm
I tried several different form codes until I got to yours. Thanks so much! My emails are going through just fine. My issue is being able to send a blank form. I would like for the information to be required. Looks like your php file is telling it to look, so any ideas what the problem might be? I appreciate your help greatly. This was a huge help.
June 20th, 2008 at 6:34 pm
Thanks Man it work great
June 22nd, 2008 at 12:38 am
Thanks heaps mate! Sends emails for me - but for some reason I get a “Submit: Submit” in the body of every message and it lets the form be submitted even if the fields are blank. I get the ‘blank emails’ delivered with a default from address added from my hosting provider and that “Submit: Submit” in the body..
But it’s better than publishing an email address on my site - so thanks!
June 23rd, 2008 at 5:04 am
Hey Dan,
Get one tx a million, had the text issue when page not found due to capital T in the MailToForm. Sorted that now though. Question though, is there a way to auto redirect away from the results page back to the website home page?
June 28th, 2008 at 6:57 am
Hi Dan!
You saved the day at my office, as we needed to get a contact form up TODAY, and I have never made one before. It works beautifully, and my only glitch is if a person leaves the “Email:” field blank and hits “Submit”, it moves onto the “Thank You..” page and give me this message instead of applying the form validation:
“Warning: mail() [function.mail]: SMTP server response: 554 The message was rejected because it contains prohibited virus or spam content on line 116″
haha what? Not really sure why it does this instead of just telling me I need to put in the email address. It works fine if you at least type something in the box, but not if you leave it blank?
Thanks for being such a good sport with all these questions!
C
June 28th, 2008 at 10:51 pm
I do not normaly reply to this kind of posts, but this is the first form that actually worked. Congrats man, respect for all the tutorials and the time u spent trying to teach us noobs.
July 10th, 2008 at 7:47 am
works awesome.
July 10th, 2008 at 3:43 pm
Thanks man this is an absolute charm!!! Thanks for sharing this tute with us.