I spent 2 full days pulling my hair trying to make a secure contact form in Dreamweaver using www.GoDaddy.com . I wanted Captcha support to prevent spam mail. I found many good solutions online, but none worked. You can test my form here at Florida Go Fishing or click the picture to the right. This tutoral may seem like a lot of work, but it is the easiest solution I found and doesn't take long to implement since I am giving you all the code. I wish someone out there would have done this for me :)
The problem I had with getting the form to work is I host multiple websites and a Wordpress Blog on one Hosting account on www.GoDaddy.com . This is not a normal setup since my sites are in sub-directories on the host server; most sites are installed in the root of the server.
Here is my server configuration: html – Wordpress installed here with multiple blogs (formerly MU) html/_sites -- all my sites under this directory
html/_sites/fishchumpro
html/_sites/floridagofishing
I have included the entire contact form code here. I hate to see new web designers go through the pain I went through to figure this whole thing out. If you found this post before spending days trying to figure out how to do this you will not appreciate what I am giving you here. I thought about selling it, but said HEY, why not share my work and hopefully my readers will show their appreciation by donating at the end of this post.
Please leave in the code below the reference "courtesy of bigsitesinc.com" so I get the benefit of a link to my site. Thanks & Enjoy!
Captcha Software
I used FREE Captcha software from http://www.phpcaptcha.org/download/.
In Dreamweaver first download the software to your main directory of the site. The software creates it's own folder /securimage with tons of files. After download, click the directory in Dreamweaver and upload to your server. You can find instructions on the Quickstart Guide link on phpcaptcha.org's webpage, but I have it all here too. They also have on their webpage and in the downloaded files examples for customizing the form. I am not knowledgeable in .php so I will keep mine simple and show you how here.
Contact Form
Here is the code for a contact form. Copy and paste this into your contact.html document. You will have to fix some of the formatting as I used CSS to decorate it. Make sure your save the form as contact.html for all this code to work.
____________________________________________________________
<!-- ==========Contact Form Courtesy of www.BigSiteInc.com===============-->
<form action="/securimage/contact.php" method="post" id="contact">
<table width="485" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td colspan="2" align="center" valign="top" bgcolor="#F0F7CC" scope="col"><strong>CONTACT US</strong></td>
</tr>
<tr>
<td width="100" align="right" valign="middle" bgcolor="#F0F7CC" scope="col"></td>
<td width="356" align="right" valign="middle" bgcolor="#F0F7CC" scope="col"></td>
</tr>
<tr>
<td width="100" align="right" valign="bottom" bgcolor="#F0F7CC" scope="col"> Name</td>
<td align="left" valign="middle" bgcolor="#F0F7CC" scope="col"><input name="name" type="text" id="name" size="47"></td>
</tr>
<tr>
<td width="100" align="right" valign="middle" bgcolor="#F0F7CC" scope="col">Email</td>
<td align="left" valign="middle" bgcolor="#F0F7CC" scope="col"><input name="email" type="text" id="email" size="47"></td>
</tr>
<tr>
<td width="100" align="right" valign="middle" bgcolor="#F0F7CC" scope="col">Message</td>
<td align="left" valign="middle" bgcolor="#F0F7CC" scope="col"><textarea name="message" cols="37" rows="10" id="message"></textarea></td>
</tr>
<tr>
<td width="100" align="right" valign="middle" bgcolor="#F0F7CC" scope="col">Join Mail List?</td>
<td align="left" valign="middle" bgcolor="#F0F7CC" scope="col"><p>
<label>
<input name="join" type="radio" id="join_0" value="yes" checked>
Yes</label>
<label>
<input type="radio" name="join" value="no" id="join_1">
No</label>
<br>
</p></td>
</tr>
<tr>
<td width="100" align="right" valign="bottom" bgcolor="#F0F7CC" scope="col">Security Code</td>
<td align="left" valign="middle" bgcolor="#F0F7CC" scope="col"><img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image" /><span>.</span><a href="#" onClick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false">[ Different Image ]</a><br>
<input type="text" name="captcha_code" size="10" maxlength="6" />
<span>.</span><span><em>listen</em></span><span>.</span><object type="application/x-shockwave-flash" data="/securimage/securimage_play.swf?audio=/securimage/securimage_play.php&bgColor1=#fff&bgColor2=#fff&iconColor=#777&borderWidth=1&borderColor=#000" width="19" height="19">
<param name="movie" value="/securimage/securimage_play.swf?audio=/securimage/securimage_play.php&bgColor1=#fff&bgColor2=#fff&iconColor=#777&borderWidth=1&borderColor=#000" />
</object></td>
</tr>
<td width="100" align="right" valign="middle" bgcolor="#F0F7CC">
<td align="left" valign="middle" bgcolor="#F0F7CC"><input name="send" type="submit" id="send" onClick="MM_validateForm('name','','R','email','','RisEmail','message','','R');return document.MM_returnValue" value="Send">
<span><span>.............................</span></span>
<input name="cf_clear" type="reset" id="cf_clear" value="Clear"></tr>
</table></form>
<!-- ==========Contact Form Courtesy of www.BigSiteInc.com=======================-->
____________________________________________________________
THIS IS THE CSS CODE FOR THE FORMATING, ADD TO YOUR LAYOUT.CSS FILE .table_heade_blue { text-transform: uppercase; color: #FFF; background-color: #3F769A; text-align: center; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border: 1px solid #666; font-size: 14px; font-weight: bold; vertical-align: middle; font-family: "Arial Black", Gadget, sans-serif; } .table-form-font-invisable { color: #F0F7CC; } .table_border_outside { border: thin solid #666; } ____________________________________________________________
Each field in the ID box on the property inspector (left wide box) is label so they are read by the contact.php file, you can see how they are referenced below in the scripts. If you click on each field box this is what you will see in code view: id="name" id="email" id="join" id="message"
You should also put validation on each field by clicking the SEND button, click Behaviors, and set each to validate by checking the Required box. For the email field click email address button. Dreamweaver will automatically insert code in the Head of the contact.html for validating the input fields.
Lastly, set the contact.html form Action to /securimage/contact.php by selecting the entire form and setting the Action property in the property inspector. Save the file contact.html. Now move (yes move) your contact form to the /securimage folder you downloaded earlier. You can drag the file within Dreamweaver and Dreamweaver will ask you to update links, say YES so all web pages get updated with the new location of the contact.html file. You will have to upload the entire websites html files when you are done with this tutorial because the links to the contact page are now changed. You can upload them now so you don't forget.
contact.php
Next create a file contact.php (code below) to make the form work. Put this file in the /securimage folder. In Dreamweaver select File/New/PHP file. Go to code view and paste the following code into the new document. Then change the information in RED to your email address and default directory. Save the file as contact.php to the /securimage folder. Here is my code for the file:
<!-- ===================Contact Form Courtesy of www.BigSiteInc.com=========================== -->
<form action="/securimage/contact.php" method="post" id="contact">
<table width="485" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td colspan="2" align="center" valign="top" bgcolor="#F0F7CC" scope="col"><strong>CONTACT US</strong></td>
</tr>
<tr>
<td width="100" align="right" valign="middle" bgcolor="#F0F7CC" scope="col"></td>
<td width="356" align="right" valign="middle" bgcolor="#F0F7CC" scope="col"></td>
</tr>
<tr>
<td width="100" align="right" valign="bottom" bgcolor="#F0F7CC" scope="col"> Name</td>
<td align="left" valign="middle" bgcolor="#F0F7CC" scope="col"><input name="name" type="text" id="name" size="47"></td>
</tr>
<tr>
<td width="100" align="right" valign="middle" bgcolor="#F0F7CC" scope="col">Email</td>
<td align="left" valign="middle" bgcolor="#F0F7CC" scope="col"><input name="email" type="text" id="email" size="47"></td>
</tr>
<tr>
<td width="100" align="right" valign="middle" bgcolor="#F0F7CC" scope="col">Message</td>
<td align="left" valign="middle" bgcolor="#F0F7CC" scope="col"><textarea name="message" cols="37" rows="10" id="message"></textarea></td>
</tr>
<tr>
<td width="100" align="right" valign="middle" bgcolor="#F0F7CC" scope="col">Join Mail List?</td>
<td align="left" valign="middle" bgcolor="#F0F7CC" scope="col"><p>
<label>
<input name="join" type="radio" id="join_0" value="yes" checked>
Yes</label>
<label>
<input type="radio" name="join" value="no" id="join_1">
No</label>
<br>
</p></td>
</tr>
<tr>
<td width="100" align="right" valign="bottom" bgcolor="#F0F7CC" scope="col">Security Code</td>
<td align="left" valign="middle" bgcolor="#F0F7CC" scope="col"><img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image" /><span>.</span><a href="#" onClick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false">[ Different Image ]</a><br>
<input type="text" name="captcha_code" size="10" maxlength="6" />
<span>.</span><span><em>listen</em></span><span>.</span><object type="application/x-shockwave-flash" data="/securimage/securimage_play.swf?audio=/securimage/securimage_play.php&bgColor1=#fff&bgColor2=#fff&iconColor=#777&borderWidth=1&borderColor=#000" width="19" height="19">
<param name="movie" value="/securimage/securimage_play.swf?audio=/securimage/securimage_play.php&bgColor1=#fff&bgColor2=#fff&iconColor=#777&borderWidth=1&borderColor=#000" />
</object></td>
</tr>
<td width="100" align="right" valign="middle" bgcolor="#F0F7CC">
<td align="left" valign="middle" bgcolor="#F0F7CC"><input name="send" type="submit" id="send" onClick="MM_validateForm('name','','R','email','','RisEmail','message','','R');return document.MM_returnValue" value="Send">
<span><span>.............................</span></span>
<input name="cf_clear" type="reset" id="cf_clear" value="Clear"></tr>
</table></form>
<!-- ==========Contact Form Courtesy of www.BigSiteInc.com===============-->
____________________________________________________________
THIS IS THE CSS CODE FOR THE FORMATING, ADD TO YOUR LAYOUT.CSS FILE
.table_heade_blue {
text-transform: uppercase;
color: #FFF;
background-color: #3F769A;
text-align: center;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
border: 1px solid #666;
font-size: 14px;
font-weight: bold;
vertical-align: middle;
font-family: "Arial Black", Gadget, sans-serif;
}
.table-form-font-invisable {
color: #F0F7CC;
}
.table_border_outside {
border: thin solid #666;
}
____________________________________________________________
Each field in the ID box on the property inspector (left wide box) is label so they are read by the contact.php file, you can see how they are referenced below in the scripts. If you click on each field box this is what you will see in code view:
id="name"
id="email"
id="join"
id="message"
You should also put validation on each field by clicking the SEND button, click Behaviors, and set each to validate by checking the Required box. For the email field click email address button. Dreamweaver will automatically insert code in the Head of the contact.html for validating the input fields.
Lastly, set the contact.html form Action to /securimage/contact.php by selecting the entire form and setting the Action property in the property inspector. Save the file contact.html.
Now move (yes move) your contact form to the /securimage folder you downloaded earlier. You can drag the file within Dreamweaver and Dreamweaver will ask you to update links, say YES so all web pages get updated with the new location of the contact.html file. You will have to upload the entire websites html files when you are done with this tutorial because the links to the contact page are now changed. You can upload them now so you don't forget.
contact.php
Next create a file contact.php (code below) to make the form work. Put this file in the /securimage folder. In Dreamweaver select File/New/PHP file. Go to code view and paste the following code into the new document. Then change the information in RED to your email address and default directory. Save the file as contact.php to the /securimage folder. Here is my code for the file:
____________________________________________________________
<?php session_start(); ?>
// Contact Form Courtesy of www.BigSiteInc.com
<?php
$field_name = $_POST['name'];
$field_email = $_POST['email'];
$field_join = $_POST['join'];
$field_message = $_POST['message'];
//the following code is most important. Set the path to your site. If you are on the root of your server it should read /securimage/securimage.php or if your site is in a folder as mine is, set it as I did below - delete this message from your .php file, I just added this text for instructions
include_once $_SERVER['DOCUMENT_ROOT'] . '/_sites/floridagofishing/securimage/securimage.php';
$securimage = new Securimage();
if ($securimage->check($_POST['captcha_code']) == false) {
// the code was incorrect
// you should handle the error so that the form processor doesn't continue
// or you can use the following code if there is no validation or you do not know how
echo "The security code entered was incorrect.<br /><br />";
echo "Please go <a href='javascript:history.go(-1)'>back</a> and try again.";
exit;
}
$mail_to = 'you@your-email.com';
$subject = 'GoFishingNaples Visitor '.$field_name;
$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Join: '.$field_join."\n";
$body_message .= 'Message: '.$field_message;
$headers = 'From: '.$email."\r\n";
$headers .= 'Reply-To: '.$email."\r\n";
$mail_status = mail($mail_to, $subject, $body_message, $headers);
if ($mail_status) { ?>
<script language="javascript" type="text/javascript">
alert('Thank you for the message. We will contact you shortly.');
window.location = 'contact.html';
</script>
<?php
}
else { ?>
<script language="javascript" type="text/javascript">
alert('Message failed. Please, send an email to you@your-email.com');
window.location = 'contact.html';
</script>
<?php
}
?>
____________________________________________________________
Upload the contact.html and contact.php files to your server from the /securimage folder. Next upload your site's .html files that were changed when you moved the contact.html file to /securimage folder if you haven't done so already. You are now ready to go. On your server the three files that make this work are:
/securimage/contact.html
/securimage/contact.php
/securimage/securimage.php
www.GoDaddy.com has a file called webformmailer.php installed in your main directory. I copied this file to the /securimage/ directory and all works. I am not sure if this is needed or not, but everything finally works for me. If your form works OK, don't bother with copying this file to the /securimage folder.
Good Luck! If my instructions are not clear, please let me know and I will fix them. If this form worked for you and you would like to show your appreciation, you can donate by clicking the PayPal button below. You can also support our websites by purchasing your domains and web hosting at www.GoDaddy.com , our Affiliate Partner. Thanks!
 |