Come creare modulo di contatto in HTML

Come creare un modulo di contatto in HTML usando Php, jQuery e Css? In questa guida vedremo il codice da inserire nel tuo sito web per creare un contact form semplice ed elegante.

Se vuoi un codice HTML già pronto da copiare nel tuo sito questo è il posto giusto! Infatti questo modulo è quello utilizzato sul nostro sito web che puoi trovare al fondo di tutte le pagine.

Ecco il risultato finale:

Questo modulo di contatto prevede, oltre ai classici campi nome, tel e mail, anche il checkbox per l’accettazione privacy (obbligatorio) e un messaggio che appare quando l’utente clicca sul pulsante “invia”

Ecco il codice HTML già pronto

 <form id="form_01" class="ekw_contact_form" action="#form_01" target="_self" method="post" novalidate>
    <!-- Nome -->
    <div class="ekw_input_container">
      <span class="material-icons">perm_identity</span>
      <input type="text" name="ekw_name" id="ekw_name" value="" placeholder="Come ti chiami?">
    </div>
    
    <!-- email -->
    <div class="ekw_input_container">
      <span class="material-icons">alternate_email</span>
      <input type="text" name="ekw_mail" id="ekw_mail" value="" placeholder="E-mail">
    </div>
    
    <!-- Telefono -->
    <div class="ekw_input_container">
      <span class="material-icons">phonelink_ring</span>
      <input type="text" name="ekw_tel" id="ekw_tel" value="" placeholder="telefono">
    </div>
    
    <!-- Messaggio -->
    <div class="ekw_input_container">
      <span class="material-icons">message</span>
      <textarea name="ekw_text" id="ekw_text" rows="5" cols="80" placeholder="di cosa parliamo?" required></textarea>
    </div>

    <!-- checkbox per la privacy (già spuntato) -->
    <div>
      <input type="checkbox" name="ekw_contact_privacy" id="ekw_contact_privacy" checked required>
      <label style="font-size: 12px;" for="ekw_contact_privacy">Ho letto la vostra <a title="Privacy e policy di Eureka web" href="https://www.agenziawebeureka.it/privacy-policy/" target="_blank">Informativa privacy</a> e acconsento Al trattamento dei miei dati personali per l’erogazione del servizio richiesto.</label><br>
    </div>

    <!-- Messaggio di conferma invio -->
    <div class="ekw_text_center ekw_result_message" style="display: none;">
      <p>Il tuo messaggio è stato inviato con successo!<br>Ti risponderemo a breve</p>
    </div>

    <!-- Pulsante invia -->
      <button class="" type="button" name="ekw_form_sumbit">Invia</button>

      <!-- Messaggio animato "solo un secondo" che appare quando l'utente clicca sul pulsante invia -->
      <div class="ekw_loading_container" style="display:none;">
        <div class="ekw_loading_cirle">
          <svg version="1.2"  width="65px" height="65px" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 600 600" xml:space="preserve">
            <path fill="#4a44f2" d="M300.043,94.419c113.561,0,205.623,92.061,205.623,205.624c0,60.144-25.828,114.249-66.994,151.852 l64.897,68.393c59.312-54.851,96.518-133.279,96.518-220.245C600.087,134.599,465.488,0,300.043,0 c-77.463,0-148.161,29.509-201.45,77.873l64.948,68.444C199.853,114.05,247.646,94.419,300.043,94.419z"/>
            <path fill="#b12cff" d="M438.672,451.896c-36.562,33.394-85.21,53.771-138.628,53.771c-113.562,0-205.624-92.062-205.624-205.623	c0-61.164,26.734-116.059,69.121-153.726L98.593,77.873C38.066,132.805,0,212.061,0,300.043 c0,165.445,134.6,300.043,300.043,300.043c78.478,0,150.003-30.299,203.526-79.799L438.672,451.896z"/>
            <polygon fill="#4a44f2" points="114.532,91.211 98.593,146.186 154.173,132.503 114.532,91.211 98.593,146.186 154.173,132.503 "/>
            <polygon fill="#b12cff" points="503.569,454.487 447.931,467.925 487.387,509.391 503.569,454.487 447.931,467.925 487.387,509.391 "/>
          </svg>
          <label class="ekw_loading_text">Solo un secondo</label>
          <label class="ekw_loading_point">.</label>
          <label class="ekw_loading_point">.</label>
          <label class="ekw_loading_point">.</label>
        </div>
      </div>
  </form>

In questo modulo di contatto in codice HTML devi ricordarti di cambiare il link alla tua pagina privacy nel checkbox e i placeholder.

Inoltre dovrai installare le icone Google Material Icons inserendo questo link nell’header del tuo sito.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Ecco il CSS da inserire per la grafica del tuo modulo di contatto in HTML. In questo codice ci sono oltre alla grafica del modulo, anche i codici per le animazioni del messaggio di conferma invio.

