Mini Guide til kontaktskjema 7

Vanligvis trenger et nettsted et kontaktskjema for å kommunisere med nettstedseieren. En av våre favoritter er Kontaktskjema 7. La oss se hva det kan gjøre!

Kontaktskjema 7 er en gratis, enkel og fleksibel (i WordPress betyr dette vanligvis at det er en enkel oppsett for de som liker det enkelt, og mye dybde og kompleksitet for folk som liker å fitte) kontaktskjemaet av Takayuki Miyoshi. Noen sier at kontaktskjema 7 er et av de beste skjemainnstillingene for vårt favorittinnholdsstyringssystem. Pluggen ble sist oppdatert i februar og har blitt lastet ned totalt 6 457 967 ganger (på tidspunktet for skriving av denne artikkelen).

Pluggen kan også håndtere flere kontaktskjemaer, og støtter AJAX-innsending, CAPTCHA, Akismet spamfiltrering og filopplasting. Den nyeste versjonen ved skriving av denne artikkelen er 3.1.1. Den offisielle nettsiden er ContactForm7.com. Nedlastning kan gjøres fra WordPress Plugin Directory. Detaljert dokumentasjon kan nås i de offisielle dokumentene.

Etter installasjon og aktivering finner du et dedikert menyelement kalt "Kontakt" i admingrensesnittet.

Skjemakode

Her er en enkel form der du kan bestille en mobiltelefon. Du kan også spesifisere merke, farge og betalingsmåte.

 Produkt *
 [velg * produkt "iPhone" "Samsung Galaxy S2" "HTC Desire"] 
 Farge *
 [velg * farge "svart" "hvit" "grå"] 
 Navn *
 [tekst * ditt navn] 
 E-post *
 [email * din-email] 
 Foretrukket betaling 
 [radio betalingsmåte "VISA" "MASTERCARD" "AMEX"]
 [avkrysningsboksen rask levering] Hurtig levering (1 dag)
 [Send inn "Plasser bestilling"]

Sett inn skjemakode

Bruk denne koden til å importere hele skjemaet angitt ovenfor til en vilkårlig WordPress-artikkel eller -side.

 [contact-form-7 title = "celle telefon bestillingsskjema"]

Grunnleggende syntaks

Syntaxen for tagg består av type, navn og verdifelt. Med stjernen blir det et obligatorisk element.

 [type navnverdier] for eksempel: [radio betalingsmåte "VISA" "MASTERCARD" "AMEX"]

Tagtyper

Her er en liste med alle kodene du kan bruke i skjemaene dine:

tekstfelt (tekst, tekst *, email, email *, textarea og textarea *),
avkrysningsbokser, radioknapper og menyer (avkrysningsboks, avkrysningsboks *, radio, velg og velg *),
filopplasting og vedlegg (fil og fil *),
captcha (captchac og captchar),
quiz (quiz),
aksept avkrysningsboks (aksept),
send inn knappen (send inn).

Opprette en to kolonne skjema

Vi kan raskt lage et skjema med to kolonne stil, bare bruk noen HTML og CSS. Den lille hemmeligheten er at vi kan kombinere HTML med tagkoden.

    Fornavn [tekst fornavn] 
 E-post [email * din-email] 
  Etternavn [tekst etternavn] 
 Telefon [tekst telefon] 
 
 Emne [tekst * ditt emne] 
 Melding [tekstområde * din melding] 
 [Send inn "Send"]

Her er CSS-koden. Ingenting fancy bare veldig grunnleggende styling.

 #left width: 300px; flyte: venstre;  # rett bredde: 250px; flyte: venstre;  .clearfix: etter innhold: "\ 0020"; display: block; høyde: 0; klar: begge; synlighet: skjult; flow: hidden;  .clearfix display: block;

Avansert syntaks

Syntaxen for taggen kan også være mer detaljert. Alternativdelen angir oppførsel og utseende. Deklarasjonsalternativer er ikke nødvendig, men her er hvordan du kan gjøre det. Vær oppmerksom på at i følgende eksempel bruker vi id og klasse eiendommer. Du kan bruke CSS og JavaScript for å utvide skjemaet ditt.

 [type navnalternativer verdier] for eksempel: [radio betalingsmåte id: paynow klasse: paythis "VISA" "MASTERCARD" "AMEX"]

Sette opp en postmal

I kontaktskjema 7 kan du enkelt redigere postmaler. Tekst, HTML-kode og skjemadata kan kombineres på vilkårlig måte. Merk skjemadataene med parentesene. Nedenfor er et eksempel på meldingslegemet.

 Kjære [ditt navn], Du har nettopp bestilt et [produkt] produkt i [farge] farge! Snart vil du få en epost med linken til hvor du kan betale for bestillingen din. --- Takk for at du kjøpte! OurCompany LLC, www.ourcompany.com

