Google's recaptcha only to appear after submit button - hacking a form plugin

Question

The website is built with wordpress, and due to the complication of the list I'm using (Aweber services) I have to use a plugin that already has it integrated in so my subscribers can go to the list service I use.

That being said, I have to constantly hack this plugin in order to do anything due to the poor support, and there is NO other plugin out there that can come as close as this.

I've managed to implement google's recaptcha below my submit button.

    <p class="fca_eoi_postbox_0_submit_button_wrapper">{{{submit_button}}}</p>
    <div class="g-recaptcha" data-sitekey="mysitekey"></div>

It apears and I've done the proper CSS to it, peachy.

Now I need it to ONLY apear after they hit submit. Huge problem, the code for where the button is created is buried and and I can't spend countless hours testing trying to figure out where it's created. So that idea is scratched. But here is the button html code I can get via inspecting element:

Submit button:

<input class="fca_eoi_form_button_element" type="submit" value="Stay Informed">

So as an alternative, I found this post: reCAPTCHA - to appear after press submit

I've been trying to implement it:

JS

(function ($) {
$(".fca_eoi_form_input_element").focus(function() {
$(".fca_eoi_form_input_element div[id*='g-recaptcha']").css("display:","inline-block");
});}

I cannot just use the $ as something is overriding it. I'm not that familiar with Javascript, so I can assume there is errors in this.

CSS for my recaptcha:

.g-recaptcha {
margin:0 auto;
display:none;
}

What am I doing wrong?

link to website http://juniorgoldreport.com/ - the form I'm working on is dead center on the top screen.

Answer 1

Do you have jQuery installed? That'd prevent the $ from working - if you do and it still doesn't work, use jQuery instead of $ like this:

jQuery(".fca_eoi_form_input_element").focus(function() {
jQuery(".g-recaptcha").css("display:","inline-block");

If you aren't using jQuery, you'd need to use pure javascript.

var myInput =  document.querySelector(".fca_eoi_form_input_element");
var myCaptcha = document.querySelector(".g-recaptcha");
myInput.onfocus = function() {
  myCaptcha.style.display = "inline-block";
}

Hopefully one of these helps!

Answer 2

A quick look at your page and I can see that jQuery is available.

So something like this can work:

(function($) {
    $(document).ready(function () {
        $(".fca_eoi_form_input_element").on("focus mouseover", function () {
            $(".g-recaptcha").fadeIn();
        });
    });
})(jQuery);

Although I'm not sure why you are using the focus event. You can use multiple events as I am doing here in-case you decide to modify its behaviour.