.ekw_contact_form {
  padding: 60px;
  border: 1px solid #d0d0d0;
  border-radius: 400px 100px 200px 50px;
  box-shadow: 0 0 30px 0 rgba(0,0,0,.09);
  margin: auto;
  max-width: 600px;
}
.ekw_contact_form button {
  display: block;
  margin: 40px auto 5px auto;
  position: relative;
  top: 0px;
  background-color: white!important;
  border-radius: 10px;
  padding: 10px 40px;
  font-size: 18px;
  color: white;
  background: -webkit-linear-gradient(25deg, #4A44F287, #B12CFF87);
  background-size: 130%;
  background-position: left;
  transition: all 0.3s;
  border: 0px;
}
.ekw_contact_form button:hover {
  top: -4px;
  background-position: right;
}
.ekw_input_container {
  width: 100%;
  display: inline-flex;
  align-items: center;
  background-color: white;
  border: 1px solid #e6e6e6;;
  border-radius: 8px;
  padding: 5px 20px 5px 20px;
  margin-bottom: 10px;
}
.ekw_input_container:hover {
  box-shadow: 0 0 20px 0 rgba(0,0,0,.09);
}
.ekw_input_container input, textarea {
  width: 100%;
  font-size: 16px;
  border: 1px solid white!important;
  -webkit-appearance: none!important;
  -moz-appearance: none!important;
  appearance: none!important;
  padding: 15px 18px;
  transition: all 0.2s;
  color: #3d4459;
}
.ekw_input_container > input:focus {
  border: 1px solid #a5afb8!important;
  background-color: #fafafa;
}
.ekw_input_container span {
  user-select: none;
  font-size: 30px;
  background: -webkit-linear-gradient(45deg, #4A44F2, #B12CFF);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 margin-right: 20px;
}
input[type='checkbox'] {
-webkit-appearance: none!important;
appearance: none!important;
}
input[type='checkbox']::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  font-family: 'Material Icons';
  content: 'check';
  width: 21px;
  height: 21px;
  font-size: 16px;
  font-weight: 900;
  position: relative;
  background: -webkit-linear-gradient(45deg, #ffffff, #ffffff);
  border: 1px solid #B12CFF;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  border-radius: 6px;
  margin-right: 10px;
  padding: 1px;
  transition: all 0.8s;
}
input[type='checkbox']:checked::before {
  content: 'check';
  border: 2px solid #B12CFF;
  padding: 0px;
  font-size: 16px;
  background: -webkit-linear-gradient(45deg, #4A44F2, #B12CFF);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
@-moz-keyframes ekw_amination_rotate { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes ekw_amination_rotate { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes ekw_amination_rotate { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

.ekw_loading_container {
  background-color: #f3f3f3c2;
  background-blend-mode: overlay;
  position: fixed;
  display: flex;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}
.ekw_loading_cirle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: auto;
  box-shadow: 0px 1px 10px 6px rgba(0,0,0,0.12);
  border-radius: 20px;
  min-height: 200px;
  padding: 25px;
  background-color: white;
}
.ekw_loading_cirle .ekw_loading_text {
  display: flex;
  margin: auto 20px;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 2px;
  background: -webkit-linear-gradient(45deg, #4A44F2, #B12CFF);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.ekw_loading_cirle .ekw_loading_point {
  background: -webkit-linear-gradient(45deg, #4A44F2, #B12CFF);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 62px;
  margin: 0 5px;
  opacity: 0;
}
.ekw_loading_cirle svg {
  -webkit-animation:ekw_amination_rotate 2s linear infinite;
  -moz-animation:ekw_amination_rotate 2s linear infinite;
  animation:ekw_amination_rotate 2s linear infinite;
}
.ekw_text_center {
  text-align: center;
}

Lo script in jQuery serve per passare i parametri del form di contatto al php per l’invio della mail ma anche per verificare la correttezza dell’invio e passare il messaggio di successo o fallimento al form.

Se riscontri errori di configurazione ad esempio “$ is not a function” tri consiglio di leggere questa guida per risolvere l’errore jQuery.

jQuery.noConflict();
 jQuery(document).ready(function($) {
	/* funzione per invio dati tramite jquery */
  function ekw_submit(ekw_this) {
  var loading = ekw_this.parent().find(".ekw_loading_container");
  loading.css("display", "flex");
  ekw_loading_point();
  var id_form = ekw_this.parent().attr("id");
  var ekw_name = $("#"+id_form+ " *[name='ekw_name']").val();
  var ekw_email = $("#"+id_form+ " *[name='ekw_mail']").val();
  var ekw_tel = $("#"+id_form+ " *[name='ekw_tel']").val();
  var ekw_text = $("#"+id_form+ " *[name='ekw_text']").val();
  if (ekw_name == '' || ekw_email == '' || ekw_text == '') {
    var result = 'Mancano alcuni dati, inserisci nome, email e testo del messaggio';
    $("#"+id_form+ " .ekw_result_message").show();
    $("#"+id_form+ " .ekw_result_message > p").html(result);
    loading.hide();
  } else {
    var result = 'Il tuo messaggio è stato inviato con successo!<br>Ti risponderemo a breve';
    $.ajax({
     type: "POST",
     url: "#",
     data: {
       ekw_contact_form: true,
       nome: ekw_name,
       email: ekw_email,
       tel: ekw_tel,
       text: ekw_text
     },
     success: function(){
       $("#"+id_form+ " *[name='ekw_form_sumbit']").hide();
       $("#"+id_form+ " .ekw_result_message > p").html(result);
       $("#"+id_form+ " .ekw_result_message").show();
       loading.hide();
     },
     error: function(){
       $("#"+id_form+ " *[name='ekw_form_sumbit']").hide();
       $("#"+id_form+ " .ekw_result_message > p").html("Errore nell'invio del messaggio... Ti chiediamo di riprovare");
       $("#"+id_form+ " .ekw_result_message").show();
       loading.hide();
     }
   });
  }
}

  /* Animazione del messaggio “solo un secondo” */
  function ekw_loading_point() {
  var ekw_time = 400;
  setTimeout(function(){
    $('.ekw_loading_point').eq(0).css("opacity", 1);
  }, ekw_time);
  setTimeout(function(){
    $('.ekw_loading_point').eq(1).css("opacity", 1);
  }, ekw_time * 2);
  setTimeout(function(){
    $('.ekw_loading_point').eq(2).css("opacity", 1);
  }, ekw_time * 3);
  setTimeout(function(){
    $('.ekw_loading_point').css("opacity", 0);
    ekw_loading_point();
  }, ekw_time * 4);
}


  $("button[name='ekw_form_sumbit']").on("click", function() {
    ekw_submit($(this));
  });
});

Ariadne's Arts

Shop Online di Spiritualità e Cristalli

Visita lo Shop

Con il codice Php già pronto possiamo inviare la mail al nostro indirizzo. Questo codice riceve i dati da jQuery con il metodo $_POST e li invia tramite la funzione mail().

Ricordati di cambiare l’indirizzo email su cui vuoi ricevere i messaggi del tuo modulo di contatto in HTML.

Il modo migliore per inserire il codice Php sul tuo sito WordPress è sicuramente quello di creare un plugin o un tema child ma ce ne sono anche altri!

if (isset($_POST['ekw_contact_form'])){
    $object = 'Ciao, hai una nuova richiesta da un cliente!';
    $name = $_POST['nome'];
    $mail = $_POST['email'];
    $tel = $_POST['tel'];
    $message = $_POST['text'];
    $page = get_the_title();
    $msg = '
      <div style="width: -webkit-fill-available; padding: 20px; margin: 50px; border: 1px solid #f1f1f1; border-radius: 80px; box-shadow: 0 0 30px 0 rgba(0,0,0,.06);">
        <h1 style="width: 100%;color: #797979; font-size: 22px; font-weight: 400; margin-top: 0px; text-align: center; margin-bottom: 30px;">Nuova richiesta da '.$name.'</h1>
        <p style="width: 100%;color: #797979;font-weight: 400;margin-top: 0px;margin-bottom: 30px;padding-bottom: 5px;border-bottom: 1px solid #f1f1f1;">Inviato da: '.$name.'</p>
        <p style="width: 100%;color: #797979;font-weight: 400;margin-top: 0px;margin-bottom: 30px;padding-bottom: 5px;border-bottom: 1px solid #f1f1f1;">E-mail: '.$mail.'</p>
        <p style="width: 100%;color: #797979;font-weight: 400;margin-top: 0px;margin-bottom: 30px;padding-bottom: 5px;border-bottom: 1px solid #f1f1f1;">Tel: '.$tel.'</p>
        <p style="width: 100%;color: #797979;font-weight: 400;margin-top: 0px;margin-bottom: 30px;padding-bottom: 5px;border-bottom: 1px solid #f1f1f1;">Messaggio:</p>
        <p style="padding: 20px!important;background-color: #f1f1f1;box-shadow: 0 0 25px 0 rgba(0,0,0,.06);">'.$message.'</p>
        <p>Pagina da cui ha compilato il modulo: '.$page.'</p>
      </div>
    ';
    $headers[] = 'MIME-Version: 1.0';
    $headers[] = 'Content-type: text/html; charset=iso-8859-1';
    mail("la-tua-mail@gmail.com",$object,$msg, implode("\r\n", $headers));
  }

Se usi WordPress puoi inserire questo codice nel file functions.php del tuo tema child.

function ekw_contact_form() {
  ob_start();

  //tutto il codice visto prima

  $content = ob_get_clean();
  return $content;
}

add_shortcode ('contact_form', 'ekw_contact_form');