FormIt: Custom reCaptcha Theme (using recaptchaJs parameter)

☆ A M B ☆
183 Posts

lokamaya Reply #1, 15 years, 6 months ago

After one hour or two trying to get custom reCaptcha theme works, I figure out some interesting stuff...

1. #modx->fromJSON required double quote

I just realize that #modx->fromJSON required double quote for every keys and values. Example: {"_key_":"_value_"}. Even single quote did not works.

The following example will NOT works:

//the keys without double quote
&recaptchaJs=`{lang:"[[++cultureKey]]", theme:"custom", custom_theme_widget:"recaptcha_widget"}`

//the keys and values use single quote
&recaptchaJs=`{’lang’:’[[++cultureKey]]’, ’theme’:’custom’, ’custom_theme_widget’:’recaptcha_widget’}`

2. formit.recaptcha_html placeHolder

If we use "custom" theme using recaptchaJs, here some requirement:
1. add textfield "recaptcha_response_field" to the form.
2. [[+formit.recaptcha_html]] placeholder must be after the textfield ~~(or simply after the form)~~ Edited: see the next post for explanation. If we put the placeholder before the texfield (or if "recaptcha_response_field" element did not exist), the javascript will return error.

See the example below:
--complete customization instructions can be found at: http://code.google.com/apis/recaptcha/docs/customization.html

[[!FormIt? 
   &hooks=`recaptcha` 
   &recaptchaJs=`{"lang":"[[++cultureKey]]", "theme":"custom", "custom_theme_widget":"recaptcha_widget"}`
]]

<form>
<!-- DIV ID="recaptcha_widget" as custom_theme_widget -->
<div id="recaptcha_widget" style="display:none">
   <!-- DIV ID="recaptcha_image" to show captcha image -->
   <div id="recaptcha_image"></div>
   <!-- ADD TEXTFIELD: "recaptcha_response_field" -->
   <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
   <!-- FormIt RESPONSE ERROR -->
   <span class="error">[[!+fi.error.recaptcha]]</span>
   <!-- Add a:link to reload captcha -->
   <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
</div>
<form>
<!-- FormIt recaptcha_html placeHolder -->
[[!+formit.recaptcha_html]]

Cheers,

zaenal.lokamaya

☆ A M B ☆
183 Posts

lokamaya Reply #2, 15 years, 6 months ago

Sorry, there is a flaw in previous example, particularly about the position of placeholder that is outside the form. The right one should be directly after "recaptcha_response_field" textfield (inside the form).

EXAMPLE UPDATED...

[[!FormIt? 
   &hooks=`recaptcha` 
   &recaptchaJs=`{"lang":"[[++cultureKey]]", "theme":"custom", "custom_theme_widget":"recaptcha_widget"}`
]]

<form>
<!-- DIV ID="recaptcha_widget" as custom_theme_widget -->
<div id="recaptcha_widget" style="display:none">
   <!-- DIV ID="recaptcha_image" to show captcha image -->
   <div id="recaptcha_image"></div>
   <!-- ADD TEXTFIELD: "recaptcha_response_field" -->
   <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
   <!-- FormIt RESPONSE ERROR -->
   <span class="error">[[!+fi.error.recaptcha]]</span>
   <!-- FormIt recaptcha_html placeHolder -->
   [[!+formit.recaptcha_html]]
   <!-- Add a:link to reload captcha -->
   <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
</div>
<form>

Note: When we use "custom" theme, the placeholder will generate the following syntax:

<script type="text/javascript">var RecaptchaOptions = {"theme":"custom", "lang":"en", "custom_theme_widget":"recaptcha_widget"};</script>
<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=my_public_key"></script>
<noscript>
<iframe src="http://api.recaptcha.net/noscript?k=my_public_key" height="" width="" frameborder="0" style="width: px; height: px;"></iframe>

<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>

Basically wherever we put placeholders after the textfield, reCAPTCHA will works as long as javascript is enabled. But when the browser does not support javascript or javascript is disabled, the position of the placeholder will be significant because it will use the "noscript" tag.

Cheers,

zaenal.lokamaya

☆ A M B ☆
183 Posts

lokamaya Reply #3, 15 years, 6 months ago

Workaround for reCaptha "custom" theme, by wrapping FormIt snippet inside other snippet (see the code below).

Now we have...
- reCaptcha script will be injected to the end of the HTML body and removed from "formit.recaptcha_html" placeHolder;
- edited "formit.recaptcha_html" placeHolder: now only contain ’default’ noscript tag. Gives us the flexibility to put this placeholder anywhere inside the form.
- new placeHolder: "formit.noscript" as alternate for "formit.recaptcha_html" placeHolder. This placeHolder will tell user to enable Javascript.

Simply duplicate the FormIt snippet to FormItCustom (or to any name we want), then edit that snippet and replace it with the following code.

<?php
/**
 * FormItCustom snippet: Based on FormIt
 *
 * register javascript hook and add "formit.noscript" placeHolder.
 *
**/
$modx->runSnippet('FormIt', $scriptProperties);
$recaptcha_html = $modx->getPlaceholder('formit.recaptcha_html');

if (!empty($recaptcha_html)) {
    if (preg_match("@([\s\S]*)?<noscript[^>]*?>([\s\S]*)?<\/noscript>@im", $recaptcha_html, $matches)) {
        $modx->regClientScript($matches[1]);
        $modx->setPlaceholder('formit.recaptcha_html','<noscript>'.$matches[2].'</noscript>');
        $modx->setPlaceholder('formit.noscript', '<noscript>Javascript required! Either javascript is disabled or you use inappropriate browser.</noscript>');
    }
}
return '';

And we call this snippet as usual, except now we use FormItCustom.

[[!FormItCustom?
&hooks=`recaptcha`
&recaptchaJs=`{"lang":"[[++cultureKey]]", "theme":"custom", "custom_theme_widget":"recaptcha_widget"}`
]]

zaenal.lokamaya

2,877 Posts

mrhaw Reply #4, 11 years, 5 months ago

Hidden gem! Thanks for sharing!!!!

@hawproductions | http://mrhaw.com/

Infograph: MODX Advanced Install in 7 steps:
http://forums.modx.com/thread/96954/infograph-modx-advanced-install-in-7-steps

Recap: Portland, OR (PDX) MODX CMS Meetup, Oct 6, 2015. US Bancorp Tower
http://mrhaw.com/modx_portland_oregon_pdx_modx_cms_meetup_oct_2015_us_bancorp_tower