Creazione di un modulo di contatto semplice per esigenze semplici

Sia che stiate iniziando un semplice blog, creando un sito Web aziendale o creando un portfolio creativo con WordPress, una pagina "Contatti (Us)" è (quasi) sempre necessaria ed è (quasi) sempre meglio avere un modulo di contatto invece di condividere il tuo indirizzo e-mail pubblicamente (i robot spam li adorano, però). Naturalmente, ci sono un sacco di ottimi plug-in per i form di contatto per WordPress, ma perché gonfiare il sito web con estesi plugin con molte query di database, quando invece possiamo usare solo un delizioso plugin per shortcode personalizzato.?

I vantaggi di costruire il proprio modulo di contatto

I plugin sono fantastici, ma troppi di essi con molte funzionalità che non ti servono possono gonfiare il tuo sito web usando connessioni di database, eseguendo codice PHP aggiuntivo, aggiungendo fogli di stile CSS e file JS alla tua intestazione ... quindi, ad un certo punto, tu voglio solo stare lontano dai plugin esistenti, indipendentemente da quanto sia fantastico il plugin che vuoi usare.

Se non sai come codificare, devo ammettere che le tue mani sono (specie) legate e che sei destinato a usare i plugin. Ma se hai familiarità con lo sviluppo di WordPress a qualsiasi livello (e presumo che tu lo sia, dal momento che sei ancora con me), allora dovresti considerare i vantaggi di hackerare il tuo tema o codificare il tuo plugin. Ecco i vantaggi nella mia mente:

Ottimizzazione - L'utilizzo di un numero eccessivo di codice, in particolare di un codice extra non necessario, può persino spingere i limiti del piano di hosting in alcuni casi. Ma anche se hai molte risorse sul tuo server, l'ottimizzazione è sempre utile per la salute del tuo sito web.
Pulizia - Oltre alla salute del server, un codice più pulito può essere un enorme vantaggio per il caricamento e la velocità di analisi del tuo sito web. Con la codifica / l'hacking da soli, basta utilizzare ciò di cui si ha bisogno e non è necessario caricare tonnellate di materiale per utilizzare una semplice funzionalità sul proprio sito Web. È anche buono per il SEO, lo sai.
La gioia di prendere il controllo - Non dovresti mai sottovalutare il potere di chiamare i colpi. Assumere il controllo sul tuo sito web ti rende sicuramente un designer / sviluppatore più entusiasta rispetto all'utilizzo di una serie di codici già pronti. Ecco perché, anche se forniamo il codice completo per coloro che non lo desiderano, personalmente penso che non dovresti copiare / incollare il codice qui, ma scriverlo da solo. Anche se digiti esattamente lo stesso codice, puoi vedere come funziona il plugin e senti la gioia di prendere il controllo. Sul serio.

Il codice

Va bene, basta con la chat chit - iniziamo a programmare! Non abbiamo intenzione di gestire enormi quantità di codice o qualsiasi tipo di duro lavoro qui, quindi anche se sei un principiante in PHP e / o WordPress, puoi capire il codice seguendo il mio esempio e ricercando qualsiasi parte del codice codice che non riconosci.

È possibile inserire questo codice direttamente sul tema functions.php file, ma un modo migliore per usarlo è come un plugin. In questo modo quando cambi temi, non perdi funzionalità e finisci con lo shortcode stampato nel tuo contenuto. Iniziamo con le informazioni del plug-in standard:

 [email di contatto = "[email protected]"] Versione: 1.0 Autore: Barış Ünver Autore URI: http://beyn.org/ * / // Questa linea di commenti contiene il posto del codice sorprendentemente semplice che stiamo per scrivere. Quindi non hai davvero bisogno di leggere questo. ?>

Una piccola funzione di aiuto: `get_the_ip ()`

Come puoi intuire dal nome della funzione, stiamo ottenendo il vero indirizzo IP dell'utente, anche se l'utente si sta connettendo attraverso un server proxy. Ovviamente non è a prova di proiettile, ma lo utilizzeremo comunque come ulteriore informazione dell'utente.

