Beaucoup d’entre vous ont demandé un tutoriel Implémentation d’un captcha dans les formulaires bootstrap; Ici il est. J’ai choisi une solution captcha populaire, celle de Google ReCaptchapour vérifier.

Dans le didacticiel que j’utiliserai un formulaire de contact HTML fonctionnel de mon tutoriel précédent.

Notre formulaire utilisera HTML5 saupoudré de quelques Amorcer Un échafaudage et un validateur JavaScript. Nous allons le soumettre avec AJAX (la page ne se rechargera pas) et traiter les valeurs du formulaire avec PHP.

enfin, Nous vous enverrons un e-mail avec PHP et renvoyez une réponse à la page d’origine, qui sera affichée dans un message d’état au-dessus du formulaire.

Aujourd’hui, je me concentrerai principalement sur le travail avec Captcha. Donc si vous avez manqué mon dernier tutoriel, au moins vous avez un coup d’oeil rapide.

Explorez la démo ou téléchargez les fichiers avec lesquels nous travaillerons. Et nous pouvons commencer tout de suite.

Noter: J’ai déjà mis à jour ce didacticiel vers Bootstrap 4, mais ne vous inquiétez pas si vous utilisez toujours Bootstrap 3 dans votre projet. La version Bootstrap 3 fait également partie du téléchargement.

Démo et liens

démo Telecharger des fichiers Démo Bootstrap 3

Enregistrez votre site

Pour utiliser ReCaptcha, vous devez Enregistrez votre site Web sur Site Web de ReCaptcha première.

Après une inscription réussie, vous recevrez une paire de clés à utiliser avec votre ReCaptcha. Laissez la page ouverte ou copiez les clés dans un fichier texte. nous en aurons besoin bientôt.

HTML

Nous utiliserons le modèle du formulaire de contact du tutoriel précédent, + Nous allons ajouter un élément reCAPTCHA et une entrée cachée à côté pour nous aider avec la validation JavaScript.

Notez ces changements:

  • Remplacez ça data-sitekey Attribut avec la clé de votre site. ReCaptcha apparaît dans ce div – <div class="g-recaptcha" data-sitekey="6LfKURIUAAAAAO50vlwWZkyK_G2ywqE52NU7YO0S"></div>
  • Ajoutez le ReCaptcha JS pour initialiser ReCaptcha sur la page – <script src='https://www.google.com/recaptcha/api.js'></script>
<html>

<head>
    <title>Contact Form Tutorial by Bootstrapious.com</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,500" rel="stylesheet" type="text/css">
    <link href="custom.css" rel="stylesheet" type="text/css">
</head>

<body>

    <div class="container">

        <div class="row">

            <div class="col-xl-8 offset-xl-2">

                <h1>Contact form Tutorial from
                    <a href="http://bootstrapious.com">Bootstrapious.com</a>
                </h1>

                <p class="lead">This is a demo for our tutorial dedicated to crafting working Bootstrap contact form with PHP and AJAX background.
                    At this part, we will add Google's ReCaptcha too.</p>


                <form id="contact-form" method="post" action="contact.php" role="form">

                    <div class="messages"></div>

                    <div class="controls">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="form_name">Firstname *</label>
                                    <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required"
                                        data-error="Firstname is required.">
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="form_lastname">Lastname *</label>
                                    <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required"
                                        data-error="Lastname is required.">
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="form_email">Email *</label>
                                    <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required"
                                        data-error="Valid email is required.">
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="form_phone">Phone</label>
                                    <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="form_message">Message *</label>
                            <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required"
                                data-error="Please, leave us a message."></textarea>
                            <div class="help-block with-errors"></div>
                        </div>


                        <div class="form-group">
                            <div class="g-recaptcha" data-sitekey="6LfKURIUAAAAAO50vlwWZkyK_G2ywqE52NU7YO0S" data-callback="verifyRecaptchaCallback" data-expired-callback="expiredRecaptchaCallback"></div>
                            <input class="form-control d-none" data-recaptcha="true" required data-error="Please complete the Captcha">
                            <div class="help-block with-errors"></div>
                        </div>


                        <input type="submit" class="btn btn-success btn-send" value="Send message">

                        <p class="text-muted">
                            <strong>*</strong> These fields are required. Contact form template by
                            <a href="https://bootstrapious.com/p/bootstrap-recaptcha" target="_blank">Bootstrapious</a>.
                        </p>

                    </div>

                </form>

            </div>
            <!-- /.8 -->

        </div>
        <!-- /.row-->

    </div>
    <!-- /.container-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://www.google.com/recaptcha/api.js"></script>
    <script src="validator.js"></script>
    <script src="contact.js"></script>
</body>

</html>

PHP

En PHP, nous utiliserons Bibliothèque client de Google qui s’occupera de la vérification.

Vous pouvez utiliser compositeur Pour l’installer dans votre projet, téléchargez-le depuis GitHub ou utilisez la version que j’ai dans le Télécharger le package.

