Qualche tempo fa ho scritto un intero articolo su come creare un form WordPress utilizzando uno dei plugin più famosi in assoluto: Contact Form 7.
Come avete avuto modo di notare, se avete letto qualche mio articolo, preferisco non optare mai per un plugin quando possibile per diverse ragioni che ho già avuto modo di esporre. Così girovagando per la rete mi sono imbattuto in qualcuno che la pensa proprio come me! In uno dei suoi articoli, Harley Alexander infatti dice: a cosa vi serve un’interfaccia gestionale o un pannello? Bastano poche righe di HTML, CSS e php ed il gioco è fatto! Come dargli torto…
Vediamo quindi come realizzare un form di contatto senza usare plugin. In realtà sono un po’ pigro anche io quindi il codice di base che utilizzerò in questa guida l’ho reperito in rete e adattato alle mie esigenze. Quello che andremo a realizzare sarà un form che utilizza una funzione jQuery per passare i dati ad un file php che si occuperà di processarli e mostrare sulla pagina il risultato dell’operazione senza che questa venga ricaricata.
FORM DI CONTATTO SENZA USARE PLUGIN – HTML
Qui di seguito trovate il codice HTML che sarà necessario per visualizzare il form. Questo codice dovrà essere inserito all’interno della pagina o del widget in cui vogliamo che sia visualizzato. Nel mio caso, l’operazione è stata abbastanza semplice in quanto utilizzo il plugin Visual Composer quindi l’inserimento di codice HTML all’interno delle pagine è abbastanza semplice ma voi utilizzare il metodo che preferite.
<div id="mainform">
<h3>Contattami</h3>
<form id="form">
<p id="returnmessage"></p>
<p><input type="text" id="name" placeholder="Nome*"/></p>
<p><input type="text" id="email" placeholder="Email*"/></p>
<p><input type="text" id="contact" placeholder="Skype"/></p>
<p><textarea id="message" placeholder="Messaggio......."></textarea></p>
<input class="newsletter-button" type="button" id="submit" value="Invia Richiesta"/>
</form>
</div>Questo codice mostrerà questo form:
Dal punto di vista grafico il mio form sarà sicuramente diverso dal vostro. Questo perché non essendoci alcuno stile applicato questo seguirà le regole CSS presenti nel foglio di stile del vostro tema ma volendo potete modificare il codice qui sopra aggiungendo delle classi per creare il design che più vi piace.
FUNZIONE JQUERY
A questo punto andiamo a scrivere una funzione jQuery che avrà il compito di passare i dati ad un file php che si occuperà di processarli ed inviare la mail, la salviamo in un file e faremo in modo che WordPress lo inserisca nel footer ma solo ed esclusivamente nella pagina in cui verrà mostrato il form.
Una delle cose che infatti odio dei plugin è che i file css e javascript vengono caricati sempre e comunque anche nelle pagine in cui non sono necessari il che non fa altro che riempire di roba inutile il nostro sito e diminuire i tempi di caricamento delle nostre pagine.
Ecco la funzione jQuery:
$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var contact = $("#contact").val();
$("#returnmessage").empty();
// Checking for blank fields.
if (name == '' || email == '') {
alert("Compila i campi richiesti");
} else {
$.post("../contact_form.php", {
name1: name,
email1: email,
message1: message,
contact1: contact
}, function(data) {
$("#returnmessage").append(data);
if (data == "Messaggio inviato con successo. Sarai ricontattato a breve.") {
$("#form")[0].reset();
}
});
}
});
});Alla riga 9 viene fatto un controllo sui campi obbligatori. Se questi campi sono vuoti viene mostrato un errore. Alla riga 12 invece viene invece definito il file php al quale passare i dati del form.
Ora dobbiamo dire a WordPress di caricare questo file nel footer del sito. Il codice mostrato qui di seguito può essere inserito all’interno del file functions.php del vostro tema ma dal momento che un eventuale aggiornamento o cambio di tema vi costringerebbe a rapportare tutte le modifiche vi consiglio di creare un plugin per il vostro sito e inserire questo codice al suo interno:
//Carico il file JS per il form di contatto solo nelle pagine in cui mi serve
function cnt_form_script() {
if(is_page('1317')) {
wp_enqueue_script( 'script-name', plugins_url() . '/nome-plugin/js/contact_form.js', array(), '1.0.0', true );
}
}
add_action( 'wp_enqueue_scripts', 'cnt_form_script' );Chiamate il file contact_form.js e caricatelo all’interno della cartella del plugin che avete creato inserendolo in una sottocartella chiamata js.
INVIO DELLA MAIL
A questo punto non ci resta che creare un file chiamato contact_form.php che si occuperà di processare i dati ed inviare 2 email: una a noi e l’altra all’utente che ha compilato il form.
Purtroppo sembra che incollando il codice nell’articolo venga generato un errore dovuto ad un problema con il plugin Crayon Syntax Highlaither quindi vi ho preparato un file zip con il file php che dovrete caricare nella root del vostro sito.
Nei prossimi giorni cercherò di capire perché genera questo errore e aggiornerò l’articolo.
