Opprette et kontaktskjema i WordPress. Sender en e-post
Enten du lager en enkel blogg, et stort firmanettsted eller et WordPress-basert porteføljeprosjekt, side tilbakemelding nesten alltid et nødvendig element. Og det er alltid bedre å bruke et offentlig kontaktskjema for tilbakemelding i stedet for å dele adressen din offentlig E-post(spam-roboter elsker slike adresser).
Selvfølgelig er det mange flotte WordPress-plugins der ute. Men hvorfor belaste nettstedet ditt med tungvinte plugins og ekstra databasespørringer, hvis du kan skrive ditt eget enkle tilbakemeldingsskjema med en liten mengde kode?
| Last ned kilder |
Fordeler med å lage ditt eget kontaktskjema
Plugins er flotte, men mange av dem kommer med unødvendig funksjonalitet som du ikke trenger og vil overbelaste databasen og nettstedet. Dette vil skje på grunn av implementering av ytterligere PHP-kode, legge til stilark CSS og filer JS i overskriften på siden... og på et tidspunkt vil du bare holde deg unna alle slags plugins, uansett hvor kule de er.
Hvis du ikke har kodeferdigheter, må jeg innrømme: hendene dine er litt bundet, og du må bruke en av de eksisterende pluginene. Men hvis du er kjent med det på et hvilket som helst nivå (vi antar at du har slike ferdigheter hvis du fortsatt leser denne artikkelen), bør du vurdere å utvikle ditt eget skjema for nettstedet. Her er hva fordeler har følgende vedtak:
- Optimalisering- bruk av overflødig kode, spesielt den du ikke trenger, fører til å nå de maksimalt tillatte grensene for hosteren din. Og selv om du har en stor tilgang på ressurser på serveren, vil optimalisering alltid være til fordel for nettstedet ditt.
- Kode renslighet- i tillegg til å optimalisere driften av selve serveren, vil "ren" kode bli hovedfaktoren for hastigheten på innlasting av nettstedssider. Å skrive din egen kode gir deg en fordel: du bruker kun det du trenger, og det er ikke nødvendig å laste ned mye "søppel" som er ansvarlig for ganske enkel funksjonalitet på siden din. Dette har også en positiv effekt på SEO.
- Tilfredsstillelsen av å ha full kontroll- Aldri undervurder kraften til full kontroll. Å ha full kontroll over nettstedet ditt vil presse deg til å bli en mer lidenskapelig utvikler/designer enn når du bare bruker et sett klar kode. Og selv om du får koden i ferdig form, er det alltid bedre å "gå gjennom" den manuelt enn å bare "kopiere og lime inn". Å skrive inn koden for hånd gir deg en forståelse av hvordan plugin-en fungerer.
La oss gå videre til koden
Ok, nok prat: la oss begynne å skrive litt kode! Vi trenger ikke å håndtere mye kode eller bruke mye krefter, så selv om du er ny på PHP og/eller WordPress, vil du forstå følgende kode uten problemer, ved å følge instruksjonene mine for de delene av kode som du ikke selv kan "gjenkjenne" ".
Koden om hvilke vi vil snakke, kan du lime inn direkte i en fil funksjoner.php temaet ditt og bruk det som en plugin. Jeg anbefaler deg å designe koden som en egen plugin. Når du bytter mellom temaer, trenger du ikke å legge til den samme funksjonaliteten på nytt. La oss begynne med standardinformasjon om plugin-en :
Versjon: 1.0 Forfatter: Barış Ünver Forfatter URI: http://beyn.org/ */ // Denne kommentarlinjen har plassen til den utrolig enkle koden vi skal skrive. Så du trenger egentlig ikke å lese dette. ?>
Liten hjelpefunksjon: get_the_ip()
Som du kan gjette fra navnet på funksjonen, bruker vi den for å få den virkelige IP adresse bruker, selv om denne brukeren "kom" til oss gjennom en proxy-server. Løsningen er selvfølgelig ikke 100 % effektiv for å beskytte og innhente informasjon om brukeren, men likevel vil vi få litt tilleggsinformasjon om brukeren.
Vi vil hovedsakelig bruke andre variabler til $_SERVER: HTTP_X_FORWARDED_FOR, HTTP_CLIENT_IP og REMOTE_ADDR . Og her er selve 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"])) (retur $_SERVER["HTTP_X_FORWARDED_FOR"]; ) ]; ) annet ( return $_SERVER["REMOTE_ADDR"]; ) )
Kort kode
Vi deler kortkoden inn i tre seksjoner for å gjøre den tydeligere for deg, men først må du huske å åpne og lukke funksjonen i kortkoden:
Funksjon wptuts_contact_form_sc($atts) ( // Denne kommentarlinjen har også plassen til den geniale, men enkle kortkoden som lager kontaktskjemaet vårt. Og likevel kaster du fortsatt bort tiden din på å lese denne kommentaren. Bravo. ) add_shortcode( "kontakt", "wptuts_contact_form_sc");
Attributter til kortkoden vår
Vi må angi noen få attributter for å gjøre kortkoden fleksibel samtidig som den er enkel å bruke. Her er de, disse attributtene:
extract(shortcode_atts(array(// hvis du ikke oppgir en e-postadresse, vil kortkoden velge e-postadressen til administratoren: "email" => get_bloginfo("admin_email"), "subject" => "", "label_name" => "Ditt navn", "label_email" => "Din e-postadresse", "label_subject" => "Emne", "label_message" => "Din melding", "label_submit" => "Send", // feilmeldingen når minst ett av de obligatoriske feltene er tomme: "error_empty" => "Vennligst fyll ut alle de obligatoriske feltene.", // feilmeldingen når e-postadressen ikke er gyldig : "error_noemail" => "Vennligst skriv inn en gyldig e-postadresse.", // og suksessmeldingen når e-posten sendes: "success" => "Takk for din e-post! Vi kommer tilbake til deg så snart vi kan."), $atts));Husk at vi vil referere til disse attributtene i koden vår som variabler med attributtnavnet (for eksempel: $label_submit ).
Sender en e-post
Dette er den viktigste delen av funksjonen som er ansvarlig for å sende e-post:
//hvis
";Clue: Hvis du ser nøye på HTML-kode i skjemaet kan du legge merke til en variabel $emne. Husk shortcode-attributtet ' Emne’ med en tom standardverdi? Dette betyr at du kan bruke en kortkode ved å erstatte verdien du trenger i attributtet, for eksempel:
Legger til retur til kortkode
Den siste delen av arbeidet er ganske enkel. Etter sending skal brukeren se en melding som indikerer at brevet ble sendt, eller, hvis det ikke lykkes, en feilmelding. Her er selve koden:
If ($sent == true) (return $info; ) else ( return $info . $email_form; )
Etter å ha sendt e-posten vises ikke skjemaet igjen, men hvis du fortsatt vil at skjemaet skal vises, kan du bruke en liten kodelinje:
Returner $info . $email_form;
CSS-kode
Selve koden ser selvfølgelig ikke perfekt ut. La oss legge til litt sjarm ved CSS. Legg til følgende linjer i CSS-koden i filen din style.css:
Kontaktskjemaetikett, .kontaktskjemainndata, .kontaktskjematekstområde (visning: blokk; margin: 10px 0; ) .kontaktskjemaetikett (skriftstørrelse: større; ) .kontaktskjemainntasting (utfylling: 5px; ) #cf_message ( width: 90%; padding: 10px; ) #cf_send ( padding: 5px 10px; )
Hvis du gjorde alt riktig, vil du se noe som ligner på det som vises på bildet nedenfor:
Gratulerer: du har nettopp laget ditt eget kontaktskjema!
Konklusjon
Dette enkle kontaktskjemaet vil fungere for de fleste nettsteder, men hvis du vil legge til tilleggsfelt, så er det bare å redigere det og legge til variabler $form_data["navn_på_det_nye_feltet"] inne i en variabel $email_message(og du må kanskje også legge til feltnavnet i matrisen $required_fields).
Hvis du har tanker om hvordan du kan forbedre kortkoden i dette innlegget, eller ønsker å vise hva du har kommet opp med basert på dette skjemaet, vennligst del dine tanker og linker med oss i kommentarfeltet.
Kontaktskjemaer er en nødvendig egenskap for de fleste nettsteder. Med deres hjelp utføres direkte kommunikasjon med besøkende, spesielt hvis nettstedet ikke tilbyr andre kommunikasjonsmidler.
WordPress katalog har dusinvis av kontaktskjemaplugins. Men den mest populære blant dem (mer enn en million installasjoner) er kontaktskjema 7, hvor vi vil se på å lage et kontaktskjema på et nettsted.
Opprette et skjema
Hvis du bruker temaer eller , trenger du ikke installere noen plugins - alt er allerede implementert! For å gjøre dette, sett inn en kortkode på kontaktskjemasiden. .
Etter at du har installert og aktivert plugin-en, vises en hel del i administrasjonspanelet:
La oss lage et enkelt skjema som vil være tilgjengelig på siden Ta kontakt med oss. La oss først gå videre Kontaktskjema 7 > Legg til ny, hvor du må skrive inn navnet på skjemaet. Nedenfor er skjemamalblokken, dvs. et sett med felt som brukeren vil se og fylle ut på nettstedet.
Så ved å skrive inn et navn, for eksempel, " Ta kontakt med oss" og trykke på knappen Lagre På denne måten vil du opprette et visningsklart kontaktskjema. For å se det, må du gå Kontaktskjema 7 > Kontaktskjemaer.
Vær oppmerksom på feltverdien Kort kode. Koden tatt inn firkantede parenteser, vil bli brukt til å vise skjemaet på nettstedet.
Viser skjemaet på nettsiden
For at besøkende på nettstedet skal bruke kontaktskjemaet, må det vises et sted. For å gjøre dette vil vi opprette en egen side med et navn, for eksempel " Ta kontakt med oss". Så la oss gå videre Sider > Legg til ny. I tittelen skriver vi " Ta kontakt med oss", og sett inn kortkoden ovenfor i feltet nedenfor. Resultatet skal være:
Hei venner! I denne leksjonen skal vi snakke om lage et tilbakemeldingsskjema, eller som folk også sier "Kontakt skjema".
I dag vil vi vise deg hvordan du kan lage den på noen få minutter lys, vakker Og funksjonell tilbakemeldingsskjema ved å bruke min favorittplugin Kontaktskjema 7 .
Jeg vil prøve å forklare så detaljert som mulig alle stadiene for å installere et kontaktskjema, og i denne forbindelse vil leksjonen vise seg å være ganske lang :)
Opprette et kontaktskjema i WordPress
Helt i begynnelsen vil jeg merke at kontaktskjemaet 7-plugin er russifisert, og du vil ikke ha noen problemer med det. Som bevis på mine ord kan være det faktum at denne plugin ble lastet ned OVER 25 MILLIONER GANGER!!!
Så la oss komme i gang. For å lage et tilbakemeldingsskjema du må gjøre følgende:
1. Installer og aktiver kontaktskjema 7-plugin. Hvordan installere plugins kan du.
2. Etter aktivering, gå til Kontaktskjema 7 -> Skjemaer.
3. I vinduet som åpnes kopier linjen med innebygd kode.
4. Lim inn den kopierte koden på siden der vi ønsker å legge til et tilbakemeldingsskjema. Etter at du har satt inn koden, ikke glem å lagre endringene ved å klikke på knappen "Oppdater".
Som dette resultat ved å legge til et kontaktskjema får vi:
Klar! Du har installert arbeidsuniform tilbakemelding til nettstedet ditt!
Som du ser, totalt i noen få minutter Du kan enkelt installere et tilbakemeldingsskjema på nettstedet ditt. Dette kan du sette en stopper for, men for de som ikke er fornøyd med standardskjemaet og som vil skape Helt ny Kontakt skjema med andre felt og evner - jeg anbefaler les leksjonen til slutten.
For å lage et nytt skjema, må vi først bestemme hvilke felter vi trenger i det. I denne opplæringen, som et eksempel, vil vi lage en enkel tilbakebestillingsskjema.
For å gjøre dette trenger vi at skjemaet har følgende felt å fylle ut:
- Navn (obligatorisk felt)
- Etternavn
- Telefon (obligatorisk felt)
- Felt med valg av et passende tidspunkt å ringe
Etter at vi har bestemt oss for feltene, går vi videre til å lage skjemaet:
1. Gå til Kontaktskjema 7 -> Legg til ny.
2. Klikk på knappen i vinduet som åpnes "Legg til ny". Om nødvendig, velg et språk fra rullegardinlisten nedenfor. Av som standard vil språket være russisk.
3. Etter å ha klikket på knappen kommer du til siden der skjemaredaktør.
Helt øverst på siden er feltet vi skriver i Navn ny form. I Skjemamal vi ser standard skjemafelt som er opprettet som standard.
Nedenfor ser vi innstillingene for brevet som kommer til din epost etter at noen har sendt inn en bestilling fra skjemaet på nettsiden. I disse innstillingene kan du for eksempel endre eller legge til e-posten som forespørsler fra skjemaet på nettstedet ditt skal sendes til. I brevmal konfigurer informasjonen som skal vises i brevet.
4. Etter at vi har blitt overfladisk kjent med strukturen til redaktøren, går vi videre til å lage vårt nye skjema. For dette trenger vi SLETT fra skjemamalen alle linjer unntatt knappen "Sende", og i brevmalen slette alt er komplett . Etter fjerning bør du få noe slikt:
5. Nå må vi opprette nye felt: Navn(obligatorisk) Etternavn, Telefon(obligatorisk) Praktisk ringetid.
La oss starte med å lage et felt for å skrive inn et navn, som må fylles ut. For å gjøre dette, trykk på knappen "Generer tag" og velg Tekstfelt.
I innstillingene til det nye feltet setter du en hake, som kun er nødvendig hvis feltet må fylles ut. Deretter kopierer du den genererte koden inn i skjemamalen til høyre, og kopierer følgende kode inn i brevmalen. Se bildet nedenfor for kommentarer og piler for bedre forståelse.
6. Etter at vi har lagt til et felt for å skrive inn et navn, klikker du "Generer tag" -> Tekstfelt og ved analogi lager vi et felt Etternavn Og Telefon ved å kopiere og lime inn koden i skjemamalen og e-postmalen. Den eneste forskjellen er den for feltet Etternavn Det er ikke nødvendig å krysse av for det obligatoriske feltet .
Etter å ha lagt til feltene Fornavn, Etternavn og Telefon, vil skjemaredigeringsprogrammet se slik ut:
7. La oss nå lage feltet Praktisk ringetid. For å gjøre dette, klikk "Generer tag" og velg "Nedtrekksmenyen".
I felt Valg Vi skriver på linjen i henhold til ett alternativ, i vårt tilfelle er dette tiden fra 8-00 til 18-00 med intervaller på to timer. Etter å ha fylt ut kopierer du de tilsvarende kodelinjene til skjemamalen og brevmalen.
Som et resultat bør du ende opp med noe som dette:
9. Kopier skjemakoden og lim den inn på siden der du trenger skjemaet. Hvis du gjorde alt riktig, bør du ha et tilbakeringingsskjema som dette:
Etter at brukeren har lagt inn en tilbakeringingsbestilling fra nettstedet ditt, et brev vil bli sendt til din e-post med dette innholdet:
KLAR! Her har vi laget med deg ring tilbake bestillingsskjema fra bunnen av.
Jeg er enig i at for noen kan alt virke veldig komplisert og skummelt, men denne følelsen vil bare merkes helt til den første opprettelsen av et kontaktskjema fra bunnen av 😉
I de fleste tilfeller er standard tilbakemeldingsskjemaet, som opprettes som standard av plugin umiddelbart etter installasjon og aktivering, tilstrekkelig.
Jeg håper denne opplæringen var nyttig for deg og at du forstår kontaktskjemaet 7-plugin.
Hvis du har spørsmål mens du oppretter skjemaet eller noe ikke fungerer - skriv og still spørsmål i kommentarfeltet.
Og husk det tilbakemeldingsskjema på nettsiden - et obligatorisk attributt på kontaktsiden.
Hei venner! I denne leksjonen skal vi snakke om å lage et tilbakemeldingsskjema, eller som folk også sier "kontaktskjema". I dag vil vi vise deg hvordan du kan lage et enkelt, vakkert og funksjonelt tilbakemeldingsskjema på noen få minutter ved å bruke min favoritt Kontaktskjema 7-plugin. Jeg vil prøve å forklare så detaljert som mulig alle stadiene ved å installere et kontaktskjema, og derfor vil leksjonen vise seg å bli ganske lang :) Opprette et kontaktskjema i WordPress Helt i begynnelsen vil jeg merke at kontaktskjemaet 7-plugin er russifisert, og du vil ikke ha noen problemer med det. Som bevis på mine ord kan være det faktum at denne plugin...
Anmeldelse
Stem på leksjonen
100
Karakter
Resultat: Kjære lesere! Ikke vær lat med å stemme og legg igjen en kommentar. På denne måten kan jeg forstå nytten av leksjonene og artiklene, og forbedre kvaliteten deres i fremtiden. Takk på forhånd!
Et kontaktskjema er ekstremt nyttig for nettstedet ditt - det holder e-postadressen din ute av syne (reduserer spam) og gjør det enkelt for brukere å kontakte deg direkte gjennom nettstedet.
Hvis du har opprettet en side Kontakt oss på et WordPress-nettsted, så vil det ikke være vanskelig å legge til et tilbakemeldingsskjema, sette det opp og begynne å motta meldinger.
Det meste den enkle måtenå lage et tilbakemeldingsskjema er å bruke – det er mange forskjellige plugins og du kan velge hvilken som helst. I denne opplæringen vil vi imidlertid bruke kontaktskjema 7.
Med over 3 millioner installasjoner, Kontaktskjema 7 er det mest brukte tilbakemeldingsskjemaet for WordPress. Dens intuitive grensesnitt og rask installasjon vil hjelpe deg med å lage et tilbakemeldingsskjema på få minutter.
Før du starter denne veiledningen, trenger du følgende:
- Paneltilgang WordPress administrasjon
Trinn 1 – Installer kontaktskjema 7
- Logg inn på WordPress-dashbordet og klikk på Plugins → Legg til ny i venstre panelmeny.
- Finne Kontaktskjema 7 i søk og klikk Installere.
- Etter installasjon, klikk Aktiver for å aktivere plugin-en.
Trinn 2 – Hvordan lage et tilbakemeldingsskjema
Etter å ha aktivert plugin, vil venstre meny på panelet vises ny seksjon Kontaktskjema 7.
- Klikk Kontaktskjema 7 → Legg til ny for å lage ditt første skjema.
- Skriv inn navnet på tilbakemeldingsskjemaet, for eksempel WordPress kontaktskjema.
- Noen etiketter og tekstområder er allerede plassert for å hjelpe deg med å forstå prosessen. Du kan fjerne dem eller legge til nye etiketter og tekstområder ved å velge dem fra listen øverst.
Hvis du ikke er sikker på hvilke skjemaelementer du trenger, la dem være som de er, du kan komme tilbake og redigere dem senere.
Avhengig av elementene du velger, skal koden din se omtrent slik ut:
- Du kan legge til og fjerne elementer avhengig av dine behov. For enkelhets skyld, bruk spesialverktøy over området med selve formen.
- * i koden betyr at dette feltet er obligatorisk.
Trinn 3 – Sette opp meldingsformat
Når en besøkende sender en melding gjennom tilbakemeldingsskjemaet, vil du motta en melding som inneholder hans navn, kontaktinformasjon og selve innholdet.
Du kan tilpasse denne meldingen i delen Brev– noen av kodene du kan bruke i brevet er oppført over selve brevet. Prøv å endre e-postmalen ved å legge til noen tagger i den – du kan komme tilbake når som helst og endre den på nytt.
VIKTIG! Pass på at du har oppgitt riktig e-postadresse i feltet Til hvem– dette er adressen som alle meldinger vil bli levert til.
Trinn 4 – Sette opp varsler
I fanen Varsler du kan tilpasse meldingene som besøkende vil se når e-posten sendes vellykket eller når det er en feil (feil e-postadresse eller manglende utfylling av et av de obligatoriske feltene osv.).
Trinn 5 – Lagre og publisere skjemaet
Når du er ferdig med oppsettet, kan du lagre endringene ved å klikke på knappen Lagreøverst til høyre på panelet.
Etter lagring vil en kortkode vises øverst på siden. Den vil være uthevet i blått og skal se omtrent slik ut:
- Velg kortkoden og kopier den
- Lim inn kortkoden på siden, innlegget eller widgeten der du vil at skjemaet skal vises
- Resultatet bør bli noe sånt som dette
Trinn 6 – Testing av kontaktskjemaet for WordPress
Det er svært viktig å kontrollere funksjonen til tilbakemeldingsskjemaet og ta vare på dets korrekte utseende. Sørg også for at meldinger gjennom skjemaet leveres konsekvent.
For å gjøre dette, gå ganske enkelt til nettstedets side med skjemaet og send inn en melding ved å bruke det - du kan alltid gå tilbake til skjemaredigeringen og gjøre de nødvendige endringene.
Konklusjon
Denne opplæringen hjalp deg med å lære hvordan du oppretter et kontaktskjema ved hjelp av WordPress-plugin – Kontaktskjema 7. Nå kan du motta meldinger fra brukerne dine direkte gjennom nettstedet.
Vil du vite enda mer? Du kan eksperimentere med tagger og maler og endre nesten alt. Du kan også prøve å stille inn Flamingo– en meldingslagringsplugin for å lagre alle mottatte meldinger i en database (dette er ganske nyttig hvis du har problemer med e-postserveren).
Hilsen, venner. Dagens veiledning vil hjelpe WordPress-siden din til å ha et fint og funksjonelt tilbakemeldingsskjema. Vi vil gjøre det ved hjelp av kontaktskjema 7-plugin. På et tidspunkt brukte jeg mye tid på å søke etter et vanlig kontaktskjema og verdig alternativ Jeg har ikke funnet denne pluginen ennå.
Plugin-funksjoner
La meg minne deg nok en gang om at vi kommer til å jobbe med en plugin, så hvis du trenger tilbakemelding uten en plugin, bør du besøke artikkelen om, oppsettet er litt mer komplisert, men alternativet er mer universelt (egnet for hvert nettsted) og legger mindre belastning på serverne.
Den største fordelen med kontaktskjemaet på Kontaktskjema 7 er dets enkle tilpasning, nesten ubegrenset funksjonalitet og automatisk designjustering til enhver WordPress-mal. Med dens hjelp kan du ikke bare lage et skjema for å sende meldinger fra nettstedet. Programtillegget kan brukes til å lage en bestillingsknapp, en tilbakeringing eller et komplekst spørreskjema med avmerkingsbokser og nedtrekkslister. Det er også mulig å legge ved filer for overføring.
Med et ord, plugin er megafunksjonell.
Hvis du fortsatt er bekymret for spørsmålet "å gjøre eller ikke gjøre et kontaktskjema?" (du kan klare deg ved å legge ut kontaktinformasjon på de riktige sidene), så vil jeg si utvetydig - det er verdt å gjøre.
For det første er det mer praktisk å sende en melding direkte fra nettstedet enn å åpne postprogram og fyll ut alt manuelt. Å spare tid vil ikke skade noen.
For det andre kan kontaktskjemaet tilpasses, og dette vil tillate deg å motta brev i standardformat - de vil være lettere å navigere. Du kan for eksempel angi en standard overskrift for en melding "Ordre", og alle e-poster fra bestillingssiden kommer med denne overskriften.
For det tredje lar bruk av et kontaktskjema deg skjule e-postadressen din og dermed bli kvitt mulig spam som uunngåelig dukker opp når e-postboksen din blir offentlig tilgjengelig.
For det fjerde er det ganske enkelt stilig og moderne.
Installere og konfigurere kontaktskjema 7-plugin
Plugin er generelt wordpress database, så det er ikke nødvendig å søke etter filene et sted, laste dem ned selv og deretter laste dem opp til hostingen. Alt er gjort enklere - gjennom WordPress-administratoren, gå inn i plugins-delen, skriv inn "Kontaktskjema 7" i søkefeltet og installer det. Hvis du aldri har installert plugins, da detaljerte instruksjoner hvordan installere plugin.
Sette opp kontaktskjema 7-plugin
Oppsett av plugin består av to trinn.
Den første er å sette opp et spesifikt skjema. Ulike former det kan være mange, hver av dem kan inneholde sitt eget sett med felt. Kort sagt, for hver oppgave og hver side på nettstedet kan du separat lage et tilbakemeldingsskjema, Wordpress tillater dette - listen deres vil bli lagret i plugin-databasen.
Den andre fasen er å sette inn skjemaet på sidene. Hvert skjema vi lager inne i pluginet vil ha sin egen unike kortkode. For å sette den inn på siden trenger du bare å sette den inn.
Så la oss gå.
For å begynne, i venstre meny i administrasjonspanelet finner vi fanen Kontaktskjema 7. En meny med to elementer vil dukke opp under den - "Skjemaer" og "Legg til ny".
Vi har ingen ferdige skjemaer ennå, så la oss gå til delen "Legg til ny". En side åpnes der som ber deg velge et språk, og standardspråket vil også bli oppført der. Bare klikk på den blå "Legg til ny"-knappen.
Skjemainnstillinger er delt inn i separate blokker. Jeg vil vurdere dem i rekkefølge.
Blokker "Skjemanavn"
Den første blokken er ansvarlig for navnet på skjemaet ditt - plasser markøren på inskripsjonen "Uten tittel" og skriv inn navnet du trenger. Dette navnet vil bare vises for deg i listen over kontaktskjemaer til plugin-en, så gjør det klart for deg for ikke å bli forvirret i fremtiden av all mangfoldet.
Blokker "Skjemamal"
I utgangspunktet inneholder denne blokken en standard feltkonfigurasjon. Den inneholder navnet på avsenderen av brevet, hans epostadresse, e-postemne, e-postinnhold og send-knapp.
Obligatoriske felt er merket med asterisker. Hvis dette feltet står tomt, vil ikke meldingen bli sendt.
Oppsettet av feltene kan tilpasses ved hjelp av vanlig html markeringer.
Når det gjelder å sette opp selve feltene, kan du fjerne unødvendige og legge til de du trenger. Hvis du ikke vil at emnet for brevet skal legges inn manuelt, sletter du bare den tilsvarende blokken.
Det er også veldig enkelt å legge til felt. På høyre side er det en knapp for å generere en tag, ved å klikke på den vil du se en liste over alle mulige felt som denne plugin støtter.
Plukke ut nødvendig element og konfigurer innstillingene. Programtillegget er på russisk, så alle innstillinger er intuitive.
Den første avmerkingsboksen angir om feltet er obligatorisk eller valgfritt (det legger til en stjerne).
Etter å ha satt opp feltet, vil du ha 2 kortkoder:
- "Kopier denne koden og lim den inn i skjemamalen til venstre" – denne koden settes inn i skjemakoden på samme måte som alle de andre;
- "Og lim inn følgende kode i brevmalen nedenfor" - vi trenger denne koden for å formatere bokstaven i neste blokk.
På denne måten kan du legge til et hvilket som helst antall felt, avmerkingsbokser, nedtrekkslister, elementer for å legge ved filer osv. til skjemaet.
Blokkbokstaver"
Nå er vår oppgave å tilpasse brevet vi skal motta. Brevet påvirker ikke på noen måte funksjonaliteten til tilbakemeldingsskjemaet, det tjener kun til å formidle informasjonen som er lagt inn i skjemaet.
Vår oppgave er å inkludere all informasjon i brevet.
Det første trinnet er å angi e-postadressen som meldingen skal sendes til (det kan være hva som helst).
Det andre punktet indikerer e-post, hvorfra brevet vil bli sendt til deg. Jeg ville ikke endret noe her, det er oppført som standard Postkasse bloggen din og la til en tag med navnet på personen som sender meldingen.
Deretter angir vi emnet for brevet. Som standard er emnet hentet fra feltet som fylles ut i skjemaet. Men du kan fjerne dette elementet fra skjemaet, og skrive inn et spesifikt emne i feltet, som settes automatisk i hver bokstav. Jeg gjorde dette for tilbakemeldingsskjemaer fra sider om tjenester og annonsering. Meldinger derfra kommer alltid med samme emne "Bestillingstjenester" eller "Bestilling av reklame" - enkelt og oversiktlig.
Det ekstra overskriftsfeltet inneholder «Svar-til:»-taggen slik at når du svarer på et brev mottatt fra bloggen din, sender du meldingen til bloggen og til adressen som avsenderen av brevet oppga i skjemafeltet. Det er ikke nødvendig å endre dette feltet.
Feltet "Brevmal" er ansvarlig for det interne innholdet i meldingen du mottok. Som standard inneholder den informasjon om avsender, emne og meldingstekst som er skrevet inn i feltet.
På slutten er stedet som brevet ble sendt fra, angitt.
Hvis du har lagt til flere felt i skjemaet som ikke ble installert som standard, så ikke glem å legge til den tilsvarende taggen i brevmalen. Den ble gitt til deg i "Skjemamal"-blokken, der du genererte den tilsvarende taggen (feltet "Og lim inn følgende kode i e-postmalen nedenfor").
jeg elsker det tekstinformasjon Denne blokken (bortsett fra tagger) kan endres etter eget ønske. Du kan også legge til beskrivelser og bytte tagger, ordne dem i den rekkefølgen som passer deg.
Blokker "Brev 2"
Hvis du vil at noen andre skal motta meldingen sendt til deg, kan du krysse av i denne boksen.
Denne blokken er konfigurert på samme måte som den forrige. Som standard er alle feltene i den fylt ut slik at brevet går til den som har fylt ut skjemaet (tilsynelatende slik at han ikke glemmer).
Du kan sette opp en kopi som sendes til for eksempel din leder eller regnskapsfører.
Blokker "Varsler ved innsending av skjema"
I denne blokken kan du konfigurere meldingene som brukeren ser etter at han har klikket på send melding-knappen. Hvis du vil endre noe, vær så snill, jeg lot alt være som det er.
Skjemaaktivering
Etter at du har fylt ut alle feltene, går du tilbake til begynnelsen til "Skjemanavn"-blokken og klikker på "lagre"-knappen til høyre.
Programtillegget vil plassere skjemaet du opprettet i listen over aktive og tilordne det spesiell kode noe sånt som dette:
[ kontakt - skjema - 7 id = "5464" title = "Verifikasjon" ] !} |
Ved å lime inn denne koden hvor som helst på nettstedet ditt får du ferdig formå kommunisere med potensielle kunder.
Anti-spam – Akismet og Captcha
Spammere forårsaker mye trøbbel for nettstedeiere, og hvert nytt skjema som lar deg skrive noe, øker bare antallet spambotter.
Hvis du lar kontaktskjemaet plugin være inne grunnleggende versjon, da vil du etter en stund bli angrepet av mange tomme og meningsløse meldinger.
Det er to måter å bli kvitt spammere på:
- Plasser en obligatorisk captcha (dette kan gjøres med en ekstra plugin - Really Simple CAPTCHA).
- Bruk anti-spam-plugin for WordPress – Akismet.
Det første alternativet er upraktisk fordi det tvinger besøkende til å gå inn manuelt ekstra tegn. Det er ikke så vanskelig, men noen liker det ikke.
Å bruke Akismet-pluginen er mer praktisk fordi den uavhengig analyserer de angitte dataene (navn, e-post adresse, lenker) og, basert på den akkumulerte databasen, trekker konklusjoner om spam eller ikke-spam i meldingen.
I tillegg er akismet installert på de fleste WordPress-sider for å beskytte mot spam i kommentarer til artikler. Dette betyr at når du bruker det, trenger du ikke å installere flere plugins og lage ekstra belastning til nettstedet.
Spambeskyttelse med Akismet
1. Installer Akismet-pluginen på nettstedet ditt og aktiver det - .
2. Legg til ytterligere data i kontaktskjemaetikettene:
- legg til i feltet med forfatterens navn akismet:forfatter
- i felten med avsender e-post bokstaver akismet:author_email
- i adressefeltet til nettstedet akismet:author_url
Det skal se slik ut:
Når det er lagret, skal kontaktskjemaet blokkere alle meldinger sendt av spammere. Du kan sjekke driften av filteret ved å bruke det spesielle testnavnet "viagra-test-123? – når du skriver inn det, skal det vises en feilmelding.
For å gjøre verifiseringen mindre streng, kan du sjekke bare noen av feltene, for eksempel navn og e-post, og la nettstedsadressen være umerket. Dette vil øke sannsynligheten for at spam-meldinger kommer gjennom, men du vil være mindre sannsynlig å miste meldingene du trenger.
Spambeskyttelse med Really Simple CAPTCHA
Hvis du finner ut at Akismet ikke passer deg (det slipper gjennom mye spam eller blokkerer de nødvendige meldingene), så kan du aktivere en captcha. For å gjøre dette, installer Really Simple CAPTCHA-plugin.
Åpne ønsket kontaktskjema for redigering
Velg Captcha fra listen over tagger. I tag-innstillingene kan du velge størrelsen på bildet med symboler, ellers er det ikke nødvendig å endre noe. Nederst i innstillingsvinduet vil 2 tagger vises, den ene er ansvarlig for å vise bildet, den andre viser et felt for å legge inn data fra dette bildet.
For at captchaen skal begynne å fungere, må du kopiere og lime inn begge disse kodene i det venstre vinduet i skjemamalen, og deretter lagre endringene.
Plassere et tilbakemeldingsskjema i et popup-vindu
Kontaktskjemaet trenger ikke alltid å være plassert i en bestemt del av nettstedet; noen ganger bør klienten ha tilgang til det fra hver side av ressursen.
I slike tilfeller er det ikke alltid praktisk å legge ut et fullstendig skjema. Det er mye lettere å plassere en knapp på et fremtredende sted som tiltrekker seg oppmerksomhet. Hvis du klikker på denne knappen, bør du allerede åpne skjemaet.
Dermed vil en person kunne sende meldinger fra nettstedet uten å forlate siden han trenger.
Dette gjøres ved hjelp av en annen plugin - Easy FancyBox.
1. Installer plugin-modulen
Først av alt, installerer vi selve plugin-modulen; den er i den generelle plugin-databasen, så alt du trenger å gjøre er å skrive inn navnet i administrasjonspanelet til bloggen din i søket etter plugins. Etter å ha installert plugin-en, vil en "mediefiler"-fane vises i "innstillinger"-delen.
I denne fanen må du finne en liste over innholdstyper som skal vises i popup-vinduet. Som standard er det bare bilder, du må legge til innebygd innhold.
Nå som plugin-oppsettet er fullført, la oss gå videre til å sette opp tilbakemeldingsknappen.
2. Lim inn koden på nettstedet
I prinsippet kan du bruke en vanlig tekstlenke, men en bildeknapp vil se bedre ut.
På nettstedet ditt, der du vil vise en knapp for kontaktskjemaet (i topptekst, bunntekst eller sidefelt), setter du inn følgende kode:
< a href = "#contact_form_pop" class = "fancybox-inline" > < img title = "Kontakt skjema" alt = " Kontakt skjema " src = "http://link til bilde"> < / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > [ kontakt - skjema - 7 id = "din form id" tittel = "navnet på skjemaet ditt"] < / div > < / div > |
I koden må du angi adressen til bildet du bruker som tilbakemeldingsknapp, og redigere kortkoden til selve skjemaet - skriv inn ID og tittel.
3. Fjern begrensningen på kortkoder i sidefeltet
Dette elementet er nødvendig hvis du vil installere en knapp i sidefeltet. Sidefeltet i WordPress tillater ikke alltid kortkoder.
For å aktivere denne funksjonen, må du åpne function.php-filen for redigering (direkte fra WordPress admin) og sett inn følgende kode før den avsluttende parentesen "?>":
add_filter("widget_text", "do_shortcode");
add_filter ("widget_text" , "do_shortcode" ); |
Det vil gi deg muligheten til å kjøre alle kortkoder i sidefeltet.
Jeg endte opp med dette fine popup-skjemaet:
Flere forskjellige popup-skjemaer på én side
Noen ganger er det behov for å plassere flere skjemaer på en nettside med forskjellige innstillinger og felt.
For eksempel fører en knapp til et skjema med navn og telefonnummer og brukes til å bestille tilbakeringing fra nettstedet, og den andre skal åpne et annet skjema der det er en detaljert bestillingsapplikasjon (med en adresse, et beskrivelsesfelt, muligheten til å legge ved en fil osv.). I selve Kontakt plugin Skjema 7 kan du lage et uendelig antall skjemaalternativer, men hvordan tilpasses de i forskjellige knapper på samme side?
For å gjøre dette må du justere knappekoden fra forrige avsnitt. Den første knappen bruker alternativet presentert ovenfor. I den andre endres to verdier:
- Linken endres, tilordne href-parameteren verdien #contact_form_pop_2
- Endre ID-en til samme verdi #contact_form_pop_2