whatsapp
keyboard_arrow_down Contatti

Sabato

11

Febbraio 2023

modulo di contatto in HTML

Come creare modulo di contatto in HTML

  1. blog Come creare modulo di contatto in HTML
event_available
schedule

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:

perm_identity
alternate_email
phonelink_ring
message

code

Modulo di contatto in HTML

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

Modulo di contatto CSS

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

Codice Javascript (jQuery)

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

Bracciale feng shui pixiu Drusa in ametista Incenso angel protection Pirite grezza Bracciale in occhio di tigre
Visita lo Shop
code

Il codice PhP

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

Cerchi collaborazioni professionali?

Ecco cosa abbiamo creato per te

  • Portale online per professionisti
  • Suggerimenti di profili in linea con la tua riceca
  • Eventi, consigli, nuovi lavori, opportunità di collaborazione
  • Tutto in un unico portale completamente Italiano!

Compila il questionario per saperne di più

Eureka Web

Scopri di più
code

Shortcode per WordPress

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');

Ti è piaciuto questo articolo?

favorite thumb_down
Autore articolo

Fabio

Sono un terribile realista. Pratico e determinato ma anche un grande sognatore, ecco perché do continuamente vita a nuovi progetti online e non. Nel 2019 ho fondato Eureka Web proprio per rendere possibile tutto questo. Insieme possiamo realizzare la tua idea!


Visita il sito
library_books

Leggi anche

Come fare redirect in WordPress senza plugin
Scopri
Come recuperare utenti WordPress e dati senza plugin
Scopri
Recuperare l'ultimo elemento di un array in php
Scopri

Contattami

perm_identity
alternate_email
phonelink_ring
message

Il tuo messaggio è stato inviato con successo!
Ti risponderemo a breve

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

message
perm_identity
alternate_email

keyboard_arrow_up