Custom subscription form with Ajax & recaptcha : can't subscribe

Hello,
I try to integrate in my own webpage a “simplified” form with some fields of the custom subscription page I made, using reCaptcha plugin of PHPList. I can’t manage to make it work : the form is never submitted. And I think it’s because I don’t know how to check the reCaptcha using the PRIVATE key… How can I do that ?

  1. in my_webpage.php :
<div class="newsletter">
    <form method="post" action="http://www.mywebsite.be/newsletter/?p=asubscribe&id=1" name="form" id="subscribe">
        <label class="mail">E-mail</label> Inscrivez ici votre adresse email :<br>
        <input class="subscriberequiredField subscribeemail" id="subscribeemail" name="email" type="text" placeholder="adresse@mail.com">

        <input type="hidden" name="htmlemail" value="1" />
        <div style="display:none">
            <input type=text name="emailconfirm" value="" />
            <input type="text" name="attribute2" class="attributeinput" size="40" value="nom inconnu" />
            <input type="text" name="attribute6" class="attributeinput" size="40" value="prénom inconnu" />
            <input type=hidden name="subscribe" value="Subscribe">
            <input type="checkbox" name="list[16]" value="signup" checked />
            <input type="checkbox" name="list[17]" value="signup" checked />
            <input type="text" name="VerificationCodeX" value="" size="20">
        </div>

        <div class="g-recaptcha" data-sitekey="MyPublicreCaptchaKey" data-size="normal" data-theme="light"></div>
        <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=fr"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("form[name=form]").submit(function(ev) {
                    if (grecaptcha.getResponse() != "") {
                        return true;
                    }
                    alert("Please complete the reCAPTCHA");
                    return false;
                });
            });
        </script>
        <input id="submit" type="submit" name="subscribe" value="s'inscrire !" onClick="return fillConfirmationField(form);">
    </form>
</div>
  1. I have the following script :
$("form#subscribe").submit(function(evt) {
evt.preventDefault();

$("form#subscribe .subscribeerror").remove();
var s = !1;
if ($(".subscriberequiredField").each(function() {
        if ("" == jQuery.trim($(this).val())) {
            var r = $(this).prev("label").text();
            $(this).parent().append('<span class="subscribeerror">Merci d\'introduire votre' + r + " ci-dessus...</span>"),
                $(this).addClass("inputError"),
                s = !0,
                $("form#subscribe input.subscribeemail").attr('placeholder', 'tapez ICI votre adresse email svp'),
                $("form#subscribe input.subscribeemail").focus()
        } else if ($(this).hasClass("subscribeemail")) {
            var e = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            if (!e.test(jQuery.trim($(this).val()))) {
                var r = $(this).prev("label").text();
                $(this).parent().append('<span class="subscribeerror">Votre ' + r + " paraît incorrect...</span>"), $(this).addClass("inputError"), s = !0
            }
        }
    }), !s) {
    $("form#subscribe input.submit").fadeOut("normal", function() {
        $(this).parent().append("")
    });
    var r = $(this).serialize();


    $.ajax({
        type: 'POST',
        url: $(this).attr("action"),
        crossDomain: true,
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        async: false,
        data: r,
        success: function(data) {
            //alert("OK : "+data);
            $("form#subscribe").slideUp("fast", function() {
                $(this).before('<div class="subscribesuccess">Merci !<br><span>Un email vous a été envoyé</span> pour confirmer votre inscription (vérifiez votre dossier "spam")</div>')
            });
        },
        error: function(jqXHR, exception) {
            if (jqXHR.status === 0) {
                tech = " (connexion)"; //alert('Not connect.\n Verify Network.');
            } else if (jqXHR.status == 404) {
                tech = " (err404)"; //alert('Requested page not found. [404]');
            } else if (jqXHR.status == 500) {
                tech = " (err500)"; //alert('Internal Server Error [500].');
            } else if (exception === 'parsererror') {
                tech = " (parseerror)"; //alert('Requested JSON parse failed.');
            } else if (exception === 'timeout') {
                tech = " (timeout)"; //alert('Time out error.');
            } else if (exception === 'abort') {
                tech = " (aborted)"; //alert('Ajax request aborted.');
            } else {
                tech = " (jqXHR.responseText)"; //alert('Uncaught Error.\n' + jqXHR.responseText);
            }

            $("form#subscribe").slideUp("fast", function() {
                $(this).before('<div class="subscribeerror">Un problème est survenu' + tech + '. Envoyez nous un petit email à <a href="mailto:contact@mywebsite.com?subject=inscription à la newsletter ilia&body=Bonjour, voici mon adresse email pour recevoir les newsletters d\'ilia : [votre email ici]. Merci !">contact@mywebsite.com</a> svp. Nous prendrons note de votre adresse.</div>')
            });
        }
    });
    //alert("submit END");

}
return !1
})
});

Thank you very much for your help !

T.

1 Like

Anyone to help me with captcha integration on a custom form ?