Opprette et enkelt kontaktskjema for enkle behov

Enten du starter en enkel blogg, lager en bedriftens nettside eller bygger en kreativ portefølje med WordPress, er en (Kontakt) side alltid (nesten) alltid nødvendig, og det er (nesten) alltid bedre å ha et kontaktskjema i stedet for å dele Din e-postadresse offentlig (spamroboter elsker dem, skjønt). Selvfølgelig er det nok av flotte kontaktskjemaer for WordPress, men hvorfor oppblåser nettstedet med store plugins med mange databasespørsmål, når vi bare kan bruke en nydelig, enkel tilpasset shortcode-plugin i stedet?

Fordeler med å bygge ditt eget kontaktskjema

Plugins er kjempebra, men for mange av dem med mye funksjonalitet du ikke trenger, kan du oppblåse nettstedet ditt ved å bruke databasetilkoblinger, kjører ekstra PHP-kode, legger til CSS stylesheets og JS-filer til overskriften din ... så på et tidspunkt Vil bare holde seg borte fra eksisterende programtillegg, uansett hvor gøy pluginet du vil bruke.

Hvis du ikke vet hvordan du skal kode, må jeg innrømme at hendene dine er (slags) bundet og du er bundet til å bruke plugins. Men hvis du er kjent med WordPress-utvikling på et hvilket som helst nivå (og jeg antar at du er, siden du fortsatt er hos meg), bør du vurdere fordelene med å hacke ditt eget tema eller kode ditt eget plugin. Her er fordelene i mitt sinn:

optimalisering - Bruk av for mye kode, spesielt ekstra kode du ikke trenger, kan til og med skape hostingplanens grenser i noen tilfeller. Men selv om du har mange ressurser på serveren din, er optimalisering alltid bra for webområdet ditt.
renslighet - Bortsett fra helsen til serveren, kan renere kode være en stor fordel for din nettside lasting og parsing hastighet. Ved å kode / hacking på egenhånd bruker du bare det du trenger og trenger ikke å laste tonnevis av ting for å kunne utnytte en enkel funksjonalitet på nettstedet ditt. Det er enda bra for SEO, vet du.
Gleden av å ta kontroll - Du bør aldri undervurdere kraften til å ringe bildene. Å ta kontroll på nettstedet ditt gjør deg definitivt en mer entusiastisk designer / utvikler enn å bruke en haug med ferdig kode. Derfor, selv om vi gir full kode for de som ikke vil, tror jeg personlig at du ikke skal kopiere / lime inn koden her, men skriv den selv. Selv om du skriver nøyaktig samme kode, kan du se hvordan plugin fungerer, og du føler deg glad for å ta kontroll. Alvor.

Koden

Ok, nok med chit-chatten - la oss starte kodingen! Vi kommer ikke til å håndtere store mengder kode eller noe hardt arbeid her, så selv om du er nybegynner på PHP og / eller WordPress, kan du forstå koden ved å følge ledelsen og undersøke hvilken som helst del av kode som du ikke gjenkjenner.

Det er mulig å sette denne koden direkte til temaet ditt functions.php fil, men en bedre måte å gå på, bruker den som et plugin. På denne måten når du bytter temaer, mister du ikke funksjonalitet og ender opp med snarveier som skrives ut i innholdet ditt. La oss starte med standard plugin-informasjonen:

 [kontakt email = "[email protected]"] Versjon: 1.0 Forfatter: Barış Ünver Forfatter URI: http://beyn.org/ * / // Denne kommentaren inneholder stedet for den utrolig enkle koden vi skal skrive. Så du trenger ikke virkelig å lese dette. ?>

En liten hjelperfunksjon: `get_the_ip ()`

Som du kan gjette fra navnet på funksjonen, får vi den virkelige IP-adressen til brukeren, selv om brukeren kobler seg via en proxy-server. Det er ikke kollisikkert, selvfølgelig, men vi skal bruke dette som en ekstra bit informasjon fra brukeren uansett.

I utgangspunktet skal vi prøve å få de forskjellige $ _SERVER variabler: HTTP_X_FORWARDED_FOR, HTTP_CLIENT_IP og REMOTE_ADDR, henholdsvis. Her er koden:

 funksjon 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"];  ellers return $ _SERVER ["REMOTE_ADDR"];

Kortnummeret

Hvis du følger mine innlegg her på Wptuts +, vet du at jeg absolutt kjærlighet WordPress 'Shortcode API.

Jeg skal dele kortnummeret i 3 seksjoner for å kunne forklare det bedre, men la oss ikke glemme å åpne og lukke kortnummerfunksjonen først:

 funksjon wptuts_contact_form_sc ($ atts) // Denne kommentaren inneholder også stedet for den briljante, men enkle shortcode som skaper vårt kontaktskjema. Og likevel spilder du tiden for å lese denne kommentaren. Bravo.  add_shortcode ('kontakt', 'wptuts_contact_form_sc');

Attributter til vår kortkode

