Difference between revisions of "Captcha"
| Line 1: | Line 1: | ||
So far this is only a linux Captcha for php | So far this is only a linux Captcha for php | ||
| − | NOTE: If doing a wordpress captcha the easiest way is to | + | NOTE: If doing a wordpress captcha the easiest way is to use Really Simple CAPTCHA if the forms plugin supports it or using Recaptcha if supported by plugin. |
== Grab The Captcha Files== | == Grab The Captcha Files== | ||
Revision as of 19:51, 14 October 2014
So far this is only a linux Captcha for php
NOTE: If doing a wordpress captcha the easiest way is to use Really Simple CAPTCHA if the forms plugin supports it or using Recaptcha if supported by plugin.
Contents
Grab The Captcha Files
You can get the files here if you don't have your own copy somewhere.
We are using Securimage that will allow customization of color but we dont offer that we will make the changes for it if need be.
Grab The Html
If in a Website Builder pretty much we will be making a copy of the page into a .php file.
You may need to inspect element in google and copy the form code from there to insert it into the php file as it usually gets generated from java script, I usually copy the entire table script example below
<!--- I usually take out this div or at least take out the ID --->
<div id="something">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody><tr> <td align="left" valign="top" width="45%"> </td> <td align="left" valign="top" width="10%">
<!--- Even though it does not have it I usually add a name myForm to the form tag as an attribute --->
<form id="component form" class="custom_form" method="post" action="http://domain.com/verify.php" onsubmit="return validateForm()">
<div class="form-element-wrapper" id="name-id">
<label for="name" class="form-element-label" style="">Name</label>
<table class="personName-large" cellpadding="0" cellspacing="0"><tbody>
<tr><td class="FirstName">
<!-- I personally Like to make the inputs spaced out so its easier to see, and also if anyone views source it will look better organized at least as well. -->
<input class="form-element form-element-size-full valid" type="text" name="name-FirstName" value="" maxlength="">
<label for="name-FirstName" class="personName-label" style="font-size:smaller;">First Name<span style="color:#cc0000;font-weight:normal" valign="top">*</span></label></td><td class="LastName">
<input class="form-element form-element-size-full" type="text" name="name-LastName" value="" maxlength=""><label for="name-LastName" class="personName-label" style="font-size:smaller;">
Last Name<span style="color:#cc0000;font-weight:normal" valign="top">*</span></label></td></tr></tbody></table></div><div class="form-element-wrapper" id="Email-id"><label for="Email" class="form-element-label" style="">Email<span style="color:#cc0000;font-weight:normal" valign="top">*</span></label>
<input class="form-element form-element-size-large" type="text" name="Email" value="" maxlength=""></div><div class="form-element-wrapper" id="phone-id">
<label for="phone" class="form-element-label" style="">
Phone number</label>
<input class="form-element form-element-size-large" type="text" name="phone" value="" maxlength="">
</div><div class="form-element-wrapper" id="subject-id"><label for="subject" class="form-element-label" style="">Subject</label>
<input class="form-element form-element-size-large" type="text" name="subject" value="" maxlength="">
</div><div class="form-element-wrapper" id="message-id"><label for="message" class="form-element-label" style="">Message</label>
<textarea rows="8" class="form-element form-element-size-large" name="message"></textarea>
</div><div class="form-element-wrapper" id="submit-id"><div style="text-align: left;">
<input type="submit" class="form-element" name="submit" value="Submit"></div></div>
</form></td> <td align="left" valign="top" width="45%"> </td> </tr> </tbody></table></div>
Bring the Captcha up
The next thing now is inputting the php captcha right before the submit button with the following code, Also need the require once for the script
<!---This will be at the top of the form page and the verify.php --->
<?
require_once './securimage/securimage.php';
?>
<!---And as well the captcha put near the submit --->
<div>
<?php echo Securimage::getCaptchaHtml() ?>
</div>
Verifying The Captcha
Top of Page
After this we will usually try and integrate with a previous verify form if they have one themselves or a thank you page if they have one.
Or we will just recopy the php page we just made and take out the form and replace it with the verifying information
<?
$fnam = $_POST['FirstName'];
$lnam = $_POST['LastName'];
$comment = $_POST['message'];
$subject = $_POST['subject'];
$number = $_POST['phone'];
//check for the email input name for case sensitivity
$email = $_POST['email'];
$image = new Securimage();
if ($image->check($_POST['captcha_code']) == true) {
echo "Thank you For Contacting us";
//formats the message
$message = "First Name and Last Name: " . $fnam . " " . $lnam . "\n Email: " . $email . "\n Phone: " . $number . "\n Message: " . $comment;
// message lines should not exceed 70 characters (PHP rule), so wrap it
$message = wordwrap($message, 70);
// send mail
// make sure to change email to a valid email
mail("[email protected]",$subject,$message,"From: $from\n");
} else {
echo "Sorry, wrong code.<br />";
echo "To go back <a href='http://domain.com/contact-us.php'>click here</a>";
}
?>
Form Validation
After you make sure that the captcha itself and email is sucessfully working with the captcha working correctly its on to field validation if required This is the main reason you need to name the form to something so javascript can check it out. The following code is usually the base of most validations and can always be added to as well. I usually throw it near the top of the header.
<script>
function validateForm() {
//make sure the form has the name of myForm
var x = document.forms["myForm"]["FirstName"].value;
var y = document.forms["myForm"]["LastName"].value;
//check case sensitive email in the name
var z = document.forms["myForm"]["email"].value;
var atpos = z.indexOf("@");
var dotpos = z.lastIndexOf(".");
if (x == null || x == "") {
alert("First name must be filled out");
return false;
}
else if (y==null || y=="") {
alert("Last name must be filled out");
return false;
}
else if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=z.length) {
alert("Not a valid e-mail address");
return false;
}
}
</script>
Customization
Top of Page
The next thing would be customization, You can change it to a mathematical captcha or keep it as text, you can also change the lines below between 300 to 320 in the securimage.php file, the one for Mathematics would be line 542
public $image_bg_color = '#0044FF';
/**
* The color of the captcha text
* @var Securimage_Color
*/
public $text_color = '#00aa00';
/**
* The color of the lines over the captcha
* @var Securimage_Color
*/
public $line_color = '#707070';
/**
* The color of the noise that is drawn
* @var Securimage_Color
*/
public $noise_color = '#707070';
Redirect or Rename
Pretty much everything from here is really finished except either renaming the files and links necessary if its a custom page, or if its a website builder account all you need to do is the redirect for the contact-us.html page. The htaccess file below
Redirect 301 /contact-us.html /contact-us.php
