WpGuida

Guida Wordpress è una raccolta di tutorials e guide su temi, plugin e sviluppo in wordpress

  • Home
  • Notizie
  • Guide
    • Guida WordPress – Le Basi
    • Guida WordPress Avanzata
    • Guida W3 Total Cache
  • Tutorials
    • Ottimizzare WordPress
    • WordPress Plugins
    • WordPress Temi
    • WordPress Development
  • Tips and Tricks
  • Hosting WordPress
  • Software
  • Velocizzare WordPress
Ti trovi qui: Home / Wordpress Development / Creare un form di contatto senza usare Plugin in WordPress
Come Creare un form di contatto senza usare plugin in wordpress

Creare un form di contatto senza usare Plugin in WordPress

4 Agosto 2015 di Dario Vinci Lascia un commento

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:

Creare form di contatto senza plugin per WordPress

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.

Scarica il file contact_form.php

Archiviato in:Wordpress Development

Dario Vinci

Appassionato di Wordpress e del mondo tecnologico in generale, proud to be an apple fanboy and android lover.

Ti è piaciuto questo articolo?

Se vuoi ricevere via email tutti i miei nuovi articoli e tutorials su WordPress compila il box qui a fianco. Tranquillo, non riceverai alcuna email di spam ma solo contenuti di qualità!

Cerca

Facebook

WpGuida

Newsletter

Scarica ebook Guida Wordpress 4.x

Potrebbe Interessarti

thumbnail wordpress cosa sono e come modificarli

Thumbnail WordPress: cosa sono e come funzionano

6 Marzo 2015 da Dario Vinci

Rimuovere un plugin in Wordpress in modo definitivo

Rimuovere un Plugin su WordPress: ecco come farlo in modo appropriato!

30 Giugno 2016 da Dario Vinci

Quanto costa creare un sito

Quanto costa creare un sito

27 Novembre 2014 da Dario Vinci

Form di contatto wordpress - Contact Form 7

Creare un form di contatto

4 Febbraio 2015 da Dario Vinci

Disabilitare aggiornamenti automatici

Disabilitare gli aggiornamenti automatici di WordPress

4 Agosto 2014 da Dario Vinci

Random Post

Plugin Wordpress

I Plugin WordPress

Guida W3 Total Cache - Page Cache

Guida W3 Total Cache: Page Cache

Come implementare il lazy loading dei video su WordPress

Copyright © · 2019 WpGuida