Een eenvoudig contactformulier maken voor eenvoudige behoeften

Of u nu een eenvoudige blog opzet, een bedrijfswebsite maakt of een creatieve portfolio bouwt met WordPress, een "Contact (Us)" -pagina is (bijna) altijd noodzakelijk en het is (bijna) altijd beter om een contactformulier te hebben in plaats van te delen uw e-mailadres openbaar (spamrobots houden er echter van). Natuurlijk zijn er veel geweldige plug-ins voor contactformulieren voor WordPress, maar waarom zou je de website opzwepen met zware plug-ins met veel databasequery's, wanneer we in plaats daarvan gewoon een mooie, eenvoudige aangepaste shortcode-plug-in kunnen gebruiken??

Voordelen van het bouwen van uw eigen contactformulier

Plug-ins zijn geweldig, maar te veel van hen met veel functionaliteit die je niet nodig hebt, kan je website in de war maken door databaseverbindingen te gebruiken, extra PHP-code uit te voeren, CSS-stylesheets en JS-bestanden aan je header toe te voegen ... dus op een gegeven moment wil gewoon wegblijven van bestaande plug-ins, ongeacht hoe geweldig de plug-in is die u wilt gebruiken.

Als je niet weet hoe je moet coderen, moet ik toegeven dat je handen (soort) vastgebonden zijn en je bent verplicht om plug-ins te gebruiken. Maar als u bekend bent met de ontwikkeling van WordPress op elk niveau (en ik neem aan dat u dat bent, aangezien u nog steeds bij mij bent), dan zou u de voordelen van het hacken van uw eigen thema of het coderen van uw eigen plug-in moeten overwegen. Hier zijn de voordelen in mijn gedachten:

optimalisatie - Het gebruik van te veel code, met name extra code die je niet nodig hebt, kan in sommige gevallen zelfs de limieten van je hostingplan verleggen. Maar zelfs als u over voldoende bronnen op uw server beschikt, is optimalisatie altijd goed voor de gezondheid van uw website.
zindelijkheid - Afgezien van de gezondheid van de server, kan schonere code een enorm voordeel zijn voor de laad- en ontleedsnelheid van uw website. Door alleen te coderen / hacken, gebruik je gewoon wat je nodig hebt en hoef je niet veel dingen te laden om een eenvoudige functionaliteit op je website te gebruiken. Het is zelfs goed voor SEO, weet je.
De vreugde om de controle te nemen - Onderschat nooit de kracht van de schoten. De controle nemen over je website maakt je absoluut een meer enthousiaste ontwerper / ontwikkelaar dan een stapel kant-en-klare code te gebruiken. Dat is waarom, hoewel we de volledige code leveren voor degenen die dat niet willen, ik persoonlijk denk dat je de code hier niet moet kopiëren / plakken, maar het zelf moet schrijven. Zelfs als u exact dezelfde code typt, kunt u zien hoe de plug-in werkt en voelt u de verrukking om de controle te nemen. Ernstig.

De code

Oké, genoeg met de chit-chat - laten we beginnen met coderen! We gaan hier niet omgaan met enorme hoeveelheden code of hard werk, dus zelfs als je een beginner bent op PHP en / of WordPress, kun je de code begrijpen door mijn voorbeeld te volgen en elk deel van de code te onderzoeken. code die u niet herkent.

Het is mogelijk om deze code rechtstreeks op uw thema's te zetten functions.php bestand, maar een betere manier om dit te doen, is door het als een plug-in te gebruiken. Op deze manier verliest u geen functionaliteit en schakelt u geen shortcodes uit die in uw inhoud worden afgedrukt. Laten we beginnen met de standaard plugin-informatie:

 [contact email = "[email protected]"] Versie: 1.0 Auteur: Barış Ünver Auteur URI: http://beyn.org/ * / // Deze commentaarregel bevat de plaats van de verbazingwekkend eenvoudige code die we gaan schrijven. Dus je hoeft dit niet echt te lezen. ?>

Een Tiny Helper-functie: `get_the_ip ()`

