Question

我有一个带有Bootstrap Validador的联系表，现在我的客户想添加一个Recaptcha。该站点是使用Bootstrap 3开发的，联系表使用Bootstrap验证程序。该表单已经验证了字段，因此除非所有字段都通过JS正确填写，否则它不会被发送，因此我没有向PHP添加任何验证，因为所有字段均由我的js之前检查过，然后触发PHP。我需要使用G-recaptcha来执行此操作，但是我不知道如何将其添加到我的代码中。有人可以帮助我吗？

这是我的HTML表单和与联系表单有关的脚本：

<body>
<div class="seis-cols-izq col-md-6 col-sm-6 col-xs-12">
            <form class="form-horizontal" action="php/contacto.php" method="post"  id="contact_form">
                <fieldset>
                    <div class="form-group">
                        <label class="col-md-4 control-label">
                            Nombre
                        </label>  
                        <div class="col-md-8 inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                <input  name="name" placeholder="Tu nombre" class="form-control"  type="text">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-4 control-label" >Empresa</label> 
                        <div class="col-md-8 inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-briefcase"></i></span>
                                <input name="company" placeholder="Tu empresa" class="form-control"  type="text">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-4 control-label forma">E-Mail</label>  
                        <div class="col-md-8 inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                                <input name="email" placeholder="tucorreo@mail.com" class="form-control"  type="text">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-4 control-label">Teléfono</label>  
                        <div class="col-md-8 inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                                <input name="phone" placeholder="(55)1234-5678" class="form-control" type="text">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-4 control-label">Tu comentario</label>
                        <div class="col-md-8 inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                                <textarea rows="4" class="form-control" name="comment" placeholder="Cuéntanos cómo podemos ayudarte:"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Success message -->
                    <div class="alert alert-success" role="alert" id="success_message"><span class="bold">¡Listo!</span> Tu mensaje fue enviado, en breve nos pondremos en contacto contigo.</div>

                    <!-- Button -->
                    <div class="form-group">
                        <label class="col-md-12 control-label"></label>
                        <div class="col-md-12">
                            <button type="submit" class="btn btn-contacto">Enviar</button>
                        </div>
                    </div>
                </fieldset>
            </form>

        </div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
    <script src="js/index.js"></script>

</body>
</html>

这是验证的JS：

$(document).ready(function() {
    $('#contact_form').bootstrapValidator({

        submitHandler: function(validator, form, submitButton) {
        $('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
                $('#contact_form').data('bootstrapValidator').resetForm();

            var bv = form.data('bootstrapValidator');
            // Use Ajax to submit form data
            $.post(form.attr('action'), form.serialize(), function(result) {
                console.log(result);
            }, 'json');
        },

        fields: {
            name: {
                validators: {
                        stringLength: {
                        min: 4,
                        message: 'Este campo debe tener al menos 4 caracteres'
                    },
                        notEmpty: {
                        message: 'Por favor, indícanos tu nombre'
                    }
                }
            },
             company: {
                validators: {
                     stringLength: {
                        min: 2,
                        message: 'Este campo debe tener al menos 2 caracteres'
                    },
                    notEmpty: {
                        message: 'Por favor, dínos el nombre de tu empresa'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'Necesitamos una dirección de correo donde contactarte'
                    },
                    emailAddress: {
                        message: 'Tu dirección de correo no es válida'
                    }
                }
            },
            phone: {
                validators: {
                    notEmpty: {
                        message: 'Por favor, proporciónanos tu teléfono'
                    },
                    phone: {
                        country: 'MX',
                        message: 'Incluye un número de teléfono válido de 10 dígitos'
                    }
                }
            },

            comment: {
                validators: {
                      stringLength: {
                        min: 10,
                        max: 200,
                        message:'Tu comentario debe contener entre 10 y 200 caracteres'
                    },
                    notEmpty: {
                        message: 'Por favor, incluye tu comentario'
                    }
                }
            },
        }
    })
});

还有我的PHP：

<?php
$EmailFrom = "contacto@mail.mx";
$EmailTo = "hola@mail.mx";
$Subject = "Nuevo comentario en el website";
$name = Trim(stripslashes($_POST['name'])); 
$company = Trim(stripslashes($_POST['company'])); 
$email = Trim(stripslashes($_POST['email'])); 
$phone = Trim(stripslashes($_POST['phone'])); 
$comment = Trim(stripslashes($_POST['comment'])); 

// prepare email body text
$Body = "";
$Body .= "Nombre: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Empresa: ";
$Body .= $company;
$Body .= "\n";
$Body .= "E-mail: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Teléfono: ";
$Body .= $phone;
$Body .= "\n";
$Body .= "Comentario: ";
$Body .= $comment;
$Body .= "\n";

// send email 
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");

// redirect to success page 
if ($success){
    echo "<h2>¡Gracias! Recibimos tu mensaje</h2>";
}
else{
    echo "<h2>Lo sentimos, hubo un error, inténtalo nuevamente</h2>";
}
?>

希望有人可以帮助我。

Answer 1

使用js文件 https://www.google.com/recaptcha/api.js'）}}“> 也可以点击此链接。这对我来说很好： https://www.freecodecamp.org/news/build-a-bootstrap-form-with-recaptcha-and-php-backend-for-emails-in-30-minutes-17964a374819/

需要在Bootstrap验证程序联系表中添加Recaptcha

1 个答案: