Create a Readable Email Contact Form with PHP Tutorial - no Programming Skills Required
Just about every website has a contact page, but for many sites, it's not enough to provide an email. Sometimes we want to make contacting us as easy as possible for our readers. There are quite a few solutions out there to build contact forms and have them emailed, but formatting the email for the recipient can be quite cumbersome! And if you don't know php or any other scripting language, you're pretty much stuck with formmail. Yuk.
This tutorial will teach you how to build a form, with optional required fields, and have a nicely formatted email using a php function, yet you do not need to know php! You should, however, know HTML and be quite familiar with forms.
If you can't wait to see the results,
- Try out the sample form emailed as HTML;
- Try out the sample form emailed as plain text;
- Download the file processemailform.php (zip);
- View the source code (new window).
Update 8-21-2008! Added a psuedo-captcha option for even more anti-spam.
Update 10-31-2007! The "required fields" function also validates email addresses.
Update 4-15-2007! Thanks to two users of my form, two bugs were found and fixed. One had to do with the new required fields (it was using a POST variable instead of the defined variable). The other bug had to do with the last field, which sometimes would not display. I've also updated the script to insert hard returns in the email where the person submitting the form has entered a hard return, such as in comments boxes.
New 4-1-2007! Now you can put required fields on your form.
New 12-31-2006! I've added a 'testemail.php' script in the zip package you can use first to check what your host will require to process the script.
New 5-8-2006! Don't have PHP? Don't have to worry! I can host your processemailform.php script. Contact me (jenny - at - whitewavedesigns.com) for details! This is a FREE service; no charges, no obligations!
New 9-3-2006! Do you want the email message reiterated on your thankyou page? Just put this line of code where you want it to be placed: <? echo $_SESSION['message']; ?>.
Some notes on the PHP settings
My processemailform.php script was written for PHP4/PHP5 on a UNIX box, with magic_quotes_gpc set to Off. However, it has also been tested with magic_quotes_gpc set to On, and PHP Version 4.3.11-dev IIS 6.0 with Windows 2003 Server. Error reporting has been turned off for this particular script as well. To see what your configurations are, create a php file called "test.php" and include in it only this line of code: <? phpinfo(); ?>.
I'd love for others who has successfully used my form to drop me an email with the settings of your server. Also, if there are any issues, let me know as well (jenny - at - whitewavedesigns.com). The more robust my script can be, the more helpful it will be to others! Thanks!
Some notes on anti-spam
Who doesn't hate spam? My processemailform.php script is pretty good (if I may say so myself) at preventing spam abuse. For example, if a spambot inserts additional header code into any of the form fields, the script redirects to Google.com (a site I picked at random) rather than send you the spam email. Likewise, if a spambot inserts the URL prefix "http://" into any form field, the script again redirects instead of sends you the email.
Since it is possible that a "real" contact user would enter a full URL as opposed to one beginning with "www", be sure to indicate this on your contact page if you are asking for websites or URLs. Example:
Your website: (do not enter "http://" or your form will be rejected as spam)
First, create a form. The form must be "post" method with the action "processemailform.php". (We'll get to that file later.)
<form name="form1" method="post" action="processemailform.php">
Create your form by adding the form fields. Name your form fields with the caption you wish to see in your email. For example:
<input name="Favorite Food" type="text" size="50">
will display like this in your email:
NOTE: if you are making the field a "required" field, do not use spaces in the form field caption. For example, use this instead:
<input name="Favorite_Food" type="text" size="50">
You can put the text that the user sees as one thing, and what you will see in the email as another. This makes for better logic flow. For example, in my sample for, I want to know how the visitor found my website. I will ask:
How did you find this tutorial?
But that might not make sense for the person recieving the email. So enter a "name" that is appropriate for the email:
<input name="How this tutorial was found" type="text" size="75">
NOTE: every form field name (except radio buttons) MUST be unique. If you are collecting multiple pieces of the same data, enumerate them in the name field. For example:
<input name="First Pet's Name" type="text" size="30">
<input name="Second Pet's Name" type="text" size="30">
<input name="Third Pet's Name" type="text" size="30">
Or for checkboxes:
<input type="checkbox" name="Tried tutorial 'Email Contact Form'" value="Yes">
Email Contact Form
<input type="checkbox" name="Tried tutorial 'Show and Hide Text'" value="Yes">
Show and Hide Text
Checkbox results will only return if the person filling out the form has checked that box.
NOTE: every radio button form field name MUST be the same for that group. For example:
Do you prefer PHP or ASP for a scripting language?
<input type="radio" name="Scripting language preference" value="PHP" checked="checked">PHP
<input type="radio" name="Scripting language preference" value="ASP">ASP
And in a second radio button group:
Do you prefer Windows or Unix hosting?
<input type="radio" name="Hosting preference" value="Windows" checked="checked">Windows
<input type="radio" name="Hosting preference" value="Unix">Unix
Many contact forms are small and don't collect too much information. But suppose that yours does, or that you are building a registration form of some sort. What makes so many emailed forms unreadable is having every form field listed one line after another, with no breaks or separation. Gloucester Web Designs has a great solution.
If you want to put an extra line between pieces of data in your email, include the following hidden field immediately preceding the field you want to space to occur in front of. For example, on my sample emailed form, I wanted a blank line between the question about how my site was found and questions about pets.
To get that blank line in the email, create a hidden form field and insert it right above the form field you want the blank space entered in front of.
<input type="hidden" name="separator1" value="separator1">
<input name="First Pet's Name" type="text" size="30">
For this to work, you MUST give the hidden form field the same name and value of "separator" plus a number. The number is keep each separator form field's name unique.
Add your submit button and close the form.
<input type="submit" name="Submit" value="Submit">
NOTE: the use of "separator" in forms is unique to my processemailform.php! It will not work with other processing files or formmail.
Open the file. In the "define" fields at the top of the file, replace my values in the second set of quotes with yours. Do NOT remove the double quotes!
//PSEUDO CAPTCHA: enter the answer to your "pseudo-captcha" question
//SPAM PREVENTION: enter 1 if you want to prevent users from entering 'http://' in any form field
//REQUIRED FIELDS: enter required fields, delimited by a comma, or leave blank for none
define("REQUIRED_FIELDS_COMMA_DELIMITED", "Name, Phone, Email");
//enter 1 if you prefer html email; enter 0 if you prefer text email
//enter 1 if you are using a reset button on your form; enter 0 if you are not
//put the "from" email address here; many servers require that this domain be the website domain
//if your host permits it, and you want the "from" to be the sender, require "Email" and enter $_POST['Email'] here
//put the receipient(s) email address here; separate multiple emails with a comma
//enter 1 if person submitting should receive copy; enter 0 if not
//put the website name here
//change subject line to your preference
define("SUBJECT_LINE", "Online Contact");
//enter the FULL name of the file that you want to return visitors to after they submit
HINT: If you are building this form for a client, put your own email in the "SEND_TO_EMAIL" define field while you are testing.
Upload this file to the same directory as the file that contains your form. You should be good to go!
Click here to try out the sample form emailed as HTML or click here to try out the sample form emailed as plain text. Questions and comments should be sent to jenny - at - whitewavedesigns.com.
White Wave Designs builds Email-Only Contact Forms that use this script for $5 per each form field/select value (excluding states and pre-built select lists). Contact White Wave Designs for more information.