Her er en liste over hva du kan angi via administrasjonspanelet:

grunnleggende overskrift felt (til, fra og emne)
meldingsorgan
tilleggsoverskrifter
filvedlegg
HTML-modus

Legge til CAPTCHA

Skjemaoppsettet lar deg sette inn en CAPTCHA i kontaktskjemaene dine for å forhindre uønskede meldinger. Kontaktskjema 7 bruker virkelig enkel CAPTCHA som sin CAPTCHA-modul. Før vi begynner må du installere Real Simple CAPTCHA plugin. Pass på at den midlertidige mappen for CAPTCHA-filer eksisterer og er skrivbar. Ellers kan CAPTCHA ikke opprettes.

For å bruke CAPTCHA i skjemaene dine må du bruke captchac og captchar skjemaetiketter. captchac betyr CAPTCHA-Challenge og representerer en element for et CAPTCHA-bilde. captchar betyr CAPTCHA-respons og representerer en element for et responsfeltfelt. EN captchac taggen må alltid være sammenkoblet med a captchar tag med samme navn. For eksempel er merkene vist nedenfor gyldige:

  [captchac captcha-1] [captchar captcha-1]

Merk at navnene må samsvare med hverandre for å fungere skikkelig. Her kontrollord-1 er gitt.

Å fikse sendefeil

Kunne ikke sende meldingen din. Vennligst prøv senere eller kontakt administratoren på annen måte.

Hvis serveren ikke tillater å sende e-post via sendmail (), Du kan bruke et plugin for å sende e-post via SMTP. Begge utvidelsene er kompatible med WordPress 3.2.1. Disse pluginene kan løse dine problemer:

WP Mail SMTP
og konfigurer SMTP

Last ned og installer ditt valgte plugin i WordPress. Angi innstillingene for SMTP-serveren på Innstillinger-siden.

Egendefinerte hendelsesmeldinger

Vi kan fritt endre meldingene som vises på hendelsene.

Enda bedre, du kan bruke HTML-koden i innboksene! Prøv dette (egentlig det er en HTML-en-liner, men oppdelt for klarhet her):

 Din melding ble sendt. Takk skal du ha!

Flerspråklig støtte

Kontaktskjema 7 viser skjemaer på engelsk som standard, men det kombinerer 40 + språk oversettelser, og du kan til og med lage et kontaktskjema på hvilket som helst språk. For å bruke administrasjonsgrensesnittet til kontaktformular 7 på ditt eget språk angir du WPLANG konstant i din wp-config.php fil.

 // Endre denne linjen: define ('WPLANG', 'ja');

Bruk Skrevet Form Data i server side i stedet for postering

Hvis du vil ha noe annet enn standardmeldingen (send inn e-post), kan du bruke koden nedenfor.

 add_action ("wpcf7_before_send_mail", "wpcf7_do_something_else"); funksjon wpcf7_do_something_else (& $ wpcf7_data) // Her er variabelen der dataene er lagret! var_dump ($ wpcf7_data); // Hvis du vil hoppe over posten dataene, kan du gjøre det ... $ wpcf7_data-> skip_mail = true;

Angi rettigheter, så bare ledere kan endre skjemaer

For å sikre redigeringsalternativene, bruk denne koden.

 define ('WPCF7_ADMIN_READ_CAPABILITY', 'manage_options'); define ('WPCF7_ADMIN_READ_WRITE_CAPABILITY', 'manage_options');

Populere felt dynamisk

Faktum er at standardverdiene i kontaktskjema 7 er statiske. Si for eksempel at du har en GET-parameter du vil bruke til å fylle ut kontaktskjemaet. Så er løsningen Kontaktformular 7 Dynamisk Tekstforlengelse av Sevenspark. Dette plugin gir en ny taggetype og tillater dynamisk generering av innhold. Etter at du har installert og aktivert pluginet, vil kontaktskjema 7 ha to nye typer: det dynamiske tekstfeltet og det dynamiske skjulte feltet.

Sammendrag

Som du kan se, har dette skjemaet et stort potensial, og vi dekket bare en liten prosentandel av alle funksjonene. Hvis du ikke fant noe her, dykk du inn i dokumentene på det offisielle nettstedet. Ikke vær redd for å bruke den akkurat nå! Ha det gøy!

Bruker du allerede kontaktskjema 7 og har et tips å dele med oss? Eller er det et annet kontaktskjema for WordPress du vil anbefale? Gi oss beskjed i kommentarene!

Kode