Encore une fois, faites attention à ces changements:

  • besoin de la bibliothèque PHP ReCaptcha – require('recaptcha-master/src/autoload.php'); 
  • Entrez votre clé secrète – $recaptchaSecret = 'YOUR_SECRET_KEY';
  • Initialisez la classe avec votre clé secrète – $recaptcha = new ReCaptchaReCaptcha($recaptchaSecret);;
  • envoyer un appel pour valider le ReCaptcha – $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
  • lancer une exception si la validation échoue – if (!$response->isSuccess()) {...}

Le script crée ensuite le message électronique, l’envoie et renvoie une réponse JSON. (Le script est envoyé par AJAX par défaut.)

<?php
// require ReCaptcha class
require('recaptcha-master/src/autoload.php');

// configure
// an email address that will be in the From field of the email.
$from = 'Demo contact form <[email protected]>';

// an email address that will receive the email with the output of the form
$sendTo = 'Demo contact form <[email protected]>';

// subject of the email
$subject="New message from contact form";

// form field names and their translations.
// array variable name => Text to appear in the email
$fields = array('name' => 'Name', 'surname' => 'Surname', 'phone' => 'Phone', 'email' => 'Email', 'message' => 'Message');

// message that will be displayed when everything is OK :)
$okMessage="Contact form successfully submitted. Thank you, I will get back to you soon!";

// If something goes wrong, we will display this message.
$errorMessage="There was an error while submitting the form. Please try again later";

// ReCaptch Secret
$recaptchaSecret="6LfKURIUAAAAAKEPdFXGUiRsQYtEYUnH1-OB5Mgx";

// let's do the sending

// if you are not debugging and don't need error reporting, turn this off by error_reporting(0);
error_reporting(E_ALL & ~E_NOTICE);

try {
    if (!empty($_POST)) {

        // validate the ReCaptcha, if something is wrong, we throw an Exception,
        // i.e. code stops executing and goes to catch() block
        
        if (!isset($_POST['g-recaptcha-response'])) {
            throw new Exception('ReCaptcha is not set.');
        }

        // do not forget to enter your secret key from https://www.google.com/recaptcha/admin
        
        $recaptcha = new ReCaptchaReCaptcha($recaptchaSecret, new ReCaptchaRequestMethodCurlPost());
        
        // we validate the ReCaptcha field together with the user's IP address
        
        $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);

        if (!$response->isSuccess()) {
            throw new Exception('ReCaptcha was not validated.');
        }
        
        // everything went well, we can compose the message, as usually
        
        $emailText = "You have a new message from your contact formn=============================n";

        foreach ($_POST as $key => $value) {
            // If the field exists in the $fields array, include it in the email
            if (isset($fields[$key])) {
                $emailText .= "$fields[$key]: $valuen";
            }
        }
    
        // All the neccessary headers for the email.
        $headers = array('Content-Type: text/plain; charset="UTF-8";',
            'From: ' . $from,
            'Reply-To: ' . $from,
            'Return-Path: ' . $from,
        );
        
        // Send email
        mail($sendTo, $subject, $emailText, implode("n", $headers));

        $responseArray = array('type' => 'success', 'message' => $okMessage);
    }
} catch (Exception $e) {
    $responseArray = array('type' => 'danger', 'message' => $e->getMessage());
}

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $encoded = json_encode($responseArray);

    header('Content-Type: application/json');

    echo $encoded;
} else {
    echo $responseArray['message'];
}

JavaScript

Il y aura quelques changements dans notre JavaScript.

Comme mentionné précédemment, nous allons ajouter deux rappels pour le ReCAPTCHA et modifier la valeur de notre entrée masquée <input class="form-control d-none" data-recaptcha="true">. Lorsque le captcha est validé, il aura une valeur non vide et cette partie du formulaire sera validée.

La deuxième modification de mon didacticiel précédent consiste à réinitialiser le ReCaptcha après avoir soumis le formulaire. Nous ferons cela en les appelant grecaptcha.reset(); Une fonction.

$(function () {

    window.verifyRecaptchaCallback = function (response) {
        $('input[data-recaptcha]').val(response).trigger('change')
    }

    window.expiredRecaptchaCallback = function () {
        $('input[data-recaptcha]').val("").trigger('change')
    }

    $('#contact-form').validator();

    $('#contact-form').on('submit', function (e) {
        if (!e.isDefaultPrevented()) {
            var url = "contact.php";

            $.ajax({
                type: "POST",
                url: url,
                data: $(this).serialize(),
                success: function (data) {
                    var messageAlert="alert-" + data.type;
                    var messageText = data.message;

                    var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                    if (messageAlert && messageText) {
                        $('#contact-form').find('.messages').html(alertBox);
                        $('#contact-form')[0].reset();
                        grecaptcha.reset();
                    }
                }
            });
            return false;
        }
    })
});

Résultat

C’est ça.

Vous devriez avoir un contact de travail Amorcer Formulaire de contact avec ReCaptcha et fond PHP maintenant.

J’espère que vous avez apprécié le didacticiel.

Regarde mon autre Tutoriels Bootstrap ou le mien Freebies Bootstrap.



Source link

Recent Posts