Wednesday, November 28, 2007

How to set up a PHP Contact Form on your Website

The first few times I tried this, it didn't work. I ended up getting some friends to set it up for me. Then I found this script that uses PHP that works perfectly.

So, requirements for this form to work is that your server is running PHP. If not, you'll have to use a cgi script or a perl script or something. I don't use those, but you can start here.

Here's a zipped file with 3 items in it: The php script "MailForm.php", an autoresponse example "autoresponse.htm" and an html page with the form built on it "contactForm.html". You can use this form, or modify it accordingly.

You will also be building a "thankyou.htm" and an "errorpage.htm". You can turn these functions off, but I like them, so I've left them on the file.

Basically, for simplicity, you'll need to put "MailForm.php" in the same directory on your server as the other pages of your website. (you can always put the form wherever you like, but you'll just have to make sure the path on the form is pointing to the right place.

OK, so I'll talk about the easy stuff first. The autoresponse file is just a plain text message that gets sent to the senders email address immediately as they submit the form. Make sure and change the title of the page (this is turned into the "subject line"), and change the message to your liking. I made mine plain text with no html...that's the lowest common denominator. The name of the file needs to stay "autoresponse.htm" or it won't work. (again, if you change it, just change the path as well).

The error page will come up if the user does not fill in all of the required fields (we'll talk about that later). So, there should be a message stating that they need to go back and fill in the rest of the fields.

Note: I put a javascript "history-1" link on mine...just to make it easier.

The Thank you page is a "confirmation" message that the email was sent successfully. I suggest that it say something like "Thanks for contacting us...we'll get back with you shortly" or something like that.

I make my error page and thank you page look like my website pages. Test my page by not filling out one of the fields to see the error page, and then send me some nice message to see the thank you page.

This contact form script does not check that the phone number is all numbers and the right amount of numbers, or if the email is correct, so you might get some people sending you emails without a way to return their message. My brother does that to me every once in a while with messages like "Your website is lame!" and signs it "Holdin McGroin". I know he does it because he loves me.

So, now the form. Checkout the contactForm.html that you downloaded. You should be able to copy that code from the page I provided and paste it directly into yours. You might have to mess with table widths.

Note: make sure and copy from the open form tag to the close form tag.

<form></form>

So, there are a few things you'll need to change:

Form action: change this path to point to your file on your server.

Recipient: This is your email or your client's...the recipient.

Subject: Change this to what you want.

Redirect: This is the path to the thank you page.

Required: These are the textfield names that are required to be filled out.

Errorpage: This is the path to the errorpage, when the fields are not filled out.

Autoresponse: This is the path to your autoresponse page...this file (autoresponse.htm) should be somewhere on your server...I put mine in the same directory as the script and error page, etc.

Now, you just have to build your form (or copy/paste my form into your page. You know, almost every time i need a form, I go and copy the form from my site and paste it into the site I'm creating. I know mine works, I just have to change paths.

I always start by creating a table with the right amount of cells, then start filling them in. When you put a textfield in, go down to the "properties" palette (dreamweaver) and write in a unique textfield name. This will organize your textfields, but more importantly, these are the names that you type in above in the "required" area of the form code. If you are not working in Dreamweaver, the textfield name looks like this:

<input name="name" type=text id="name">

You can "require" any textfield, as long as it's unique, and is named. For example, you can have name1, name2, officialname, petname, numberofkids, basically anything. You can use underscores and hyphens, but no spaces or special characters.

I've actually made a form that had almost 80 fields in it and they wanted all of them to be required. That was crazy. I suggest making it obvious which fields are required by using "bold" or "red" or a "*" or something.

You can change what the buttons say at the bottom. The buttons are created for you by the code that speaks to the browser, so you don't have to create a button.

To make a multi line field in Dreamweaver, you just click multiline in the properties palette, and specify how many rows. outside of Dreamweaver it looks like this:

<TEXTAREA name="comment" cols="30" wrap="virtual" rows="4"></TEXTAREA>

Or something like that.

I sure wish I had an explanation like this when I was learning. You know, there are a bunch of scripts and tutorials out there, just google "contact form script" or something. What I found though is that most are written by coders that assume you know something about code or where to look deep in the code to find what you have to modify. The code I use is real easy, but again, your server needs to be running php...sorry.

Hope this helps

Jorge

6 comments:

Kelly said...

I have been searching for something like this for a while. I followed your instructions and it works like a charm.

Thank you so much!

Sam said...

I did everything as instructed, however I kept getting a warning about my autoresponse.htm file. The problem was fixed when I changed my php.ini file to read "allow_url_fopen = on" This is paramount, otherwise your client will not receive a response email.

Jorge said...

Sam, thank you for this. I'm actually having an issue with a server right now not sending the email. I'm not hosting it so I have to talk to the hosting company about this. Thanks for the post.

jorge

Jeff Bush Pres/CEO BushCo LLC said...
This post has been removed by the author.
Beck said...

Thanks for this information. I am not a real tech head when it comes to this stuff just a designer really. I followed your instructions but keep getting the following error. "Not Found
The requested URL /submit form was not found on this server.

Apache/1.3.37 Server at lasales.com.au Port 80"

Any ideas on what I've done wrong. Cheers Beck

Tusar said...

Dear


Actually i was searching for such an easy process of contact form.

Thanks dear. for your post.