Realizzare form di contatto
Per abbellire il cms proprietario o per le vostre pagine Web, inseriamo il form di contatto simile a quello che ho su questo sito, questo form di contatto funziona con il font awesome e si incastra anche nel tutorial realizzare un cms da zero, quindi creiamo dalla dashboard la pagina di contatto, ed inseriamo il seguente codice nel editor:
<span class="group-addon" style="color:White;">Campi obbligatori con la *<br><br></span>
<span id="invio" style="display:inline"> </span>
<label class="username">
<span> Nome *</span>
<span class="input-group-addon" style="margin-left:auto;
margin-right:auto; display:inline">
<i class="fa fa-user tip" title="nome" style="display:inline"> </i>
</span><input style="display:inline" maxlength="50" id="nome2" name="name1" value="" autocomplete="on" placeholder="Nome" onkeydown="controlla(this,'nome');" type="text"> <span id="name1" style="display:inline"> </span>
</label>
<label class="username">
<span>Cognome *</span>
<span class="input-group-addon" style="margin-left:auto;
margin-right:auto; display:inline">
<i class="fa fa-user tip" title="cognome" style="display:inline"> </i>
</span><input style="display:inline" maxlength="50" id="cognome2" name="cognome" value="" autocomplete="on" placeholder="Cognome" onkeydown="controlla(this,'cognome');" type="text"> <span id="cognome" style="display:inline"> </span>
</label>
<label class="username">
<span>Telefono/Cellulare *</span>
<span class="input-group-addon" style="margin-left:auto;
margin-right:auto; display:inline">
<i class="fa fa-phone" title="telefono" style="display:inline"> </i>
</span><input style="display:inline" maxlength="50" id="telefono2" name="telefono" value="" autocomplete="on" placeholder="Telefono/cellulare" onkeydown="controlla(this,'telefono');" type="text"> <span id="telefono" style="display:inline"> </span>
</label>
<label class="username">
<span>Email</span>
<span class="input-group-addon" style="margin-left:auto;
margin-right:auto; display:inline">
<i class="fa fa-envelope-o" title="email" style="display:inline"> </i>
</span><input style="display:inline" maxlength="50" id="email2" name="email1" value="" autocomplete="on" placeholder="Email" onkeydown="controlla(this,'email');" onkeyup="controlla(this,'email');" onchange="controlla(this,'email');" type="text"> <span id="email" style="display:inline"> </span>
</label>
<label class="username">
<span>Servizio richiesto</span>
<span class="input-group-addon" style="margin-left:auto;
margin-right:auto; display:inline">
<i class="fa fa-exchange" title="servizio" style="display:inline"> </i>
</span><select style="display:inline" id="servizio2" name="servizio" onchange="controlla(this,'servizio');">
<option value="0" style="color:grey">Servizio richiesto</option>
<option value="Creazione Sito WEB">Creazione Sito WEB</option>
<option value="Facile e semplice CSM">Facile e semplice CSM</option>
<option value="Manutenzione">Manutenzione</option>
<option value="Altro">Altro</option>
</select> <span id="servizio" style="display:inline"> </span>
</label>
<label class="username">
<span>Dove</span>
<span class="input-group-addon" style="margin-left:auto;
margin-right:auto; display:inline">
<i class="fa fa-location-arrow" title="dove" style="display:inline"> </i>
</span><select style="display:inline" id="dove2" name="zone" onchange="controlla(this,'zona');">
<option value="0" style="color:grey">Località</option>
<optgroup label="Abruzzo" style="background: black"> Abruzzo
<option value="Aquila" class="option1">Aquila </option>
<option value="Chieti" class="option1">Chieti</option>
<option value="Pescara" class="option1">Pescara</option>
<option value="Teramo" class="option1">Teramo</option>
</optgroup>
<optgroup label="Basilicata" style="background: black">Basilicata
<option value="Matera" class="option1">Matera</option>
<option value="Potenza" class="option1">Potenza</option>
</optgroup>
<optgroup label="Calabria" style="background: black"> Calabria
<option value="Catanzaro" class="option1">Catanzaro </option>
<option value="Cosenza" class="option1">Cosenza</option>
<option value="Crotone" class="option1">Crotone</option>
<option value="Reggio Calabria" class="option1">Reggio Calabria</option>
<option value="Vibo Valentia" class="option1">Vibo Valentia</option>
</optgroup>
<optgroup label="Campania" style="background: black"> Campania
<option value="Avellino" class="option1">Avellino </option>
<option value="Benevento" class="option1">Benevento </option>
<option value="Caserta" class="option1">Caserta</option>
<option value="Napoli" class="option1">Napoli</option>
<option value="Salerno" class="option1">Salerno</option>
</optgroup>
<optgroup label="Emilia-Romagna" style="background: black"> Emilia-Romagna
<option value="Bologna" class="option1">Bologna</option>
<option value="Ferrara" class="option1">Ferrara </option>
<option value="Forlì-Cesena" class="option1">Forlì-Cesena </option>
<option value="Modena" class="option1">Modena</option>
<option value="Parma" class="option1">Parma </option>
<option value="Piacenza" class="option1">Piacenza </option>
<option value="Ravenna" class="option1">Ravenna</option>
<option value="Reggio Emilia" class="option1">Reggio Emilia </option>
<option value="Rimini" class="option1">Rimini</option>
</optgroup>
<optgroup label="Friuli-Venezia Giulia" style="background: black"> Friuli-Venezia Giulia
<option value="Gorizia" class="option1">Gorizia</option>
<option value="Pordenone" class="option1">Pordenone </option>
<option value="Trieste" class="option1">Trieste</option>
<option value="Udine" class="option1">Udine</option>
</optgroup>
<optgroup label="Lazio" style="background: black"> Lazio
<option value="Frosinone" class="option1">Frosinone </option>
<option value="Latina" class="option1">Latina</option>
<option value="Rieti" class="option1">Rieti </option>
<option value="Roma" class="option1">Roma </option>
<option value="Viterbo" class="option1">Viterbo </option>
</optgroup>
<optgroup label="Liguria" style="background: black"> Liguria
<option value="Genova" class="option1">Genova </option>
<option value="Imperia" class="option1">Imperia</option>
<option value="Spezia" class="option1">Spezia </option>
<option value="Savona" class="option1">Savona </option>
</optgroup>
<optgroup label="Lombardia" style="background: black"> Lombardia
<option value="Bergamo" class="option1">Bergamo</option>
<option value="Brescia" class="option1">Brescia</option>
<option value="Como" class="option1">Como </option>
<option value="Cremona" class="option1">Cremona</option>
<option value="Lecco" class="option1">Lecco </option>
<option value="Lodi" class="option1">Lodi </option>
<option value="Mantova" class="option1">Mantova</option>
<option value="Milano" class="option1">Milano </option>
<option value="Monza e Brianza" class="option1">Monza e Brianza</option>
<option value="Pavia" class="option1">Pavia </option>
<option value="Sondrio" class="option1">Sondrio </option>
<option value="Varese" class="option1">Varese </option>
</optgroup>
<optgroup label="Marche" style="background: black"> Marche
<option value="Ancona" class="option1">Ancona </option>
<option value="Ascoli Piceno" class="option1">Ascoli Piceno </option>
<option value="Fermo" class="option1">Fermo </option>
<option value="Macerata" class="option1">Macerata</option>
<option value="Pesaro e Urbino" class="option1">Pesaro e Urbino </option>
</optgroup>
<optgroup label="Molise" style="background: black"> Molise
<option value="Campobasso" class="option1">Campobasso </option>
<option value="Isernia" class="option1">Isernia </option>
</optgroup>
<optgroup label="Piemonte" style="background: black"> Piemonte
<option value="Alessandria" class="option1">Alessandria</option>
<option value="Asti" class="option1">Asti </option>
<option value="Biella" class="option1">Biella </option>
<option value="Cuneo" class="option1">Cuneo </option>
<option value="Novara" class="option1">Novara </option>
<option value="Torino" class="option1">Torino</option>
<option value="Verbano Cusio Ossola" class="option1">Verbano Cusio Ossola </option>
<option value="Vercelli" class="option1">Vercelli</option>
</optgroup>
<optgroup label="Puglia" style="background: black"> Puglia
<option value="Bari" class="option1">Bari </option>
<option value="Barletta-Andria-Trani" class="option1">Barletta-Andria-Trani</option>
<option value="Brindisi" class="option1">Brindisi </option>
<option value="Foggia" class="option1">Foggia</option>
<option value="Lecce" class="option1">Lecce </option>
<option value="Taranto" class="option1">Taranto</option>
</optgroup>
<optgroup label="Sardegna" style="background: black"> Sardegna
<option value="Teramo" class="option1">Cagliari</option>
<option value="Nuoro" class="option1">Nuoro </option>
<option value="Oristano" class="option1">Oristano</option>
<option value="Sassari" class="option1">Sassari </option>
<option value="Olbia-Tempio" class="option1">Olbia-Tempio </option>
<option value="Ogliastra" class="option1">Ogliastra </option>
<option value="Carbonia-Iglesias" class="option1">Carbonia-Iglesias</option>
<option value="Medio-Campidano" class="option1">Medio-Campidano </option>
</optgroup>
<optgroup label="Sicilia" style="background: black"> Sicilia
<option value="Agrigento" class="option1">Agrigento</option>
<option value="Caltanissetta" class="option1">Caltanissetta</option>
<option value="Catania" class="option1">Catania </option>
<option value="Enna" class="option1">Enna</option>
<option value="Messina" class="option1">Messina</option>
<option value="Palermo" class="option1">Palermo</option>
<option value="Ragusa" class="option1">Ragusa</option>
<option value="Siracusa" class="option1">Siracusa</option>
<option value="Trapani" class="option1">Trapani
</option>
</optgroup>
<optgroup label="Toscana" style="background: black"> Toscana
<option value="Arezzo" class="option1">Arezzo</option>
<option value="Firenze" class="option1">Firenze </option>
<option value="Grosseto" class="option1">Grosseto </option>
<option value="Livorno" class="option1">Livorno </option>
<option value="Lucca" class="option1">Lucca </option>
<option value="Massa-Carrara" class="option1">Massa-Carrara </option>
<option value="Pisa" class="option1">Pisa</option>
<option value="Pistoia" class="option1">Pistoia </option>
<option value="Prato" class="option1">Prato </option>
<option value="Siena" class="option1">Siena </option>
</optgroup>
<optgroup label="Trentino-Alto Adige" style="background: black"> Trentino-Alto Adige
<option value="Bolzano" class="option1">Bolzano </option>
<option value="Trento" class="option1">Trento </option>
</optgroup>
<optgroup label="Perugia" style="background: black"> Umbria
<option value="Perugia" class="option1">Perugia</option>
<option value="Terni" class="option1">Terni</option>
</optgroup>
<optgroup label="Valle d'Aosta" style="background: black"> Valle d'Aosta
<option value="Valle d'Aosta" class="option1">Valle d'Aosta</option>
</optgroup></select><span id="zona" style="display:inline"> </span>
</label>
<label>
<span>Informazioni aggiuntive</span>
<textarea rows="10" id="info2" name="info" placeholder="Informazioni aggiuntive..." onkeydown="controlla(this,'info');" style="display:inline"></textarea> <span id="info" style="display:inline"> </span>
</label>
<span> L'invio di questo modulo sottointende che acconsente e autorizza al trattamento dei propri dati personali secondo il D.Lgs 196/2003 INFORMATIVA SULLA PRIVACY</span>
<br>
<button class="submit button" type="submit" onclick="controlla('invio','preventivo');">ENTRA</button>
Io nel mio cms proprietario ho fatto un controllo, se la pagina è preventivi include il file form che con un ciclo tira su le città dal database.
Poi nel tag HTML head, inserisci il seguente script che si attiva una volta che il modulo è stato completamente modificato:
function prenota(id)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("login-popup").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","contactr.php?id="+id,true);
xmlhttp.send();
}
//Script questo script controlla tutti i campi prima del invio
function controlla(val,tipo)
{
var xmlhttp;
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
switch(tipo){
case "nome": document.getElementById("name1").innerHTML=xmlhttp.responseText; break;
case "cognome": document.getElementById("cognome").innerHTML=xmlhttp.responseText; break;
case "telefono": document.getElementById("telefono").innerHTML=xmlhttp.responseText; break;
case "email": document.getElementById("email").innerHTML=xmlhttp.responseText; break;
case "servizio": document.getElementById("servizio").innerHTML=xmlhttp.responseText; break;
case "dove": document.getElementById("dove").innerHTML=xmlhttp.responseText; break;
case "data": document.getElementById("data").innerHTML=xmlhttp.responseText; break;
case "info": document.getElementById("info").innerHTML=xmlhttp.responseText; break;
case "inviookay": document.getElementById("grazie").innerHTML=xmlhttp.responseText; break;
case "zona": document.getElementById("zona").innerHTML=xmlhttp.responseText; break;
case "flag": document.getElementById("flag").innerHTML=xmlhttp.responseText; break;
case "cv": document.getElementById("dove").innerHTML=xmlhttp.responseText; break;
default: document.getElementById("invio").innerHTML=xmlhttp.responseText;
}
// alert(document.getElementById("myDiv").innerHTML=xmlhttp.responseText);
}
}
if(tipo=="preventivo"){ var x=document.getElementById('nome2').value;
var x1=document.getElementById('cognome2').value;
var x2=document.getElementById('telefono2').value;
var x3=document.getElementById('email2').value;
var x4=document.getElementById('servizio2').value;
var x5=document.getElementById('dove2').value;
var x6=document.getElementById('info2').value;
var pro="si";
if(( x=="" ) || (x1==undefined)) { pro="no"; }
if(( x1=="" ) || (x1==undefined)) { pro="no"; }
if(( x2=="" ) || (x2==undefined)) { pro="no"; }
xmlhttp.open("GET","contactr.php?valore="+pro+"&tipo="+tipo+"&nome="+x+"&cognome="+x1+"&telefono="+x2+"&email="+x3+"&servizio="+x4+"&dove="+x5+"&info="+x6,true);
if(pro=="si"){ tipo="inviookay"; }
} else {
if (val != "invio") { xmlhttp.open("GET","contactr.php?valore="+val.value+"&tipo="+tipo,true); }
}
if(tipo=="cv"){
var x5=document.getElementById('dove2');
xmlhttp.open("POST","contactr.php?valore="+x5+"&tipo="+tipo,true);
}
xmlhttp.send();
}
Quindi questo script controlla che i campi importanti non siano vuoti, altrimenti se si schiaccia su invio non funziona, ma esce un messaggio che appunto dice di completare i campi.
Adesso dobbiamo creare il file PHP contactr.php, quindi:
Per esempio:
// facciamo il controllo singolo campo se okay esce il segno di spunta verde altrimenti rosso
if(isset($_POST['nome']) &&!empty($_POST['nome'] ==)){
//qui inseriamo codice che controlla che siano tutti caratteri no numeri
.
.
.
if(ok) { echo "<i class="fa fa-check" style="color:green; display:inline" ></i>"; }
else { echo "<i class="fa fa-check" style="color:red; display:inline" ></i>"; }
}
.
.
.
// fate i controlli cosi via.
.
.
.
// facciamo il controllo classico in caso che i campi obbligatori sono stati riempiti
if(isset($_POST['valore']) &&!empty($_POST['valore']) && $_POST['valore'] ==”si”){
if(isset($_POST['tipo']) &&!empty($_POST['tipo']){
// così via per tutte le variabili
.
.
.
}
}
// se tutto okay inviamo l'email
$headers = 'MIME-Version: 1.0' . "
";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "
";
// Addizionali intestazionirs
$headers .= "From: Vostra email
";
$headers .= "X-Mailer: nome del vostro dominio
";
$subject="CONTATTO";
$mesg="<p style="font-size:16pt; font-weight:bold;"> <center> <img src="https://www.web-master.guru/Webmaster-Web-designer-Web-Develper-Facile-e-semplice-CSM/144.png" height=144px width=144px ><h1>PREVENTIVO</h1></center>
NOME: ".$_GET['nome']."<br>
COGNOME: ".$_GET['cognome']."<br>
TELEFONO: ".$_GET['telefono']."<br>
EMAIL: ".$_GET['email']."<br>
SERVIZIO: ".$_GET['servizio']."<br>
DOVE: ".$_GET['dove']."<br>
INFO: ".$_GET['info']."<br>
</p>";
@mail('Vostra email', $subject, $mesg, $headers);
Come potete vedere con i vari cms free come Wordpress, Drupal, Joomla se non ci sono i plugin o moduli già fatti è un casino fare un modulo grazioso, occorre conoscere i relativi framework.
Se leggete il tutorial per realizzare un cms proprietario avete la fortuna di trovare tanto codice free nei vari blog ed innovativo, che potete adattarli in modo rapido e veloce nel vostro cms proprietario, che fa diventare imbarazzanti i cms free, notate la velocità delle pagine del mio sito, non temo rivali !!!