Как настроить Google Recaptcha v3 с HTML, JS, AJAX и PHP на нескольких формах - PullRequest
Новая
       40

Как настроить Google Recaptcha v3 с HTML, JS, AJAX и PHP на нескольких формах

0 голосов
/ 06 июня 2019

У меня есть контактная форма и форма подписки на рассылку на моей целевой странице.

Я хочу внедрить reCaptcha v3 в ОБА формы.

Мне удалось заставить recaptcha работать с моей контактной формой, но я также хотел бы добавить ее в мою форму подписки на рассылку.

Так что мне было интересно, как мне это сделать?

Ниже приведен мой код для действующей контактной формы и формы для рассылки, на которой я пока еще не реализовал.

Спасибо за ваше время.

index.html - контактная форма 

<!-- contact form -->
<div class="col-md-6 col-pull" data-aos="fade-up">
    <form name="contactForm" id="contactForm" class="form-class thank-you" method="post" action="inc/sendEmail.php" onsubmit="submitForm(); return false;">
        <fieldset>
            <div class="row">
                <div class="col-sm-6 form-field">
                    <input type="text" name="contactName" id="contactName" placeholder="Your name" value="" minlength="2"  required>
                </div>
                <div class="col-sm-6 form-field">
                    <input type="email" name="contactEmail" id="contactEmail" placeholder="Your email address" value="" required>
                </div>
                <div class="col-sm-12 form-field">
                    <input type="text" name="contactSubject" id="contactSubject" placeholder="Subject of your message" minlength="2" required>
                </div>
                <div class="col-sm-12 form-field">
                    <textarea name="contactMessage" id="contactMessage" placeholder="Your message" rows="10" cols="50" minlength="5" required></textarea>
                </div>

                    <input type="hidden" value="" name="recaptchaResponse" id="recaptchaResponse">

                <div class="col-sm-12 form-field center">
                    <input type="submit" name="contactSubmit" id="contactSubmit" class="site-btn" value="Send"></input>
                    <div id="contactStatus" class="submit-loader">.</div>
                </div>
            </div>
        </fieldset>
    </form>
    <!--- contact form ---->

index.html - форма подписки на рассылку 

<!-- newsletter form -->
<div id="mlb2-1343776" class="ml-form-embedContainer ml-subscribe-form ml-subscribe-form-1343776">
        <form class="ml-block-form" action="https://app.mailerlite.com/webforms/submit/h6b1s9" data-code="h6b1s9" method="post" target="_blank">
          <div class="ml-form-formContent horozintalForm">
            <div class="ml-form-horizontalRow">
              <div class="ml-input-horizontal">

                                <div class="col-md-4">
                    <div class="horizontal-fields">
                      <div class="ml-field-group ml-field-name ml-validate-required">
                        <input type="text" class="form-control" data-inputmask="" name="fields[name]" value="" placeholder="First Name">
                      </div>
                    </div>
                                </div>
                                <div class="col-md-5">
                    <div class="horizontal-fields">
                      <div class="ml-field-group ml-field-email ml-validate-email ml-validate-required">
                        <input type="email" class="form-control" data-inputmask="" name="fields[email]" value="" placeholder="Email address">
                      </div>
                    </div>
                                </div>
              </div>
                                    <div class="col-md-1">
                          <div class="ml-button-horizontal">
                            <button type="submit" class="primary site-btn">Subscribe</button>
                            <button disabled="disabled" style="display: none;" type="button" class="loading">
                                            <div class="ml-form-embedSubmitLoad"><div></div><div></div><div></div><div></div></div>
                                            </button>
                          </div>
                                </div>
            </div>
          </div>

          <input type="hidden" name="ml-submit" value="1">
        </form>
      </div>
      <div class="ml-form-successBody row-success" style="display: none">
        <div class="ml-form-successContent">
          <h4>Thank you!</h4>
          <p>You have successfully joined our subscriber list.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  function ml_webform_success_1343776() {
      var $ = ml_jQuery || jQuery;
      $('.ml-subscribe-form-1343776 .row-success').show();
      $('.ml-subscribe-form-1343776 .row-form').hide();
    }
</script>
<script src="https://static.mailerlite.com/js/w/webforms.min.js?url" type="text/javascript"></script>


<!-- newsletter form -->

index.html javascript 

<script src="https://www.google.com/recaptcha/api.js?render=SITEKEY"></script>


    <!--- recaptcha ---->
                <script>
                    grecaptcha.ready(function() {
                        grecaptcha.execute('SITEKEY', {action: 'homepage'}).then(function(token) {
                            //console.log(token);
                            document.getElementById("recaptchaResponse").value = token;

                            });
                        });
                </script>
<!--- recaptcha ---->

script.js 

function _(id) {
return document.getElementById(id);}

function submitForm() {
_("contactSubmit").disabled = true;
_("contactStatus").innerHTML = 'please wait ...';
var formdata = new FormData();
formdata.append("contactName", _("contactName").value);
formdata.append("contactEmail", _("contactEmail").value);
formdata.append("contactSubject", _("contactSubject").value);
formdata.append("contactMessage", _("contactMessage").value);
formdata.append("recaptchaResponse", _("recaptchaResponse").value);

var ajax = new XMLHttpRequest();
ajax.open("POST", "inc/sendEmail.php");
ajax.onreadystatechange = function() {
    if (ajax.readyState == 4 && ajax.status == 200) {
        if (ajax.responseText == "success") {
            _("contactForm").innerHTML = "<h2>Thanks <span>" + _("contactName").value + "</span>, your message has been sent. I'll be in touch shortly</h2>";
        } else {
            _("contactStatus").innerHTML = ajax.responseText;
            _("contactSubmit").disabled = false;
        }
    }
}
ajax.send(formdata);
}

sendEmail.php 

<? php

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST["contactName"]) && isset($_POST["contactEmail"]) && isset($_POST["contactSubject"]) && isset($_POST["contactMessage"]) && isset($_POST["recaptchaResponse"])) {

$name = $_POST["contactName"];
$email = $_POST["contactEmail"];
$sbjct = $_POST["contactSubject"];
$msg = nl2br($_POST["contactMessage"]);
$to = 'example@example.com';
$subject = 'Contact Request From '.$name;
$body = '<h2>Contact Request</h2> <
    h4 > Name: < /h4><p>'.$name.'</p >
    <
    h4 > Email: < /h4><p>'.$email.'</p >
    <
    h4 > Subject: < /h4><p>'.$sbjct.'</p >
    <
    h4 > Message: < /h4><p>'.$msg.'</p >
    ';

$headers = "MIME-Version: 1.0".
"\r\n";
$headers. = "Content-type: text/html; charset=UTF-8".
"\
r\ n ";
$headers. = "From: ".$name.
"<".$email.
">".
"\r\n";


// Build POST request:
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = 'SECRET_KEY';
$recaptcha_response = $_POST["recaptchaResponse"];

// Make and decode POST request:
$recaptcha = file_get_contents($recaptcha_url.
    '?secret='.$recaptcha_secret.
    '&response='.$recaptcha_response);
$recaptcha = json_decode($recaptcha);

// Take action based on the score returned:
if ($recaptcha - > score >= 0.5 && mail($to, $subject, $body, $headers))   {
    echo "success";
} else {
    echo "That did not go to plan.";
}
}
?
>
...