TOPIC:

Including reCaptcha in forms 13 years 9 months ago #3214

  • Topic Author
  • Mike
  • Visitor
  • Visitor
I am trying to replace the security image in the sample Contact Form with the reCaptcha control.

I have created the following piece in the FF library.

function ff_showreCaptcha()
{
require_once('recaptchalib.php');
$publickey = "..."; // you got this from the signup page
echo recaptcha_get_html($publickey);
}

I then added the following line to the piece called ff_InitLib.

if (!function_exists('ff_showreCaptcha')) $this->execPieceByName('ff_showreCaptcha');

I then changed the html in the static text/html control secimage to the following html:

<?php return ff_showreCaptcha(); ?>

The reCaptcha is displayed correctly but when I view the HTML source in the browser the javascript is outside the associated <div> ff_div579 so I can't position it.

<div id="ff_div578" style="position:absolute;z-index:8;left:245px;top:322px;"><input id="ff_elem578" size="5" maxlength="5" type="text" name="ff_nm_seccode[]" value="" class="inputbox"/></div>
<script type="text/javascript" src=" api.recaptcha.net/challenge?k= ...">

<noscript>
<iframe src=" api.recaptcha.net/noscript?k= ..." height="300" width="500" frameborder="0">

<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript><div id="ff_div579" style="position:absolute;z-index:9;left:10px;top:324px;"></div>
<div id="ff_div580" style="position:absolute;z-index:10;left:87px;top:325px;">Enter security code:</div>

Any idea how I can get around this issue?

Thanks,

Mike

Please Log in or Create an account to join the conversation.

Re:Including reCaptcha in forms 13 years 9 months ago #3217

  • Topic Author
  • Mike
  • Visitor
  • Visitor
I've figured it out so for anyone else who's interested here's what I did.

Modified the file recaptchalib.php to include <div>'s and an exatra parameter that allows a suffix to be appended to the <div> name meaning you can use different <div>'s to have different positions for the reCaptcha control on different forms.

/**
* Gets the challenge HTML (javascript and non-javascript version).
* This is called from the browser, and the resulting reCAPTCHA HTML widget
* is embedded within the HTML form it was called from.
* @param string $pubkey A public key for reCAPTCHA
* @param string $error The error given by reCAPTCHA (optional, default is null)
* @param boolean $use_ssl Should the request be made over ssl? (optional, default is false)
* @param int $div_num Specifys a suffix to allow different divs to be used for layout (optional, default is zero)

* @return string - The HTML to be embedded in the user's form.
*/
function recaptcha_get_html ($pubkey, $error = null, $use_ssl = false, $div_num = 0)
{
if ($pubkey == null || $pubkey == '') {
die ("To use reCAPTCHA you must get an API key from <a href=' recaptcha.net/api/getkey '> recaptcha.net/api/getkey ");
}

if ($use_ssl) {
$server = RECAPTCHA_API_SECURE_SERVER;
} else {
$server = RECAPTCHA_API_SERVER;
}

$errorpart = "";
if ($error) {
$errorpart = "&error=" . $error;
}
return '<div id="recaptcha_' . $div_num . '"><script type="text/javascript" src="'. $server . '/challenge?k=' . $pubkey . $errorpart . '"></script>

<noscript>
<iframe src="'. $server . '/noscript?k=' . $pubkey . $errorpart . '" height="300" width="500" frameborder="0"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript></div>';
}

Next I modified the piece in the FF library called ff_showreCaptcha(). I added a parameter to allow the suffix to the <div> name to be specified. eg. Passing 0 refers to the <div> labelled #recaptcha_0 in the .css file. I also make sure to supply all the function parameters when calling recaptcha_get_html().

function ff_showreCaptcha($div_num)
{
require_once('recaptchalib.php');
$publickey = "..."; // you got this from the signup page
echo recaptcha_get_html($publickey, null, false, $div_num);
}

I then changed the html in the static text/html control secimage to the following html:

<?php return ff_showreCaptcha(0); ?>

And finally created the <div> in the .css file:

#recaptcha_0 {
padding-top: 5px;
position: absolute;
top: 50px;
z-index: 100;
}

Hopefully that's covered everything!

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
Moderators: ForumSupport
Time to create page: 0.041 seconds

BreezingForms Pro 1.4.7 for WordPress Released!

Available in the membership section.

September Discount!

Massive discounts on all subscriptions!

Get Your Subscription Here

Quick Links

Downloads

BreezingForms

ContentBuilder

BreezingCommerce

Templates

Documentation

BreezingForms

ContentBuilder

BreezingCommerce

Apprendre BreezingForms (French Community)

Apprendre et maîtriser BreezingForms par des tutoriels et exemples, le tout en français

breezingforms.eddy-vh.com

Questions et réponses sur les forums de l'AFUJ

AFUJ

Special Offer

Summer Sale! All subscriptions at a special price!

Includes prio support, all of our current and future Joomla!® extensions and Joomla!® templates for the duration of your membership.

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!