Crearea unui simplu formular de contact pentru nevoile simple

Indiferent dacă începeți un blog simplu, creați un site web corporativ sau construiți un portofoliu creativ cu WordPress, este (aproape) întotdeauna necesară o pagină "Contactați-ne" și este (aproape) întotdeauna mai bine să aveți un formular de contact în loc de partajare adresa dvs. de e-mail în mod public (totuși, roboții de spam le iubește). Desigur, există o mulțime de plugin-uri de formular de contact excelent pentru WordPress, dar de ce bloate până site-ul cu plugin-uri grele cu o mulțime de interogări bazei de date, atunci când putem folosi doar un frumos, simplu personalizat shortcode plugin?

Beneficiile formării propriului dvs. formular de contact

Pluginurile sunt minunate, însă prea multe dintre ele, cu o multitudine de funcționalități de care nu aveți nevoie, vă pot bloat pe site-ul dvs. folosind conexiuni baze de date, executând cod PHP suplimentar, adăugând fișiere de corespondență CSS și fișiere JS în antetul dvs. doar vrei să stai departe de pluginurile existente, indiferent de cât de minunat este pluginul pe care îl vrei să îl folosești.

Dacă nu știți cum să codificați, trebuie să recunosc că mâinile sunt (un fel de) legat și că trebuie să utilizați pluginuri. Dar dacă sunteți familiarizat cu dezvoltarea WordPress la orice nivel (și presupun că sunteți, din moment ce sunteți încă cu mine), atunci ar trebui să luați în considerare beneficiile hacking-ului temei proprii sau codarea propriului plugin. Iată avantajele în mintea mea:

Optimizare - Utilizarea unui cod prea mare, mai ales a codului extra de care nu aveți nevoie, poate chiar împinge limitele planului dvs. de găzduire în unele cazuri. Dar chiar dacă aveți o mulțime de resurse pe serverul dvs., optimizarea este întotdeauna bună pentru sănătatea site-ului dvs..
curățenie - În afară de starea de sănătate a serverului, codul curat poate fi un avantaj imens pentru viteza de încărcare și parsing a site-ului. Prin codarea / hacking-ul pe cont propriu, folosiți doar ceea ce aveți nevoie și nu trebuie să încărcați multe lucruri pentru a utiliza o funcționalitate simplă pe site-ul dvs. Web. Este chiar bun pentru SEO, știi.
Bucuria de a lua controlul - Nu trebuie să subestimați niciodată puterea de a apela fotografiile. Luarea controlului asupra site-ului dvs. va face cu siguranta un designer / dezvoltator mult mai entuziast decat folosind o gama de coduri gata facute. De aceea, chiar dacă oferim codul complet pentru cei care nu doresc, eu personal cred că nu trebuie să copiați / lipiți codul aici, ci să-l scrieți singur. Chiar dacă tastați exact același cod, puteți vedea cum funcționează pluginul și simțiți încântarea preluării controlului. Serios.

Codul

Bine, destul de mult cu chit-chat - să începem să codificăm! Nu ne vom ocupa de cantități mari de cod sau de orice fel de muncă grea aici, deci chiar dacă sunteți începător la PHP și / sau WordPress, puteți înțelege codul urmând conducerea mea și cercetarea oricărei părți a cod pe care nu îl recunoașteți.

Este posibil să puneți acest cod direct în tema proprie functions.php fișier, dar o modalitate mai bună de a utiliza este ca un plugin. În acest fel, atunci când schimbați teme, nu pierdeți funcționalitatea și ajungeți la codurile scurte care sunt tipărite în conținutul dvs. Să începem cu informații despre plugin-ul standard:

 [e-mail de contact = "adresa [email protected]"] Versiune: 1.0 Autor: Barıș Ünver URI autor: http://beyn.org/ * / // Această linie de comentariu deține locul codului uimitor de simplu pe care îl vom scrie. Deci nu aveți nevoie să citiți acest lucru. ?>

O funcție mică de ajutor: `get_the_ip ()`

