Creare un form PHP con Google ReCaptcha Antispam e Bootstrap - Alessio Angeloro

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.

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/united/bootstrap.min.css" rel="stylesheet">
<link href='custom.css' rel='stylesheet' type='stylesheet'>

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

<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

<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-->

</div>

<label for="form_lastname">Cognome *</label>

</div>

<label for="form_email">Email *</label>

</div>

<label for="form_phone">Telefono</label>

</div>

<label for="form_message">Messagio *</label>

</div>

</div>

</div>

</form>

</div>

</div>

</div>

N.B.

Alla linea 57 dovete cambiare la chiave del sito con la vostra site-key

Il contenuto del file contact.php sarà

<?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'];
}

<?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

$(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">&times;</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#contact-form').find('.messages').html(alertBox);
$('#contact-form')[0].reset();
grecaptcha.reset();
}
}
});
return false;
}
})
});

$(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

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;
}

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.

Alessio Angeloro

Programmatore WordPress esperto WooCommerce, sviluppo di plugin con interfaccia amministrativa.
Sono l’autore di questo blog con tanti trucchi e guide su WordPress e WooCommerce.

4 commenti su “Creare un form PHP con Google ReCaptcha Antispam e Bootstrap”

Gianfranco

6 Aprile 2018 alle 7:36 pm

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…
Rispondi
- Alessio Angeloro
  
  13 Aprile 2018 alle 12:14 pm
  
  Ciao Gianfranco, avrai sbagliato qualcosa, se guardi la demo funziona.
  Rispondi
Antonio

13 Dicembre 2019 alle 5:47 pm

sembra che non funzioni neanche la demo…
Rispondi
- Alessio Angeloro
  
  13 Dicembre 2019 alle 6:18 pm
  
  Ciao Antonio, non sei il primo che me lo dice, però l’ho testata e funziona, che errori ti da ?
  
  Rispondi

Non fornisco assistenza gratuita sugli articoli che ho scritto nè personalizzo il codice in modo gratuito, se vuoi mi chiedi una consulenza nella sezione contatti. Se devi postare codice usa servizi come https://codeshare.io . Grazie della comprensione. Alessio

Lascia un commento Annulla risposta

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Potrebbe interessarti anche ...

4 commenti su “Creare un form PHP con Google ReCaptcha Antispam e Bootstrap”

Lascia un commento Annulla risposta