Zoals u kunt raden aan de hand van de naam van de functie, krijgen we het echte IP-adres van de gebruiker, zelfs als de gebruiker verbinding maakt via een proxyserver. Het is natuurlijk niet kogelvrij, maar we gaan dit toch gebruiken als een extra stukje informatie van de gebruiker.

Kortom, we gaan proberen het verschil te maken $ _SERVER variabelen: HTTP_X_FORWARDED_FOR, HTTP_CLIENT_IP en REMOTE_ADDR, respectievelijk. Hier is de code:

 functie 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"];

De shortcode

Als je mijn berichten hier op Wptuts + volgt, weet je dat ik absoluut liefde WordPress 'Shortcode API.

Ik ga de shortcode in 3 secties verdelen om het beter te kunnen uitleggen, maar laten we niet vergeten om eerst de shortcode-functie te openen en te sluiten:

 function wptuts_contact_form_sc ($ atts) // Deze regel commentaar bevat ook de plaats van de briljante maar toch eenvoudige shortcode die ons contactformulier creëert. En toch verspil je nog steeds je tijd om deze opmerking te lezen. Bravo.  add_shortcode ('contact', 'wptuts_contact_form_sc');

Attributen van onze shortcode

We moeten instellen een paar attributen om flexibel te blijven terwijl ze nog steeds licht van gewicht zijn. Hier zijn tien:

 extract (shortcode_atts (array (// als u geen e-mailadres opgeeft, kiest de shortcode het e-mailadres van de beheerder: "email" => get_bloginfo ('admin_email'), "subject" => "", "label_name" => "Uw naam", "label_email" => "Uw e-mailadres", "label_subject" => "Onderwerp", "label_message" => "Uw bericht", "label_submit" => "Verzenden", // het foutbericht wanneer ten minste een van de verplichte velden leeg is: "error_empty" => "Vul alle vereiste velden in.", // het foutbericht wanneer het e-mailadres niet geldig is : "error_noemail" => "Voer een geldig e-mailadres in.", // en het succesbericht wanneer de e-mail is verzonden: "succes" => "Bedankt voor uw e-mail! We komen terug om u zo snel als we kunnen. "), $ atts));

Onthoud dat we in onze code naar hen zullen verwijzen als een variabele met de naam van het kenmerk (bijv. $ label_submit).

E-mailen per e-mail

Dit is het belangrijkste onderdeel van de functie, dus ik zal doorgaan en de code uitleggen in de code, met commentaarregels:

 // als het  element is POSTed, voer de volgende code uit als ($ _SERVER ['REQUEST_METHOD'] == 'POST') $ error = false; // stel de "verplichte velden" in om $ required_fields = array ("your_name", "email", "message", "subject") te controleren; // dit deel haalt alles op dat POSTed is, zuivert ze en laat ons ze gebruiken als $ form_data ['subject'] foreach ($ _POST als $ field => $ value) if (get_magic_quotes_gpc ()) $ value = stripslashes ($ waarde);  $ form_data [$ field] = strip_tags ($ waarde);  // als de vereiste velden leeg zijn, zet u $ error op TRUE en stelt u de resultatentekst in op het shortcode-attribuut met de naam 'error_empty' foreach ($ required_fields als $ required_field) $ value = trim ($ form_data [$ required_field]); if (empty ($ value)) $ error = true; $ result = $ error_empty;  // en als de e-mail niet geldig is, zet je de $ error op TRUE en stel je de result-tekst in op het shortcode-attribuut met de naam 'error_noemail' if (! is_email ($ form_data ['email'])) $ error = true; $ result = $ error_noemail;  if ($ error == false) $ email_subject = "[". get_bloginfo ('naam'). "]". $ Form_data [ 'subject']; $ email_message = $ form_data ['message']. "\ n \ nIP:". wptuts_get_the_ip (); $ headers = "Van:". $ form_data ['naam']. " <" . $form_data['email'] . ">\ n "; $ headers. =" Inhoudstype: tekst / gewoon; charset = UTF-8 \ n "; $ headers. =" Content-Transfer-Encoding: 8bit \ n "; wp_mail ($ email, $ email_subject, $ email_message, $ headers); $ result = $ success; $ sent = true ; // maar als de $ -fout nog ONWAAR is, stel dan de POST-variabelen samen en verstuur de e-mail! if ($ error == false) // haal de naam van de website op en zet deze voor het onderwerp $ email_subject = "[". get_bloginfo ('naam'). "]". $ form_data ['subject']; // haal het bericht op van het formulier en voeg het IP-adres van de gebruiker eronder toe $ email_message = $ form_data ['message' ]. "\ n \ nIP:". wptuts_get_the_ip (); // stel de e-mailkopteksten in met de gebruikersnaam, het e-mailadres en het teken dat codeert voor $ headers = "Van:". $ form_data ['uw_naam']. " <" . $form_data['email'] . ">\ n "; $ headers. =" Inhoudstype: tekst / gewoon; charset = UTF-8 \ n "; $ headers. =" Content-Transfer-Encoding: 8bit \ n "; // verzend de e-mail met het shortcode-attribuut met de naam 'email' en de POST-gegevens wp_mail ($ email, $ email_subject, $ email_message, $ headers); // en stel de resultatentekst in op het shortcode-attribuut met de naam 'success' $ result = $ success; // ... en verander de variabele $ sent to TRUE $ sent = true;

Het contactformulier

Dit deel is natuurlijk net zo belangrijk als het vorige deel. Hoe kan de vorige code immers een e-mail sturen als er geen contactformulier is? :)

 // als er geen $ result-tekst is (wat betekent dat er geen fout of succes is, wat betekent dat de gebruiker net de pagina heeft geopend en niets heeft gedaan), hoeft de $ info-variabele niet te worden weergegeven ($ result! = "") $ info = ''. $ resultaat. '
';  // Anyways, laten we het formulier bouwen! (vergeet niet dat we shortcode-kenmerken gebruiken als variabelen met hun namen) $ email_form = '  '. $ label_name. ':  
  '. $ label_email. ':  
  '. $ label_subject. ':  
  '. $ label_message. ': '. $ form_data ['message']. ' 
   
 ';

Tip: Als je goed hebt gekeken naar de HTML-code van het contactformulier, zag je waarschijnlijk de extra $ subject variabel. Denk aan het shortcode-kenmerk 'onderwerp' zonder standaardwaarde? Dit betekent dat u de shortcode zo kunt gebruiken, als u een standaardonderwerp wilt instellen: [contact subject = "Sollicitatie"]

De `terugkeer` van de shortcode

Dit laatste is vrij eenvoudig: Toon het succesbericht als de e-mail is verzonden, of het e-mailformulier en het foutbericht (als er een is). Hier is de code:

 if ($ sent == true) return $ info;  else return $ info. $ Email_form;

We geven het formulier niet opnieuw weer als de e-mail is verzonden, maar als u het toch wilt laten zien, kunt u in plaats daarvan deze eenvoudige regel gebruiken:

 return $ info. $ Email_form;

De CSS

Natuurlijk ziet de code er zelf niet geweldig uit. Met wat make-up, CSS, kunnen we onze vorm mooier maken. Voeg deze regels CSS-code toe aan uw style.css bestand van uw thema:

 .contact-formulierlabel, .contact-form input, .contact-form textarea display: block; marge: 10 px 0;  .contact-form label font-size: larger;  .contact-form input opvulling: 5px;  #cf_message width: 90%; opvulling: 10px;  #cf_send opvulling: 5px 10px;

Als je alles goed hebt gedaan, zie je iets soortgelijks als de afbeelding hieronder:

Gefeliciteerd, je hebt zojuist je eigen shortcode in contactformulier gebouwd!

Conclusie

Dit eenvoudige contactformulier is geschikt voor de meeste websites, maar als u meer velden wilt toevoegen, hoeft u alleen het formulier te bewerken en de velden toe te voegen. $ Form_data [ 'name_of_the_new_field'] variabelen in de $ email_message variabele (en misschien de veldnaam toevoegen aan de $ required_fields rangschikking.

Als u ideeën heeft om deze code te verbeteren of uw webpagina's weer te geven waar u deze hebt gebruikt, deel uw opmerking hieronder met ons!

Code