<!DOCTYPE html>
<html lang=it>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modulo di contatto</title>
<meta name="robots" content="noindex">
<link rel="stylesheet" type="text/css" href="./contact.css" />
<!-- Ho richiamato la libreria Jquery da un file esterno-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<!-- aggiunto questo div-->
<div id="esito_invio" class="esito_invio">
<!-- quì verrà mstrato il messaggio di risposta dopo il click sul pulsante invio del form -->
</div>
<div style="text align:center;">
<form id="frm_contact" class="form-contact" method="post">
<p><span class="star">*</span> <span style="font-size:0.8em">Campi obbligatori</span></p>
<p><label>Nome e cognome:<span class="star">*</span><br></label><input class="field required_input" type="text" name="name" /></p>
<p><label>E-mail:<span class="star">*</span><br></label><input class="field required_input" type="text" name="email" /></p>
<p><label>Conferma e-mail: <span class="star">*</span><br></label><input class="field required_input" type="text" name="remail" autocomplete="off" /></p>
<p><label>Sito web:<br></label><input class="field required_input" type="text" name="website" /></p>
<p><label>Titolo:<span class="star">*</span><br></label><input class="field required_input" type="text" name="title" /></p>
<p><label>Messaggio: <span class="star">*</span><br></label><textarea class="form-text required_input" rows="15" cols="40" name="message" ></textarea></p>
<p style="padding: 0 12px">Cliccando sul pulsante di invio, dichiari di aver letto e di accettare le modalità di trattamento dei tuoi dati personali come descritto nella <a style="color: #2C80FF" href="/doc/privacy" target="_blank">"Privacy policy."</a>
</p>
<!-- filtro anti-spam -->
<input type="text" id="fred" name="fred" style="visibility: hidden;"/>
<!-- end filtro anti-spam -->
<div class="button-container">
<input class="button" type="reset" value="Reset">
<input id="send" class="button" type="submit" value="Send">
</div>
</form>
</div>
<!-- aggiunto instruzione javascript e funzione ajax per invio form contatto -->
<script>
$(document).ready(function() {
$("#send").click(function(e) {
e.preventDefault(); // inibisce il normale funzionamento del tasto submit del form
var inputs = $('input'); // intercetta tutti gli input del form e controlla se sono vuoti
var isError = false;
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if ($(input).hasClass('required_input') && !validateRequired($(input).val())) {
isError = true;
}
}
if (isError === true) {
alert("ATTENZIONE!\nCi sono dei campi vuoti");
}
if (isError === false) {
var dati = $("#frm_contact").serialize(); //recupera tutti i valori del form automaticamente
$.ajax({
type: "post",
url: "contact.php",
data: dati,
dataType: "html",
success: function(msg)
{
$("#esito_invio").html(msg); // riempe in div esito_invio con gli echo della pagina contact.php
},
error: function()
{
alert("errore");
}
});
}
});
});
function validateRequired(value) {
if (value == "") return false;
return true;
}
</script>
</body>
</html>
