|
For some reason, the issue of having a 'contact me' form on a website can be far too complicated. There are maybe 10 THOUSAND scripts out there that are eager to proclaim how well they do this task, but most of them are either garbage or a total pain in the rear to implement. This was the case with a friend recently, so I helped out with what I think is a pretty quick and easy solution. Yes, it's about as simple as it gets, but it also gets the job done without too many headaches. The initial goal was to be able to have the contents of a form get emailed to a specific address. Now, ideally, this would mean ANY form put on the page. This version has NO input validation and NO spam prevention, BUT I think gets a basic job done. Simple Contact Form Part 2 will have the more advanced version with some error checking capabilities. If you want a quick preview of the working code, this sample Simple Contact Form is what you should look at. And of course, it's built around PHP... means you need PHP running on your server and you have to know how to do an include... of course, here is the entire include syntax... <?
include("contact-form.inc.php");
?>
The file is intended to be used as an include so it can fit into any page that you want - you get to keep your layout, page formatting & CSS.
The file has 3 sections to it, which I'll briefly describe...
Section #1 - sets up some environment variables that you want for your site.
- Who the email should appear to be from
- What email address to send to
- Subject line for the email
- etc.. etc... etc...
The comments should tell you what you need to know here. If there are quotes where you need to change something for your specific site, be sure the quotes are sill there whey you are done, or it will blow up on you. One of the keys to this is that the script knows what page it is on and uses that information as the 'action' attribute in the form - the page calls itself for processing the form.
/******************************************************************
ADJUST THESE DEFINED VARIABLES FIRST TO MATCH YOUR SITE INFORMATION
SECTION #1
*******************************************************************/
// testing or not - testing will NOT allow email to send - TRUE or FALSE
define(TESTING, TRUE);
// email address the mail should appear to come from
define(FROM_EMAIL, "your_sites_email_address");
// subject for email
define(EMAIL_SUBJECT, "Quotation Request from Web Site");
// email address you want the contact form to go to
define(EMAIL_TO, "your_desired_receiving_email_address");
// whatever messge you want to display when the email sends successfully
define(EMAIL_SUCCESS_MESSAGE, "<p>Thank you for contacting us.</p><p>The above information was submitted. We will reply as soon as possible.</p>");
// whatever message you want to display if the email encounters an error
define(EMAIL_FAIL_MESSAGE, "There was an error with your message, please use the browsers back button to try again.");
// field name of submit button on form to ignore so it's not listed in email
define(IGNORE_SUBMIT_FIELD, "SUBMIT");
// field name of reset button on form to ignore so it's not listed in email
define(IGNORE_RESET_FIELD, "RESET");
// only TRUE or FALSE - lower case is fine
// if you want to display the information the user submitted back to the user when done
define (DISPLAY_SUBMISSION, FALSE);
// don't change the next line!
define(THIS_PAGE, $_SERVER['PHP_SELF'] );
// usually your most basic domain email address where you for sure have a valid account to send from
define (FORCE_EMAIL_ADDRESS, "webmaster at your_site.com");
Section #2 - if the form has been submitted by the user, then the script can find everything it needs in the $_POST array. Literally, all this does is loop through the $_POST array to get the key names and associated values. That information is put into an email message with some very basic formatting so the email can be read by humans and then sent to the email address defined in Section #1.You don't even have to understand what this part does, just know that it should do it. // $_POST has data so process the contact form
/***************************************************************
SECTION #2
You should not have to touch anything here unless you want to change how
the post processing works.
***************************************************************/
$emailmessage = "";
foreach($_POST as $key => $value) {
if (($key != IGNORE_SUBMIT_FIELD) && ($key != IGNORE_RESET_FIELD)) {
$emailmessage .= $key . ": " . $value . "<br>\n\r";
}
} // end foreach($_POST as $key => $value)
// email setup
$headers = "MIME-Version: 1.0\x0d\x0a";
$headers .= "Content-type: text/html; charset=iso-8859-1\x0d\x0a";
/* additional headers */
$headers .= "From: " . FROM_EMAIL . "\x0d\x0a";
$address = EMAIL_TO;
$subject = EMAIL_SUBJECT;
if (!TESTING) {
if (mail($address, $subject, $emailmessage, $headers, "-f" . FORCE_EMAIL_ADDRESS)) {
if (DISPLAY_SUBMISSION) {
echo "<p>$emailmessage</p>";
}
echo "<p><strong>" . EMAIL_SUCCESS_MESSAGE . "</strong></p>";
} else {
echo "<p><strong>" . EMAIL_FAIL_MESSAGE . "</strong></p>";
}
} else {
echo "<p>Email did not send due to TESTING being set.<br>Here is what would have
been in the email along with the successful send message presented to the user.
</p><hr width=\"50%\">";
echo "<p>$emailmessage</p><hr width=\"50%\">";
echo "<p>User Message:</p><p>" . EMAIL_SUCCESS_MESSAGE . "</p>";
} // END if..else (!TESTING)
Section #3 - What ever valid form you want! Just be SURE it's a valid form and that each form element uses a proper 'name' attribute. The 'name' attribute is part of what gets passed to the $_POST array for processing.
The other thing to be SURE of is to not touch the 'action' attribute of the form tag - it is setup with one of the PHP variables so it will know what page to call to process the form. Now, I've also used one of the nice features of PHP which is to intermingle plain HTML inside PHP code so nobody has to worry about escaping quotes and all that type of fun. Just build a form without messing with the PHP start and end markers. You do need to build your form INSIDE section #3 of the script. Here is the sample form this was initially built with, but you could change it to anything you want and the script should work regardless. No, it's not the cleanest form around - it's just a quickly knocked out example. In the real world, use a proper CSS file. <FORM ACTION ="<?= THIS_PAGE ?>" method="post">
<table border=0 width=100% cellpadding=1 cellspacing=0>
<tr>
<td align=RIGHT nowrap >Your Name:</td>
<td align=LEFT>
<input type ="TEXT" name ="NAME" size ="20" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt">
</td>
</tr>
<tr>
<td align=RIGHT nowrap ><font face="Arial, Helvetica, sans-serif">Company Name:</font></td>
<td align=LEFT><input type ="TEXT" name ="COMPANY" size ="25" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT nowrap >Company Address 1:</td>
<td align=LEFT><input type="text" name="address1" size="25" maxlength="50" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT height="25" nowrap >Company Address 2:</td>
<td align=LEFT height="25"><input type="text" name="address2" size="25" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT nowrap >City:</td>
<td align=LEFT><input type="text" name="city" size="20" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT nowrap >State / Zip Code:</td>
<td align=LEFT><input type="text" name="State" size="2" maxlength="2" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"><span >/</span><input type="text" name="zip code" size="12" maxlength="20" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT nowrap >Country:</td>
<td align=LEFT><input type="text" name="country" size="15" maxlength="40" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT nowrap >Email Address:</td>
<td align=LEFT><input type =" TEXT" name =" EMAIL" size =" 30" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT nowrap ><font face="Arial, Helvetica, sans-serif">Your Site's URL: </font></td>
<td align=LEFT><input type =" TEXT" name =" SITEURL" size =" 30" value="http://" maxlength="100" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT nowrap >Daytime Phone #:</td>
<td align=LEFT><input type =" TEXT" name =" DAYPHONE" size =" 16" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT nowrap >Evening Phone #:</td>
<td align=LEFT><input type =" TEXT" name =" EVENPHONE" size="16" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT nowrap >Payment Method:</td>
<td align=LEFT>
<select name =" PAYMENT" size =" 1" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt">
<option selected>--Select-- </option>
<option>Money Order </option>
<option>Cashier's Check </option>
<option>Wire Transfer </option>
<option>PayPal</option>
<option>Cash</option>
</select></td>
</tr>
<tr>
<td align=right nowrap >Due Date:</td>
<td align=left><input type="text" name="Date Required" size="8" maxlength="8" value="--/--/--" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=CENTER colspan="2"> <img src="../images/spacer.gif" width="10" height="10" border="0"><br>
<textarea rows = 4 cols = 40 name =" SPECIAL" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt">Briefly describe the requirements of your project here: </textarea>
</td>
</tr>
<tr align="center"><td colspan=2>
<table border="0" cellspacing="0" cellpadding="5">
<tr align="center" valign="middle">
<td>
<input type ="SUBMIT" value =" Submit Your Request" style="font-family: Arial; font-size: 8pt; color: #606060; font-weight: bold; width:180;" name="SUBMIT">
</td>
</tr>
</table>
</form>
Now that you've seen how it all goes together, here is the basic sample page again, with the include working - the script is set to TESTING mode so no email is being sent out. When you hit submit, it will simply show you what would have been in the email to be sent. Simple Contact Form
Here is the full script if you want to see how it all goes together. It's just a simple if..else.. structure. <?
/*************************************
Really simple contact form processor v1.0 - Quiet Thunder Marketing
- Initial build 7/25/07
Simply processes all fields on a form and sends it to a defined email address.
Intended to be used for a contact form. The form will call the current page to do
it's processing. Once form data is processed and email is sent - final message
is printed to the screen.
**************************************/
//ini_set("display_errors", "On");
//error_reporting( E_ALL );
/*************************************
ADJUST THESE DEFINED VARIABLES FIRST TO MATCH YOUR SITE INFORMATION
SECTION #1
**************************************/
// testing or not - testing will NOT allow email to send - TRUE or FALSE
define(TESTING, TRUE);
// email address the mail should appear to come from
define(FROM_EMAIL, "webmaster at your_domain_here.com");
// subject for email
define(EMAIL_SUBJECT, "Quotation Request from Web Site");
// email address you want the contact form to go to
define(EMAIL_TO, "your_email_here");
// whatever messge you want to display when the email sends successfully
define(EMAIL_SUCCESS_MESSAGE, "<p>Thank you for contacting us.</p><p>The above information was submitted. We will reply as soon as possible.</p>");
// whatever message you want to display if the email encounters an error
define(EMAIL_FAIL_MESSAGE, "There was an error with your message, please use the browsers back button to try again.");
// field name of submit button on form to ignore so it's not listed in email
define(IGNORE_SUBMIT_FIELD, "SUBMIT");
// field name of reset button on form to ignore so it's not listed in email
define(IGNORE_RESET_FIELD, "");
// only TRUE or FALSE - lower case is fine
// if you want to display the information the user submitted
define (DISPLAY_SUBMISSION, FALSE);
// don't change the next line!
define(THIS_PAGE, $_SERVER['PHP_SELF'] );
// only TRUE or FALSE - lower case is fine
// usually your most basic domain email address where you for sure have a valid account to send from
define (FORCE_EMAIL_ADDRESS, "webmaster at your_domain_here.com");
if (!empty($_POST)) {
// $_POST has data so process the contact form
/*************************************
SECTION #2
You should not have to touch anything here unless you want to change how
the post processing works.
**************************************/
$emailmessage = "";
foreach($_POST as $key => $value) {
if (($key != IGNORE_SUBMIT_FIELD) && ($key != IGNORE_RESET_FIELD)) {
$emailmessage .= $key . ": " . $value . "<br>\n\r";
}
} // ebd foreach($_POST as $key => $value)
// email setup
$headers = "MIME-Version: 1.0\x0d\x0a";
$headers .= "Content-type: text/html; charset=iso-8859-1\x0d\x0a";
/* additional headers */
$headers .= "From: " . FROM_EMAIL . "\x0d\x0a";
$address = EMAIL_TO;
$subject = EMAIL_SUBJECT;
if (!TESTING) {
if (mail($address, $subject, $emailmessage, $headers, "-f" . FORCE_EMAIL_ADDRESS)) {
if (DISPLAY_SUBMISSION) {
echo "<p>$emailmessage</p>";
}
echo "<p><strong>" . EMAIL_SUCCESS_MESSAGE . "</strong></p>";
} else {
echo "<p><strong>" . EMAIL_FAIL_MESSAGE . "</strong></p>";
}
} else {
echo "<p>Email did not send due to TESTING being set.<br>Here is what would have been in the email along with the successful send message presented to the user.</p><hr width=\"50%\">";
echo "<p>$emailmessage</p><hr width=\"50%\">";
echo "<p>User Message:</p><p>" . EMAIL_SUCCESS_MESSAGE . "</p>";
} // END if..else (!TESTING)
} else {
// $_POST is empty, so display the contact form
/**************************************
SECTION #3 - Your Contact Form
You can make the form look anyway that you want and add/subtract any fields that you want.
The form processor will look at every field from the form and send the form field name along
with the value.
This is intended to be a PHP Include so whatever CSS you have in place on the page will take over
to format this section of your page.
The one thing to NOT do... don't change the 'action' attribute in the form tag.
**************************************/
// just HTML form after this PHP closing tag
?>
<FORM ACTION ="<?= THIS_PAGE ?>" method="post">
<table border=0 width=100% cellpadding=1 cellspacing=0>
<tr>
<td align=RIGHT nowrap >Your Name:</td>
<td align=LEFT>
<input type ="TEXT" name ="NAME" size ="20" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt">
</td>
</tr>
<tr>
<td align=RIGHT nowrap ><font face="Arial, Helvetica, sans-serif">Company Name:</font></td>
<td align=LEFT><input type ="TEXT" name ="COMPANY" size ="25" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT nowrap >Company Address 1:</td>
<td align=LEFT><input type="text" name="address1" size="25" maxlength="50" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT height="25" nowrap >Company Address 2:</td>
<td align=LEFT height="25"><input type="text" name="address2" size="25" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT nowrap >City:</td>
<td align=LEFT><input type="text" name="city" size="20" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT nowrap >State / Zip Code:</td>
<td align=LEFT><input type="text" name="State" size="2" maxlength="2" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"><span >/</span><input type="text" name="zip code" size="12" maxlength="20" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT nowrap >Country:</td>
<td align=LEFT><input type="text" name="country" size="15" maxlength="40" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT nowrap >Email Address:</td>
<td align=LEFT><input type =" TEXT" name =" EMAIL" size =" 30" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT nowrap ><font face="Arial, Helvetica, sans-serif">Your Site's URL: </font></td>
<td align=LEFT><input type =" TEXT" name =" SITEURL" size =" 30" value="http://" maxlength="100" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT nowrap >Daytime Phone #:</td>
<td align=LEFT><input type =" TEXT" name =" DAYPHONE" size =" 16" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT nowrap >Evening Phone #:</td>
<td align=LEFT><input type =" TEXT" name =" EVENPHONE" size="16" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=RIGHT nowrap >Payment Method:</td>
<td align=LEFT>
<select name =" PAYMENT" size =" 1" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt">
<option selected>--Select-- </option>
<option>Money Order </option>
<option>Cashier's Check </option>
<option>Wire Transfer </option>
<option>PayPal</option>
<option>Cash</option>
</select></td>
</tr>
<tr>
<td align=right nowrap >Due Date:</td>
<td align=left><input type="text" name="Date Required" size="8" maxlength="8" value="--/--/--" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt"></td>
</tr>
<tr>
<td align=CENTER colspan="2"> <img src="../images/spacer.gif" width="10" height="10" border="0"><br>
<textarea rows = 4 cols = 40 name =" SPECIAL" style="font-family: arial,helvetica; color: #606060; border: 1 solid #666666; background: #ffffff; font-size: 8pt">Briefly describe the requirements of your project here: </textarea>
</td>
</tr>
<tr align="center"><td colspan=2>
<table border="0" cellspacing="0" cellpadding="5">
<tr align="center" valign="middle">
<td>
<input type ="SUBMIT" value =" Submit Your Request" style="font-family: Arial; font-size: 8pt; color: #606060; font-weight: bold; width:180;" name="SUBMIT">
</td>
</tr>
</table>
</form>
<?
// just HTML form ends
} // end if..else (empty($_POST))
?>
enjoy!
Simple Contact Form Part #2 soon to come...
|
