提出ボタンの後に表示されるGoogleのrecaptcha - フォームプラグインをハッキングする

Question

ウェブサイトはwordpressで構築されています。私はリストを複雑にしているため（Aweberサービス）、すでにプラグインを統合して使用する必要がありますそのため、私の加入者は私が使用するリストサービスに行くことができます。

言われているように、私はこのプラグインをいつもハックしなければならないので、サポートが貧弱で何かをする必要があります。そこに他のプラグインはありません。

私は送信ボタンの下にgoogleのrecaptchaを実装することができました。

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

私はそれに適切なCSSを行っています、peachy。

今、私はそれが提出した後にのみapearする必要があります。巨大な問題は、ボタンが作成された場所のコードが埋め込まれているため、作成された場所を把握しようと数え切れないほどの時間を費やすことができません。そのアイデアは傷つきます。しかし、ここで私は要素の検査を経て取得することができ、ボタンのHTMLコードです：

は、[送信]ボタンを：

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

ので代替として、私はこの記事を見つけました：reCAPTCHA - to appear after press submit

私が実装しようとしてきましたそれ：

JS私はちょうど使用することはできません

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

$が何かをオーバーライドしています。私はJavascriptに精通していないので、これに誤りがあると推測できます。私のreCAPTCHAのため

CSS：私は間違って何をやっている

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

？

ウェブサイトへのリンクhttp://juniorgoldreport.com/ - 私が取り組んでいるフォームは、一番上の画面の中心にあります。

Answer 1

jQueryがインストールされていますか？これは、作業から$を防ぐだろう - あなたが、それはまだ動作しない場合は、代わりにこのような$をjQueryのを使用します。

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

あなたはjQueryのを使用していない場合、あなたは純粋な使用する必要があるだろうjavascript。

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

これらのいずれかが役立ちます。

Answer 2

あなたのページをすばやく見れば、jQueryが利用可能であることがわかります。

だから、このような何かが動作することができます：

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

私はなぜあなたがフォーカスイベントを使用しているかわからないが。ここでは、その動作を変更することに決めたときに、複数のイベントを使用することができます。