După cum puteți ghici din numele funcției, obținem adresa IP reală a utilizatorului, chiar dacă utilizatorul se conectează printr-un server proxy. Nu este firești, desigur, dar vom folosi oricum acest lucru ca un pic de informații suplimentare de la utilizator.

Practic, vom încerca să obținem cele diferite $ _SERVER variabile: HTTP_X_FORWARDED_FOR, HTTP_CLIENT_IP și REMOTE_ADDR, respectiv. Iată codul:

 funcția wptuts_get_the_ip () if (isset ($ _ SERVER ["HTTP_X_FORWARDED_FOR"])) returnați $ _SERVER ["HTTP_X_FORWARDED_FOR"];  elseif (isset ($ _ SERVER ["HTTP_CLIENT_IP"])) returnați $ _SERVER ["HTTP_CLIENT_IP"];  altceva return $ _SERVER ["REMOTE_ADDR"];

Codul scurt

Dacă urmați postările mele aici pe Wptuts +, știți că eu absolut dragoste WordPress "Shortcode API.

Voi împărți codul scurt în 3 secțiuni pentru a putea explica mai bine, dar să nu uităm să deschideți și să închideți mai întâi funcția de cod scurt:

 functie wptuts_contact_form_sc ($ atts) // Aceasta linie de comentariu, de asemenea, pastreaza locul codului scurt, dar simplu, care creeaza formularul nostru de contact. Și totuși încă pierzi timpul să citești acest comentariu. Bravo.  add_shortcode ("contact", "wptuts_contact_form_sc");

Atribute ale codului nostru scurt