Fondamentalmente, cercheremo di ottenere il diverso $ _SERVER variabili: HTTP_X_FORWARDED_FOR, HTTP_CLIENT_IP e REMOTE_ADDR, rispettivamente. Ecco il codice:

 function wptuts_get_the_ip () if (isset ($ _ SERVER ["HTTP_X_FORWARDED_FOR"])) return $ _SERVER ["HTTP_X_FORWARDED_FOR"];  elseif (isset ($ _ SERVER ["HTTP_CLIENT_IP"])) return $ _SERVER ["HTTP_CLIENT_IP"];  else return $ _SERVER ["REMOTE_ADDR"];

Lo shortcode

Se segui i miei post qui su Wptuts +, lo sai che sono assolutamente amore API Shortcode di WordPress.

Ho intenzione di dividere lo shortcode in 3 sezioni per poterlo spiegare meglio, ma non dimentichiamo di aprire e chiudere prima la funzione shortcode:

 function wptuts_contact_form_sc ($ atts) // Anche questa riga di commento mantiene il posto dello shortcode geniale ma semplice che crea il nostro modulo di contatto. Eppure stai ancora sprecando il tuo tempo per leggere questo commento. Bravo.  add_shortcode ('contact', 'wptuts_contact_form_sc');

Attributi del nostro Shortcode