Vi må sette Noen attributter for å være fleksibel mens du fortsatt er lett. Her er ti:

 utdrag (shortcode_atts (array (// hvis du ikke oppgir e-postadresse, vil kortnummeret velge e-postadressen til administrasjonen: "email" => get_bloginfo ('admin_email'), "subject" => "", "label_name" => "Ditt navn", "label_email" => "Din e-postadresse", "label_subject" => "Subject", "label_message" => "Din melding", "label_submit" => "Send", // feilmeldingen når minst ett av de obligatoriske feltene er tomme: "error_empty" => "Vennligst fyll inn alle obligatoriske felt.", // feilmeldingen når e-postadressen ikke er gyldig : "error_noemail" => "Vennligst skriv inn en gyldig e-postadresse.", // og suksessmeldingen når e-posten sendes: "suksess" => "Takk for din e-post! Vi kommer tilbake til deg så snart vi kan. "), $ atts));

Husk at vi skal referere dem i vår kode som en variabel med attributtens navn (f.eks. $ label_submit).

E-post e-posten

Dette er den viktigste delen av funksjonen, så jeg går videre og forklarer koden inne i koden, med kommentar linjer:

 // hvis  elementet er POSTed, kjør følgende kode hvis ($ _SERVER ['REQUEST_METHOD'] == 'POST') $ error = false; // sett "obligatoriske felt" for å sjekke $ required_fields = array ("ditt navn", "e-post", "melding", "emne"); // denne delen henter alt som har blitt postet, sanitiserer dem og lar oss bruke dem som $ form_data ['subject'] foreach ($ _POST som $ field => $ verdi) if (get_magic_quotes_gpc ()) $ value = stripslashes ($ verdi);  $ form_data [$ field] = strip_tags ($ verdi);  // Hvis de obligatoriske feltene er tomme, bytt $ feil til SANT og sett resultatteksten til kortkodattributtet som heter 'error_empty' foreach ($ required_fields som $ required_field) $ value = trim ($ form_data [$ required_field]); hvis (tom ($ verdi)) $ error = true; $ resultat = $ error_empty;  // og hvis e-posten ikke er gyldig, bytt $ feil til SANT og sett resultatteksten til koden for kodenavnet heter 'error_noemail' hvis (! is_email ($ form_data ['email'])) $ error = ekte; $ resultat = $ error_noemail;  hvis ($ error == false) $ email_subject = "[". get_bloginfo ('navn'). "]". $ Form_data [ 'emne']; $ email_message = $ form_data ['message']. "\ n \ nIP:". wptuts_get_the_ip (); $ headers = "From:". $ 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 = $ suksess; $ sent = true ; // men hvis $ feilen fortsatt er feil, legg sammen POSTed-variablene og send e-posten! Hvis ($ error == false) // få nettstedets navn og legg det foran emnet $ email_subject = "[". get_bloginfo ('name').]]. $ form_data ['subject']; // få meldingen fra skjemaet og legg til brukerens IP-adresse under det $ email_message = $ form_data ['message' ]. \ n \ nIP: ". wptuts_get_the_ip (); // angi e-posthodene med brukerens navn, e-postadresse og tegnkodning $ 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 "; // send e-posten med kortnummerattributtet som heter 'email' og POSTed data wp_mail ($ email, $ email_subject, $ email_message, $ headers); // og sett resultatteksten til shortcode attributtet heter 'suksess' $ resultat = $ suksess; // ... og bytt den $ sendte variabelen til TRUE $ sent = true;

Kontaktskjemaet

Denne delen er selvsagt så viktig som forrige del. Tross alt, hvordan kan den forrige koden sende en e-post hvis det ikke er noen kontaktskjema? :)

 // hvis det ikke er noen $ resultattekst (det betyr at det ikke er noen feil eller suksess, noe som betyr at brukeren nettopp åpnet siden og ikke gjorde noe), er det ikke nødvendig å vise $ info-variabelen hvis ($ result! = "") $ info = ''. $ resultat. '
';  // likevel, la oss bygge skjemaet! (husk at vi bruker shortcode attributter som variabler med navnene deres) $ email_form = '  '. $ label_name. ':  
  '. $ label_email. ':  
  '. $ label_subject. ':  
  '. $ label_message. ': '. $ form_data ['message']. ' 
   
 ';

Tips: Hvis du så nøye på HTML-koden til kontaktskjemaet, så så du sannsynligvis det ekstra $ emnet variabel. Husk kortkodattributtet "emne" uten standardverdi? Dette betyr at du kan bruke kortnummeret som dette hvis du vil angi et standardfelt: [kontaktperson = "Jobb søknad"]

De `komme tilbake` av kortnummeret

Denne siste bit er ganske enkel: Vis suksessmeldingen hvis e-posten er sendt, eller e-postskjemaet og feilmeldingen (hvis det er en). Her er koden:

 hvis ($ send == true) return $ info;  ellers return $ info. $ Email_form;

Vi viser ikke skjemaet igjen hvis e-posten er sendt, men hvis du vil vise det uansett, kan du bruke denne enkle linjen i stedet:

 returnere $ info. $ Email_form;

CSS

Selvfølgelig ville koden i seg selv ikke se bra ut. Med litt sminke, CSS, kan vi gjøre vårt skjema mer prettiert. Legg til disse linjene med CSS-kode i din style.css fil av temaet ditt:

 .kontaktformular etikett, .contact-form input, .contact-form textarea display: block; margin: 10px 0;  .contact-form label font-size: større;  .contact-form input polstring: 5px;  #cf_message bredde: 90%; polstring: 10px;  #cf_send polstring: 5px 10px;

Hvis du gjorde alt riktig, vil du se noe som ligner på bildet nedenfor:

Gratulerer, du har nettopp bygget ditt eget kontaktskjema kortnummer!

Konklusjon

Denne enkle kontaktskjemaet er tilstrekkelig for de fleste nettsteder, men hvis du vil legge til flere felt til det, trenger du bare å redigere skjemaet og legge til $ Form_data [ 'name_of_the_new_field'] variabler inn i $ email_message variabel (og kanskje legge feltets navn til $ required_fields matrise.

Hvis du har noen ideer om hvordan du kan forbedre denne koden eller vise nettsidene dine der du brukte den, vennligst del din kommentar med oss nedenfor!

Kode