PDA

Click to See Complete Forum and Search --> : adding a captcha to my site

dreamydesigner
03-27-2008, 09:45 PM
I need to add a captcha to the end of my quote request form {it's that little box with the distorted letters and numbers, used to verify that a real person is filling out the request form}. I have been looking into using recaptcha, but I am having difficulty getting the code to work. It just displays in my html page, rather than making the captcha show up. It's just a normal html page which uses cgi to send the form information. If anyone has done this before and has suggestions, I am all ears!

Thanks.
shalom_m
03-28-2008, 01:40 AM
Of those who help
And have the flair,
And knowledge
They do want to share.


Of the gifts we have
In arts and code,
Whether acquired
Or bestowed,


Dear friend
Without sounding rude;
Clairvoyance they
Do not include!


Without a sample
We cannot know
What pears of wisdom
To bestow.
urstwile
03-28-2008, 05:28 AM
Um, Shalom, I think you meant pearls, but whatever, pears of wisdom sounds kinda cool as well. Are they in season all year long?
shalom_m
03-28-2008, 06:11 AM
Sorry - PEARLS ............ typo to late at night
urstwile
03-28-2008, 06:11 AM
:)
dreamydesigner
03-28-2008, 03:15 PM
Wow...that was elaborate! :) I do not have an example to show you right now because our site is down temporarily. Here is the code for my quote page, though.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/mei.dwt" codeOutsideHTMLIsLocked="true" -->
<head>
<script language="JavaScript" src="https://seal.networksolutions.com/siteseal/javascript/siteseal.js" type="text/javascript"></script>
<LINK REL="SHORTCUT ICON" HREF="final_logo.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Get A Quote</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:504px;
top:24px;
width:279px;
height:103px;
z-index:1;
}
-->
</style>
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="mainnew.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv2 {
position:absolute;
left:630px;
top:574px;
width:171px;
height:39px;
z-index:1;
}
-->
</style>
</head>

<body class="oneColFixCtrHdr" onload="MM_preloadImages('images/navOVER1.png','images/navOVER2.png','images/navOVER3.png','images/navOVER4.png','images/navOVER5.png','images/FooterON1.gif','images/FooterON2.gif','images/FooterON3.gif','images/FooterON4.gif','images/navOver_01.png','images/navOver_02.png','images/navOver_03.png','images/navOver_04.png','images/navOver_05.png','images/navOver_06.png')">
<div id="container">
<div id="header">
<h1 align="left">
<map name="Map" id="Map"><area shape="rect" coords="229,49,348,67" href="products.html" target="_self" />
<area shape="rect" coords="351,48,464,68" href="showcase.html" target="_self" />
<area shape="rect" coords="465,49,580,68" href="testimonials.html" target="_self" />
<area shape="rect" coords="580,48,657,68" href="about.html" target="_self" />
<area shape="rect" coords="657,48,719,67" href="contact.html" target="_self" />
</map>
<a href="index.html"><img src="images/nav_0.png" alt="MEI Logo" width="221" height="70" border="0" /></a><a href="products.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/navOver_01.png',1)"><img src="images/navOn_01.png" alt="Products &amp; Services" name="Image7" width="120" height="70" border="0" id="Image7" /></a><a href="showcase.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/navOver_02.png',1)"><img src="images/navOn_02.png" alt="Design Showcase" name="Image8" width="101" height="70" border="0" id="Image8" /></a><a href="tools.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/navOver_03.png',1)"><img src="images/navOn_03.png" alt="Marketing Tools" name="Image9" width="93" height="70" border="0" id="Image9" /></a><a href="testimonials.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/navOver_04.png',1)"><img src="images/navOn_04.png" alt="Testimonials" name="Image14" width="77" height="70" border="0" id="Image14" /></a><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/navOver_05.png',1)"><img src="images/navOn_05.png" alt="About" name="Image15" width="45" height="70" border="0" id="Image15" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','images/navOver_06.png',1)"><img src="images/navOn_06.png" alt="Contact" name="Image16" width="133" height="70" border="0" id="Image16" /></a></h1>
</div>
<div id="mainContent"><!-- InstanceBeginEditable name="area1" -->


