[2.x] [2.8] Multiple Formulaire avec des recaptcha Invisible

Bonjour,
cela fait environ 4/5 Mois que je cherche sans succès le moyen de faire fonctionner des recaptcha de type invisible sur 2(ou plus) formulaires.
Pour ce qui est de la mise en place ainsi que le fonctionnement du Captcha pour un seul formulaire dans la page je n'ai aucun problème.
Hors dès que je rajoute un deuxième formulaire sur la page avec un recaptcha invisible, cela crée une boucle sans fin de rechargement de page.

Emplacement de mon premier Formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="myModal"  data-overlay="false" class="reveal-modal popup " data-animate="fade-in fade-out" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
            <div class="row" style="padding-left:30px;">
                <div class="small-12 columns small-centered">
                    <h2 id="modalTitle">{{'title.popup'|trans({}, '30_place')| raw }}</h2>
                    <div class="subtitlepopup">
                        <p>{{'text.popup'|trans({}, '30_place')| raw }}</p>
                    </div>
                    <div class="row">
                        <div class="small-12 medium-7 large-5 columns newsletterPopup small-centered">
                                {{ render(controller('FrontendBundle:Menus:newsletterPopup', {'uri': app.request.uri})) }}
                        </div>
                    </div>
                </div>
            </div>
            <a class="close-reveal-modal" aria-label="Close" onclick="essaie()" >×</a>
        </div>

Premier Formulaire

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form id="newsletter-popup" method="POST" action="{{path('newsletter_form', {'_locale': app.request.locale, 'uri': uri})}}">
    <div class="row">
        <div class="columns small-centered">
            {{form_widget(form.email,{ 'attr': {'class': 'emailPopup'}})}}
            {{form_errors(form.email)}}
        </div>
    </div>
    {{ form_rest(form)}}
    <div class="row">
        <div class="column small-centered">
        <input id="buttonnews" type="submit" value="{{'button.send'|trans({}, '30_place')|upper}}" class="buttonPopupNew button"/>
        <div id="recaptchaNewsletterPopup"
        class="g-recaptcha"
        data-badge="bottomleft"
        data-sitekey="ma_clé"
        data-callback="onSubmitPopup"
        data-size="invisible"
            ></div>
        </div>
    </div>
</form>

Second Formulaire en bas de page

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<form method="POST" action="{{path('newsletter_form', {'_locale': app.request.locale, 'uri': uri})}}" id="newsletter-form">
    {{form_widget(form.email)}}
    {{form_errors(form.email)}}
    {{ form_rest(form)}}
    <input type="submit" value="" id="submitnewsletter" />
        <div id="recaptchaNewsletter"
        class="g-recaptcha"
        data-sitekey="ma_clé"
        data-callback="OnSubmit"
        data-badge="bottomleft"
        data-size="invisible"></div>
</form>

Mon fichier d'affichage des div recaptcha est lier grace à ce code là !

Code:

<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script>

Et mon fichier permettant d'afficher les recaptcha correspond à cela :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var sitekeydummy ='6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI';
var loaded = [];
var reload = ['recaptchaRegistration'];
 
var CaptchaCallback = function(){
    addCaptchaNewsletter('recaptchaNewsletter');
    addCaptchaNewsletter('recaptchaNewsletterPopup');
};
 
function addCaptchaNewsletter(id) {
    console.log(id);
    widgetId = grecaptcha.render(id, {
        'sitekey' : sitekeydummy
    });
    grecaptcha.execute(widgetId);
}

Je ne vois plus de solutions.
Est-ce que l'un d'entre vous aurait une idée ?
PS :

Citation:

Je suis sous symfony 2.8

Citation:

Si vous avez besoin de plus d'informations n'hésitez pas !