In questo articolo vediamo come creare un contact form in php con l’ausilio di Bootstrap ed in più andremo ad utilizzare Google ReCaptcha per proteggere il nostro form dallo spam.
Richiamiamo il CSS di Bootstrap dalle CDN, io ho utilizzato i temi (fichissimi !) di Bootswatch che trovate qui https://www.bootstrapcdn.com/bootswatch/ ed il CSS del form.
|
1 2 |
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/united/bootstrap.min.css" rel="stylesheet"> <link href='custom.css' rel='stylesheet' type='stylesheet'> |
Ora le librerie jQuery e Javascript per utilizzare Bootstrap, le API di Google ReCaptcha non chè due file JS per il form stesso
|
1 2 3 4 5 |
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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> |
Il codice HTML del form
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <form id="contact-form" method="post" action="contact.php" role="form"> <div class="messages"></div> <div class="controls"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="form_name">Nome *</label> <input id="form_name" type="text" name="name" class="form-control" placeholder="Il tuo nome *" required data-error="Il nome è richiesto."> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="form_lastname">Cognome *</label> <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Il tuo cognome *" required data-error="Il cognome è richiesto."> <div class="help-block with-errors"></div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="form_email">Email *</label> <input id="form_email" type="email" name="email" class="form-control" placeholder="Il tuo indirizzo email *" required data-error="Indirizzo email non valido."> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="form_phone">Telefono</label> <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Numero di telefono"> <div class="help-block with-errors"></div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label for="form_message">Messagio *</label> <textarea id="form_message" name="message" class="form-control" placeholder="Scrivi qui il tuo messaggio *" rows="4" required data-error="Per favore lascia il tuo messaggio."></textarea> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-12"> <div class="form-group"> <!-- Cambia la chiave del sito, la puoi generare su https://www.google.com/recaptcha/admin --> <div class="g-recaptcha" data-sitekey="LA-TUA-CHIAVE-DEL-SITO" data-theme="light"></div> </div> </div> <div class="col-md-12"> <input type="submit" class="btn btn-primary btn-send" value="Invia messagio"> </div> </div> </div> </form> </div><!-- /.8 --> </div> <!-- /.row--> </div> <!-- /.container--> |
N.B.
Alla linea 57 dovete cambiare la chiave del sito con la vostra site-key
Il contenuto del file contact.php sarà
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<?php // require ReCaptcha class require('recaptcha/src/autoload.php'); // configure $from = 'Demo contact form <demo@dominio.com>'; $sendTo = 'Demo contact form <admin@dominio.com>'; $subject = 'Nuovo messaggio da'; $fields = array('name' => 'Name', 'surname' => 'Surname', 'phone' => 'Phone', 'email' => 'Email', 'message' => 'Message'); // array variable name => Text to appear in the email $okMessage = 'Messaggio inviato con successo!'; $errorMessage = 'There was an error while submitting the form. Please try again later'; $recaptchaSecret = 'LA-TUA-CHIAVE-SEGRETA'; // let's do the sending 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 in the config above // from https://www.google.com/recaptcha/admin $recaptcha = new \ReCaptcha\ReCaptcha($recaptchaSecret, new \ReCaptcha\RequestMethod\CurlPost()); // 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 new message from contact form\n=============================\n"; foreach ($_POST as $key => $value) { if (isset($fields[$key])) { $emailText .= "$fields[$key]: $value\n"; } } $headers = array('Content-Type: text/plain; charset="UTF-8";', 'From: ' . $from, 'Reply-To: ' . $from, 'Return-Path: ' . $from, ); mail($sendTo, $subject, $emailText, implode("\n", $headers)); $responseArray = array('type' => 'success', 'message' => $okMessage); } } catch (\Exception $e) { $responseArray = array('type' => 'danger', 'message' => $errorMessage); } 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']; } |
N.B.
Alla linea 12 va inserita la vostra chiave segreta di Google ReCaptcha
Ora il file contact.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
$(function () { $('#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">×</button>' + messageText + '</div>'; if (messageAlert && messageText) { $('#contact-form').find('.messages').html(alertBox); $('#contact-form')[0].reset(); grecaptcha.reset(); } } }); return false; } }) }); |
Ed infine il CSS del file custom.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
body { font-family: 'Lato', sans-serif; } h1{ margin-bottom: 40px; } label { color: #333; } .btn-send { font-weight: 300; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px; } |
Questa è la prima parte dello script, il pezzo restante è contenuto nella cartella recaptcha, disponibile al download in alto.
Ho seguito passo passo l’installazione del re-captcha, ma il modulo mi consente di inviare il messaggio sia cliccando su “submit” senza utilizzzare il captcha, sia con l’utilizzo del captcha…
sembra che non funzioni neanche la demo…