<p align="left"><img src="images/quote_header.jpg" width="765" height="234" /></p>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="area2" -->
<form name="frm" action="/cgi-bin/FormMail.quoteform.pl" method="post" enctype="application/x-www-form-urlencoded" onsubmit="return validate(frm)">
<input type=hidden name="formmail_mail_email" value="jenny@marketingexpertsinc.com">
<h3>Get A Quote </h3>
<span class="paragraphcopy">Please take a moment to fill out this basic information, and one of our representatives will contact you with a quote.</span>
<table width="756" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<th colspan="2" scope="row"><div align="left">Contact Information</div></th>
<th><div align="right">Job Details</div></th>
<th>&nbsp;</th>
</tr>
<tr>
<td width="135" bgcolor="#CCCCCC" scope="row"><label for="label"> </label>
<div align="right">Name</div></td>
<td width="212" align="left" valign="bottom"><div align="left">
<label for="Name"></label>
<input type="text" name="Name" id="Name" />
</div></td>
<td width="137" bgcolor="#CCCCCC"><label for="Quantity">
<div align="right">Quantity</div>
</label></td>
<td width="207"><input type="text" name="Quantity" id="Quantity" /></td>
</tr>
<tr>
<td height="49" bgcolor="#CCCCCC" scope="row"><div align="right">
<label for="Company Name"></label>
<label for="label">Company Name</label>
</div></td>
<td align="left" valign="bottom"><label for="Company Name"></label>
<input type="text" name="Company Name" id="Company Name" /></td>
<td bgcolor="#CCCCCC"><label for="Type of Mailing">
<div align="right">Type of Mailing</div>
</label></td>
<td><select name="Type of Mailing" id="Type of Mailing">
<option value="Letter">Letter</option>
<option value="Postcard">Postcard</option>
<option value="Other">Other</option>
</select></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" scope="row"><div align="right">
<label for="Address">Street Address</label>
</div></td>
<td align="left" valign="bottom"><input type="text" name="Address" id="Address" /></td>
<td bgcolor="#CCCCCC"><label for="pages">
<div align="right">Pages (Letter Only)</div>
</label></td>
<td><select name="Pages" id="Pages">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" scope="row"><div align="right">
<label for="label">City</label>
</div></td>
<td align="left" valign="bottom"><label for="City"></label>
<input type="text" name="City" id="City" /></td>
<td bgcolor="#CCCCCC"><label for="color">
<div align="right">Color</div>
</label></td>
<td><select name="Color" id="Color">
<option value="B&W">Black and White</option>
<option value="Color">Color</option>
</select></td>
</tr>
<tr>
<td height="32" bgcolor="#CCCCCC" scope="row"><div align="right">
<label for="label">State</label>
</div></td>
<td align="left" valign="bottom"><label for="State"></label>
<select name="State" id="State">
<option value="AK">AK</option>
<option value="AL">AL</option>
<option value="AR">AR</option>
<option value="AZ">AZ</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DC">DC</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="IA">IA</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="MA">MA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MO">MO</option>
<option value="MS">MS</option>
<option value="MT">MT</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="NE">NE</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NV">NV</option>
<option value="NY">NY</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WI">WI</option>
<option value="WV">WV</option>
<option value="WY">WY</option>
</select> </td>
<td><div align="right">
<input type="Submit" name="Submit" value="Submit" />
</div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td bgcolor="#CCCCCC" scope="row"><div align="right">Zipcode</div></td>
<td align="left" valign="bottom"><label for="Zipcode"></label>
<input type="text" name="Zipcode" id="Zipcode" /></td>
<td colspan="2" rowspan="4">&nbsp;</td></tr>
<tr>
<td bgcolor="#CCCCCC" scope="row"><div align="right">Business Telephone</div></td>
<td align="left" valign="bottom"><label for="Phone"></label>
<input type="text" name="Phone" id="Phone" /></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" scope="row"><div align="right">Fax Number</div></td>
<td align="left" valign="bottom"><label for="fax"></label>
<input type="text" name="Fax" id="Fax" /></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" scope="row"><div align="right">
<label for="label">Email Address</label>
</div></td>
<td align="left" valign="bottom"><label for="Email"></label>
<input type="text" name="Email" id="Email" /></td>
</tr>
<tr>
<th scope="row"><div align="right"></div></th>
<td align="left" valign="bottom">&nbsp;</td>
<td>&nbsp;</td>
<td><map name="getaquote" id="getaquote">
<area shape="rect" coords="15,155,125,190" href="quoteform.html" target="_self" alt="Quote" />
</map> </td>
</tr>
<tr>
<th scope="row"><div align="right"></div></th>
<td align="left" valign="bottom">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row"><div align="right"></div></th>
<td align="left" valign="bottom">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</form>
<p>&nbsp;</p>
<!-- InstanceEndEditable -->
<!-- end #mainContent --></div>
<div id="footer">
<p align="left"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/FooterON1.gif',1)"><img src="images/footerOFF1.gif" alt="Home" name="Image10" width="71" height="24" border="0" id="Image10" /></a><a href="quoteform.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/FooterON2.gif',1)"><img src="images/footerOFF2.gif" alt="Quote" name="Image11" width="91" height="24" border="0" id="Image11" /></a><a href="liveChat.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','images/FooterON3.gif',1)"><img src="images/footerOFF3.gif" alt="Live Chat" name="Image12" width="73" height="24" border="0" id="Image12" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/FooterON4.gif',1)"><img src="images/footerOFF4.gif" alt="Phone" name="Image13" width="91" height="24" border="0" id="Image13" /></a><img src="images/FooterON5.gif" width="464" height="24" />
<p align="left">
<p align="left">
</div>
<!-- end #container --></div>
</body>
<!-- InstanceEnd --></html>
emmerse
04-01-2008, 03:35 AM
this will be very vague, but here goes.

for the version we use, you'll need a background .png, the captcha.php file, a true type font to create the letters out of and the action file for the form (submit.php for example).

the background.png is simply uploaded along with the font - these are not actually referred to in the document. you might want to customize the png with the clients' logo or something though.

in your form, you'll need an input field with the name "code". The captcha.php will look for this field, compare the letters it generates with the entry, and finally match the form session key with the session key stored in the captcha.php file to make a successful match. the captcha file will also have some variables to control the font color and the random lines it generates to confuse bots.

finally, to apply the captcha, you simply need an image tag with the source being the .php and NOT the .png. (ex: <img src="../captcha/captcha.php" alt="" name="captcha" id="captcha" />

I know that's super vague, but with a little research, you might find some good scripts to use. Since ours were created in house, I'm not sure I can just up and send you all the code you need. hope that gets you going on the right path