JQTransform and reCAPTCHA not playing nice

Question

The Problem:

I am working on a site where I wanted to use JQTransform to quickly get a good looking form for a contact page. Also, to avoid the customer getting junk, I decided to add reCAPTCHA. I ran into the issue of JQTransform styles for the textbox causing the elements in the reCAPTCHA to be displaced.

It seemed like the type of problem that would have a simple fix but I struggled with it for a while.

I tried the solution at: JQTransform - Exclude an element from styling?

This did not solve the issue, nor did a few other answers to the "How do you make JQTransform stop JQTransforming an element?" question.

What has produced usable results is adding:

    <script type="text/javascript">
            var RecaptchaOptions = {
                theme: 'clean'
            };
    </script>

This changes the reCAPTCHA to a format that looks better in the form anyway. But it leaves 2 textbox styles. One that is your normal default textbox and another underneath that is the JQTransform rounded corner, light blue on hover/focus textbox.

Then I added:

    $(function () {
        $( "#recaptcha_response_field" ).attr('style', 'border: 0px; padding: 5px; solid #3c3c3c; width: 302px;');
    });

and this alters the style that reCAPTCHA has for the textbox. Now the textbox looks like the other inputs of the form. I am pretty happy with the result.

(I know you're now asking: "Then why are you here?")

The Question:

Is there a way to have JQTransform ignore any input,checkbox,etc that is in the <form></form> by wrapping those in a div?

If I want to use JQTransform with some other plug-in in the future I would like to be able to just drop it in to a div like:

    <div class="donot-jqtransform">
        <?php
            echo printCaptchaPlugin();
        ?>
    </div>

or

    <div class="donot-jqtransform">
        <%= PrintPasswordValidationPlugin() >
    </div>

That way I don't have to worry about what the code brings into the form and it will work and look as intended. That's the idea of having the abstraction in the first place, right? So if I want to switch out reCAPTCHA with another option, all I do is replace code in the printCaptchaPlugin() function and all should be bacon(good) for any form that uses it.

Answer 1

well i've made a new library - csTransPie – basing it on jqtransform – jqtransform is a great library but it really has many problems

I'm creating regular input fields (css styled) and you won't have those problems

https://github.com/pkoretic/csTransPie

It’s a work in progress but even now it’s better than jqtransform (more than half of the css rewritten, many bugs solved, clean css…)

now you can use it per element with just one class!

all suggestions are welcome!

Answer 2

Sorry if it's bad form to pile in on an old answered question, but I found this as I had the same problem.

I didn't want to add another library to my project, so I amended the jqtransform.js to include this line in the TextArea handler (line 221-ish)

if (textarea.parents().hasClass('jqTransformIgnore')) { return; }

I then just had to add the jqtransformIgnore class to the recaptcha div...

<div class="g-recaptcha jqTransformIgnore" data-sitekey="blahblahblah"></div>

... and that did the trick!