Dobbiamo impostare alcune attributi per rimanere flessibile pur rimanendo leggero. Ecco dieci:

 extract (shortcode_atts (array (// se non si fornisce un indirizzo e-mail, lo shortcode sceglierà l'indirizzo e-mail dell'amministratore: "email" => get_bloginfo ('admin_email'), "subject" => "", "label_name" => "Nome", "label_email" => "Indirizzo e-mail", "label_subject" => "Oggetto", "label_message" => "Il tuo messaggio", "label_submit" => "Invia", // il messaggio di errore quando almeno uno dei campi richiesti è vuoto: "error_empty" => "Si prega di compilare tutti i campi richiesti.", // il messaggio di errore quando l'indirizzo e-mail non è valido : "error_noemail" => "Inserisci un indirizzo e-mail valido.", // e il messaggio di successo quando viene inviata l'e-mail: "successo" => "Grazie per la tua e-mail! a voi appena possibile. "), $ atts));

Ricorda che li faremo riferimento nel nostro codice come variabile con il nome dell'attributo (ad es. $ label_submit).

E-mail per l'e-mail

Questa è la parte più importante della funzione, quindi vado avanti e spiegherò il codice all'interno del codice, con le righe di commento:

 // se la  elemento è POST, eseguire il seguente codice if ($ _SERVER ['REQUEST_METHOD'] == 'POST') $ error = false; // imposta i "campi obbligatori" per controllare $ required_fields = array ("tuo_nome", "email", "messaggio", "oggetto"); // questa parte recupera tutto ciò che è stato POST, li sanifica e ci consente di usarli come $ form_data ['subject'] foreach ($ _POST come $ campo => $ valore) if (get_magic_quotes_gpc ()) $ value = stripslashes ($ valore);  $ form_data [$ field] = strip_tags ($ value);  // se i campi richiesti sono vuoti, commuta $ error su TRUE e imposta il testo del risultato sull'attributo shortcode denominato 'error_empty' foreach ($ required_fields come $ required_field) $ value = trim ($ form_data [$ required_field]); if (vuoto (valore $)) $ error = true; $ risultato = $ error_empty;  // e se l'e-mail non è valida, imposta $ error su TRUE e imposta il testo del risultato all'attributo shortcode denominato 'error_noemail' if (! is_email ($ form_data ['email'])) $ error = vero; $ result = $ error_noemail;  if ($ error == false) $ email_subject = "[". get_bloginfo ('nome'). "]". $ Form_data [ 'soggetto']; $ email_message = $ form_data ['messaggio']. "\ n \ nIP:". wptuts_get_the_ip (); $ headers = "Da:". $ form_data ['name']. " <" . $form_data['email'] . ">\ n "; $ headers. =" Content-Type: text / plain; charset = UTF-8 \ n "; $ headers. =" Content-Transfer-Encoding: 8bit \ n "; wp_mail ($ email, $ email_subject, $ email_message, $ headers); $ result = $ success; $ sent = true ; // ma se $ error è ancora FALSE, crea le variabili POSTed e invia l'e-mail! if ($ error == false) // richiama il nome del sito web e lo mette davanti all'oggetto $ email_subject = "[". get_bloginfo ('name'). "]". $ form_data ['subject']; // ottiene il messaggio dal modulo e aggiunge l'indirizzo IP dell'utente sotto di esso $ email_message = $ form_data ['message' ]. "\ n \ nIP:". wptuts_get_the_ip (); // imposta le intestazioni e-mail con il nome utente, l'indirizzo e-mail e la codifica dei caratteri $ headers = "From:". $ form_data ['your_name']. " <" . $form_data['email'] . ">\ n "; $ headers. =" Content-Type: text / plain; charset = UTF-8 \ n "; $ headers. =" Content-Transfer-Encoding: 8bit \ n "; // invia l'e-mail con l'attributo shortcode denominato" email "e i dati POSTed wp_mail ($ email, $ email_subject, $ email_message, $ headers); // e imposta il testo del risultato all'attributo shortcode denominato 'success' $ result = $ success; // ... e passa la variabile $ inviata a TRUE $ sent = true;

Il modulo di contatto

Questa parte è, ovviamente, importante quanto la parte precedente. Dopo tutto, come può il codice precedente inviare un'e-mail se non c'è un modulo di contatto? :)

 // se non c'è un testo $ result (cioè non c'è errore o successo, significa che l'utente ha appena aperto la pagina e non ha fatto nulla) non è necessario mostrare la variabile $ info if ($ result! = "") $ info = ''. $ risultato. '
';  // comunque, costruiamo il modulo! (ricorda che stiamo usando gli attributi shortcode come variabili con i loro nomi) $ email_form = '  '. $ label_name. ':  
  '. $ label_email. ':  
  '. $ label_subject. ':  
  '. $ label_message. ': '. $ form_data ['message']. ' 
   
 ';

Mancia: Se hai guardato attentamente il codice HTML del modulo di contatto, probabilmente hai visto l'extra $ subject variabile. Ricorda l'attributo shortcode 'subject' senza valore predefinito? Ciò significa che è possibile utilizzare lo shortcode come questo, se si desidera impostare un oggetto predefinito: [contact subject = "Domanda di lavoro"]

Il `ritorno` dello Shortcode

Questo ultimo bit è piuttosto semplice: mostra il messaggio di successo se viene inviata l'e-mail, o il modulo e-mail e il messaggio di errore (se ce n'è uno). Ecco il codice:

 se ($ inviato == true) return $ info;  else return $ info. $ Email_form;

Non visualizzeremo di nuovo il modulo se l'e-mail è stata inviata, ma se vuoi mostrarla comunque, puoi usare questa semplice linea invece:

 restituire $ informazioni. $ Email_form;

Il CSS

Certo, il codice da solo non sarebbe eccezionale. Con un po 'di trucco, CSS, possiamo rendere più bella la nostra forma. Aggiungi queste righe di codice CSS nel tuo style.css file del tuo tema:

 .etichetta del modulo di contatto, .contact-form input, .contact-form textarea display: block; margine: 10px 0; . etichetta contact-form dimensione font: più grande; . input di forma di contatto padding: 5px;  #cf_message width: 90%; imbottitura: 10px;  #cf_send padding: 5px 10px;

Se hai fatto tutto bene, vedrai qualcosa di simile all'immagine qui sotto:

Congratulazioni, hai appena creato il tuo shortcode con il modulo di contatto!

Conclusione

Questo semplice modulo di contatto è adeguato per la maggior parte dei siti Web, ma se si desidera aggiungere ulteriori campi, è sufficiente modificare il modulo e aggiungere il $ Form_data [ 'name_of_the_new_field'] variabili nel $ email_message variabile (e magari aggiungere il nome del campo al $ required_fields schieramento.

Se hai qualche idea su come migliorare questo codice o mostrare le pagine del tuo sito web in cui lo hai usato, ti preghiamo di condividere il tuo commento con noi qui sotto!

Codice