HTML coding | PHP coding | CSS coding
___ /
_/ | \,^%---
|_____| <_ \ Fear not. It's quite simple....
--- == >/
[_____] __>,^
ejm | | //| |
Warning! I do not claim to be an expert in PHP or HTML. But the following instructions work for me and should work for you too. Before you go any further, you must ensure that your webhost supports php. If not, the form described on this page will NOT work. If your webhost does support php, read on:
Crosswinds-hosted accounts support php form mail. Here is a very basic outline of the workings of a PHP mail form in which all fields are required to be filled. Please note that the form demos on this page will not "send"; their sole purpose is to illustrate the various parts of a form.
Step One - HTML | Step Two - PHP | Step Three - CSS
Your form will be placed into three files. The first, the form itself can be an HTML file. The second part of the form (that actually does the work) must be a PHP file. The third is a CSS file: the stylesheet for the form.
Step One - HTML | Step Two - PHP | Step Three - CSS
At the top of the page is a simple form that you would place into your html document. Please note that the form on this page is strictly for show and has been disabled.
Here is the form coding to be put into your contact page. Please let "copy and paste" be your friend. Use a simple text editor (notepad, textpad). Save the file as "contact.html". Obviously, you will want to use different values for your form and any number of boxes. Alter the form to suit your site. (For more about forms, please see How to Code a Form.)
Notice in the coding example for this mailform that there are no hidden input lines that contain your email address. That is because your email address will be hidden away in the PHP file that will send the form. Look for the following in your form:
<form method="post" action="contact/contact_form.php">The php file contact_form.php, that you will create in step two, is the one that will be doing all the work of sending. Whatever is inside the php coding is hidden from general view and inaccessible to ferretting robots.
Step One - HTML | Step Two - PHP | Step Three - CSS
The file named "contact_form.php" now must be created so that the form can be sent. Copy and paste this php coding into a simple text editor (notepad, textpad). Save the file as contact_form.php - of course, you can name it whatever you like but the file ending must be .php. If you want, you can choose to place "contact_form.php" in a separate protected folder.
For this particular form, all areas are required fields. (When you look at the coding, you will see some sections that are marked by lines beginning with //; these will give explanations for the lines of coding that follow.) Using php, here's how to get your mailform up and running:
You will want to relay some sort of error message for those who try to send the form unfinished. On this particular form, the error message is housed within <div id="oops">. Take a look at the coding in your php file (php coding for the form), look for the following:
// show an error message if indicated fields are left empty
if (($name == "") || ($email == "") || ($comment == ""))
{
echo '<div id="oops">An error has occurred and the form cannot be sent. Please note that all areas of the form <em>must</em> be filled in. Either use your browser buttons to go back to the form or make corrections below.</div>';
}The part that is bold in the above example can be safely changed. Use whatever wording suits you best.
It's a sad fact that we have to account for the small percentage of misguided people who have odd ideas of fun. In this example, 60 characters for the name has been chosen. You can choose any number you want; just choose a reasonable number. Look for:
//limit number of characters in $name
$name = substr(trim($_POST['name']), 0, 60);Do the same for the other fields. To limit the number of characters in the email field, look for:
//limit number of characters in email
$email = substr(trim($_POST['email']), 0, 60);
To limit the number of characters in the comment field, look for:
//limit number of characters in comment
$comment = substr(trim($_POST['comment']), 0, 300);We also have to assume that some of these misguided ones will type in some nonstandard characters to try to break your mailform. So we will change nonstandard characters into character entities. In the PHP coding, look for
// change nonstandard characters into entities
$fixname = htmlentities($name);
echo '<span class="done">' , $fixname , '</span></p>';
All fields are required, so we'll cause the form to remind your senders if they leave one of the fields blank. To make the name
required, look for:
if ($name == "") {
echo '<p class="error"><label for="name">Your name</label> (required):<br />
<input type="text" id="name" name="name" /></p>';
Note that if the name has not been filled in on the form, (required)
will appear after name
on the returned page and the textbox will be empty. However, if the name has been filled in, the else { section will kick in. Look for:
echo '<p>Your name:<br />';
echo '<input type="hidden" value="' , $fixname , '" id="name" name="name" />';
echo '<span class="done">' , $fixname , '</span></p>';
}Note that $fixname is used instead of $name for the value. Now there is less likelihood of your mailform being meddled with. (For more about this, please see www.php.net.)
Do the same thing for the email address. Look for:
if ($email == "") {
echo '<p class="error"><label for="email">Your e-mail address</label> (required):<br />
<input type="text" id="email" name="email" /></p>';However, if the email address has been filled in, the else { section will kick in. Look for
else {
echo '<p>Your e-mail address:<br />
<input type="hidden" value="' , $sender_email , '" name="email" id="email" />
<span class="done">', $sender_email ,'</span></p>';Do the same thing for the comments section. Look for:
if ($comment == "") {
echo '<p class="error"><label for="comment">Your Brief Message</label> (required):<br />
<textarea name="comment" id="comment"></textarea></p>';
However, if the comment area has been filled in, the else { section will kick in. Look for:
else {
echo '<p>Your Brief Message:<br />
<input type="hidden" id="comment" value="' ,$fixcomment, '" name="comment" /><span class="done">' , $fixcomment , '</span></p>';Because your confirmation page is asking for your senders' email addresses, you'll want to offer some protection to them from the possibility of spam being sent to the their mailboxes as a result of robots mining your pages. Split the email address in half and divide it with the character entity for @:
//split email address in half
list($userName, $mailDomain) = split("@", $email);
$sender_email = $userName."@".$mailDomain;And now, get the form to send the information to you. Look for:
// $goesto - address to which form is to be sent
/* *** change yourdomainname.com to the domainname of the recipient
eg: $domain="crosswinds.net"; *** */
$domain="yourdomainname.com";
// split up the email address in to protect recipient from spam
/* *** change 'recipientname' to that of the recipient
eg: $goesto = "j_smith"."@".$domain ; *** */
$goesto = "recipientname"."@".$domain ;Set the subject heading that will be sent to you in the completed form. In the coding, look for:
// $subject - set to the Subject line of the email being sent
$subject = "comments from feedback form";Once the form has been sent, you can add a confirmation message. Look for:
// set up confirmation message for webpage
echo '<div id="thnks">
<p>Thank you for your message. We appreciate hearing from you, '.$name. '. A copy of the message sent ' .$today. ' appears on this page.</p></div>'See how the confirmation is personalized?
Step One - HTML | Step Two - PHP | Step Three - CSS
And finally, the coding for the stylesheet.
Save the file as contactformstyle.css - of course, you can name it whatever you like but the file ending must be .css. Obviously, you'll want to fool around with the styles!
And there you have it. Your formmail is set up. Send yourself some test messages to see it in action.
I hope all that helps you!
\_,^^%---
<\_ \ See? It's easy when you know how....
>
>^^
/|
ejm | \
© llizard 2005
CWC reference pages . ASCII-art . illustrations and gif animations . llinks to ridiculously useless sites . home page