Trebuie să stabilim câțiva atributele pentru a rămâne flexibile în timp ce sunt încă ușoare. Iată zece:

 extrageți (shortcode_atts (array (// dacă nu furnizați o adresă de e-mail, codul scurt va alege adresa de e-mail a administratorului: "email" => get_bloginfo ("admin_email" "label_subject" => "Subiect", "label_message" => "Mesajul dvs.", "label_submit" => "Submit", // mesajul de eroare atunci când cel puțin unul dintre câmpurile obligatorii este gol: "error_empty" => "Vă rugăm să completați toate câmpurile necesare", // mesajul de eroare atunci când adresa de e-mail nu este validă : "error_noemail" => "Vă rugăm să introduceți o adresă de e-mail validă", // și mesajul de succes când e-mailul este trimis: "succes" => "Vă mulțumim pentru e-mail! pentru dvs. cât mai curând posibil "), $ atts));

Amintiți-vă că le vom referi în codul nostru ca o variabilă cu numele atributului (de ex. $ label_submit).

E-mail prin e-mail

Aceasta este cea mai importantă parte a funcției, așa că voi continua și voi explica codul în interiorul codului, cu linii de comentarii:

 // dacă  element este POSTed, executați următorul cod dacă ($ _SERVER ['REQUEST_METHOD'] == 'POST') $ error = false; // setați "câmpurile obligatorii" pentru a verifica $ required_fields = array ("your_name", "email", "message", "subject"); // această parte aduce tot ce a fost postat, le dezinstalează și le permite să le folosim ca $ form_data ['subject'] foreach ($ _POST ca $ field => value $) if (get_magic_quotes_gpc ()) $ value = stripslashes (valoare $);  $ form_data [$ field] = strip_tags (valoare $);  // dacă câmpurile obligatorii sunt goale, comutați $ error la TRUE și setați textul rezultat în atributul shortcode numit 'error_empty' foreach ($ required_fields ca $ requ_field) $ value = trim ($ form_data [$ required_field]); dacă (gol (valoarea $)) $ error = true; $ result = $ error_empty;  și dacă e-mailul nu este valid, comutați între eroarea $ la TRUE și setați textul rezultat în atributul shortcode numit "error_noemail" dacă ! is_email ($ form_data ['email'])) $ error = Adevărat; $ rezultat = $ error_noemail;  dacă ($ error == false) $ email_subject = "[". get_bloginfo ("nume"). "]". $ Form_data [ 'subiect']; $ email_message = $ form_data ['mesaj']. "\ n \ nIP:". wptuts_get_the_ip (); $ header = "Din:". $ form_data ['name']. " <" . $form_data['email'] . ">\ n "; $ headers = =" Content-Type: text / plain; ($ email, $ email_subject, $ email_message, $ headers); $ result = $ success; $ sent = true; $ $ = $ $ = $ $ = ; // dar dacă $ error este încă FALSE, pune împreună variabilele POSTed și trimite e-mailul! if ($ error == false) // obține numele site-ului și îl pune în fața subiectului $ email_subject = "$ form_data ['subject']; // primiți mesajul din formular și adăugați adresa IP a utilizatorului sub el $ email_message = $ form_data ['message' ] \ n \ nIP: ".wptuts_get_the_ip (); / / setați anteturile de e-mail cu numele utilizatorului, adresa de e-mail și codarea caracterelor $ 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 "; // trimiteți e-mailul cu atributul shortcode numit 'email' și datele POSTed wp_mail mail_subject, $ email_message, $ headers); // și setați textul rezultat la atributul shortcode numit 'success' $ result = $ success; // ... și comutați variabila $ sent la TRUE $ sent = true;

Formularul de contact

Această parte este, desigur, la fel de importantă ca și partea anterioară. La urma urmei, cum poate codul anterior să trimită un e-mail dacă nu există un formular de contact? :)

 // daca nu exista nici un rezultat al rezultatului (adica nu exista nici o eroare sau succes, adica utilizatorul a deschis doar pagina si nu a facut nimic) nu este nevoie sa se afiseze variabila info $ daca ($ result! = "") $ info = '". $ rezultat. '
„;  // oricum, să construim formularul! (rețineți că folosim atributele de coduri scurte ca variabile cu numele lor) $ email_form = '  ". $ label_name. „:  
  ". $ label_email. „:  
  ". $ label_subject. „:  
  ". $ label_message. „: ". $ form_data ['mesaj']. ' 
   
 „;

Bacsis: Dacă ați analizat cu atenție codul HTML al formularului de contact, probabil ați văzut extra $ subiect variabil. Amintiți-vă de atributul shortcode "subiect" fără valoare implicită? Aceasta înseamnă că puteți utiliza codul scurt ca acesta, dacă doriți să setați un subiect implicit: [contact subject = "Cerere de angajare"]

`întoarcere` din codul scurt

Acest ultim bit este destul de simplu: afișați mesajul de succes dacă e-mailul este trimis sau formularul de e-mail și mesajul de eroare (dacă există unul). Iată codul:

 dacă ($ trimis == true) return $ info;  altceva return $ info. $ Email_form;

Nu mai afișăm din nou formularul dacă e-mailul este trimis, dar dacă vreți să-l arătați oricum, puteți folosi această linie simplă:

 returnați $ info. $ Email_form;

CSS

Desigur, codul în sine nu ar arăta grozav. Cu ceva machiaj, CSS, putem face ca forma noastră să fie mai frumoasă. Adăugați aceste linii de cod CSS în dvs. style.css fișier al temei dvs.:

 .eticheta formularului de contact, intrarea formularului de contact, formularul de contact-textarea display: block; margine: 10px 0;  .contact-form label font-size: larger; . introduceți formularul de contact padding: 5px;  #cf_message lățime: 90%; padding: 10px;  #cf_send padding: 5px 10px;

Dacă ați făcut totul bine, veți vedea ceva similar cu imaginea de mai jos:

Felicitări, tocmai v-ați construit propriul cod de contact shortcode!

Concluzie

Această formă simplă de contact este adecvată pentru majoritatea site-urilor Web, dar dacă doriți să adăugați mai multe câmpuri, trebuie doar să editați formularul și să adăugați $ Form_data [ 'name_of_the_new_field'] variabile în $ email_message variabilă (și poate adăuga numele câmpului la $ required_fields mulțime.

Dacă aveți idei despre cum să îmbunătățiți acest cod sau să afișați paginile site-ului dvs. pe care le-ați utilizat, vă rugăm să ne trimiteți comentariul dvs. mai jos!

Cod