mm-logo-square-150

Modern Magic

webwizards managing your internet presence

Responsive Recaptcha

RSForms Pro has a built in plugin for using recaptcha.  RSForms Pro version 1.4 includes a responsive layout.

rsforms-pro-responsive-layout

However, the included recaptcha plugin is not responsive. In our opinion, recaptcha spam protection is critical for forms, unless you want to spend your day deleting emails and then clearing the submissions in the Joomla backend.

So at the midnight hour, of the last day of user testing, we decided to hack away the styling of RSForms Pro and recaptcha to make it responsive.

You may want to add some CSS styling but we opted for removing everything that wasn't necessary.

Add this code to your template.css or if it has it, a custom.css :

@media (max-width: 444px) {

.recaptchatable #recaptcha_image {
margin: 0 !important;
width: 200px !important;
}
.recaptchatable .recaptcha_r1_c1, .recaptchatable .recaptcha_r3_c1, .recaptchatable .recaptcha_r3_c2, .recaptchatable .recaptcha_r7_c1, .recaptchatable .recaptcha_r8_c1, .recaptchatable .recaptcha_r3_c3, .recaptchatable .recaptcha_r2_c1, .recaptchatable .recaptcha_r4_c1, .recaptchatable .recaptcha_r4_c2, .recaptchatable .recaptcha_r4_c4, .recaptchatable .recaptcha_image_cell {

background: none !important;
}

}

BEFORE
recaptcha-not-responsive
AFTER
recaptcha-css-modification-responsive
Odin Mayland

Owner, designer, dreamer....

google

Login to post comments
Back to top