Som hjemmesideejer bør du bestemt lære, hvordan du tilføjer en kontaktformular til WordPress. Dit websted er ikke en anonym enhed. De fleste mennesker ønsker at vide og lejlighedsvist interagere med hvem der står bag det indhold, de læser. Hvorfor tror du, at der er forfatterprofiler og blogkommentarer?
Af denne grund lærer du i denne artikel, hvordan du tilføjer en kontaktformular til dit WordPress-websted. Indlægget vil først gennemgå årsagerne til, at det er en god ide, og så får du en trinvis vejledning om, hvordan du inkluderer en kontaktformular på dit websted via et plugin.
Vi vil også tale om, hvordan du ændrer designet på din form og implementerer spambeskyttelse. Desuden undersøger vi kontaktformularer og beskyttelse af personoplysninger – noget, der er kommet mere i fokus i det seneste. Endelig finder du en liste over plugins, du kan bruge til at tilføje en kontaktformular i WordPress.
Det lyder måske meget, men rolig – vi holder det enkelt!
1 Hvorfor skal du bruge en kontaktformular på dit WordPress-sted?
2 Sådan tilføjes en kontaktformular i WordPress med kontaktformular 7
2.1 Trin 1. Installer kontaktformular 7-plugin
2.2 Trin 2. Opret din nye kontaktformular
2.3 Trin 3. Konfigurer din form
2.4 Trin 4. Rediger e-mail-indstillinger
2.5 Trin 5. Tilføj en formularbeskeder
2.6 Trin 6. Tilpas yderligere indstillinger
2.7 Trin 7. Føj formularen til dit websted
2.8 Trin 8. Inkluder en kontaktformular i en sidepanel (valgfrit)
3 Kontaktformularer i WordPress – Næste trin
3.1 Ændring af formdesign
3.2 Implementering af spambeskyttelse
4 Vigtig sidebemærkning: Kontaktformularer og GDPR
4.2 Tip til at gøre din kontaktformular GDPR i overensstemmelse
5 Andre fantastiske kontaktformular-plugins til WordPress
5.3 Kontaktformular 7 (gratis)
5.5 Tyngdekraftsformer (præmie)
6 WordPress-kontaktformularer i et nøddeskal
Hvorfor skal du bruge en kontaktformular på dit WordPress-sted?
Før vi går ind på, hvordan vi skal undersøge, hvorfor det er nødvendigt. Der er mange gode grunde til at bruge en kontaktformular på dit websted i stedet for at placere din e-mail-adresse direkte f.eks.
Beskyttelse mod e-mail-spam – Spam er en skadedyr. Du vil bemærke det hurtigt, når du har et WordPress-websted, der bruger blogkommentarer. Én ting spammere gør er automatisk at scanne websteder for ubeskyttede e-mail-adresser, så de kan føje dem til deres mailinglister. Kontaktformularer forhindrer det i at ske ved at give besøgende en chance for at komme i kontakt uden at offentliggøre din adresse online.
Bed om de rigtige oplysninger – Folk, der kommer i kontakt med dig, sender ikke altid alle de oplysninger, du har brug for. Med en kontaktformular kan du specifikt bede om det på forhånd. Det giver dig også en måde at filtrere forespørgsler på, f.eks. Efter type. Dette gør dit liv lettere og reducerer meget frem og tilbage.
Informer dine klienter – Omvendt kan kontaktformularer også fungere som det første informationspunkt. Du er i stand til at medtage oplysninger til opkaldere for at fortælle dem om den forventede responstid og de skridt, de kan tage på forhånd for at løse deres forespørgsel. Dette reducerer sandsynligheden for flere e-mails fra den samme utålmodige person.
Overbevist om, at kontaktformularer er nyttige? Lad os derefter komme til den praktiske del af denne tutorial.
Sådan tilføjes en kontaktformular i WordPress med kontaktformular 7
Der er mange WordPress-plugins derude for at tilføje en kontaktformular til dit websted, både gratis og premium. Vi vil tale om et par af dem senere i denne artikel. Til den følgende tutorial bruger vi Kontaktformular 7.
Plugin er gratis tilgængeligt i WordPress-biblioteket og har været konsekvent blandt de mest populære plugins hele tiden (faktisk på tidspunktet for denne skrivning er det i første omgang). Derudover er det let at bruge, har en dejlig funktionsliste og fornuftige tilføjelser.
Derfor vælger vi det for at lære dig, hvordan du tilføjer en kontaktformular i WordPress.
Trin 1. Installer kontaktformular 7-plugin
Installation af kontaktformular 7 er lige så let som ethvert andet WordPress-plugin. Log ind på dit websted, gå til Plugins> Tilføj nyt og skriv dets navn i søgefeltet.
Det skal vises i første omgang. Klik på Installer nu at downloade det på dit websted. Når det er gjort, skal du klikke på Aktiver for at begynde at bruge plugin.
Trin 2. Opret din nye kontaktformular
Efter installationen finder du et nyt menupunkt, der hedder Kontakt i din WordPress-sidefelt. Hvis du klikker på den, kommer du til denne skærm.
Du får et antal værktøjstip til at gøre din kontaktformular bedre, f.eks. Ved at bruge spambeskyttelse. Vi kommer til de ting senere.
Mere vigtigt er, at du finder en liste over alle kontaktformularer på dit websted. Det inkluderer en prøveformular, som du teoretisk kan bruge med det samme. Klik enten på det for at begynde at redigere eller ramme Tilføj ny øverst på skærmen. Begge vil komme dig hit:
Det ser lidt kryptisk ud i begyndelsen, men bekymre dig ikke – du vil forstå det snart.
For at arbejde, har din kontaktformular brug for felter. Felter er hvor besøgende indtaster deres navn, e-mail-adresse eller den meddelelse, de vil sende dig, eller noget andet, du måske vil have dem til at tilføje.
Kontaktformular 7 opretter dem med en smule HTML plus brugerdefinerede tags. Alt imellem ... betegner et felt i din kontaktformular plus den tekstbeskrivelse, der hører til den. De faktiske felter oprettes af, hvad der er mellem de firkantede parenteser.
Betyder det, at du skal lære programmeringssprog for at oprette en kontaktformular? Heldigvis kommer plugin med værktøjer til at generere disse automatisk.
Trin 3. Konfigurer din form
I øjeblikket vil standardformularen, vi har i bagenden, se sådan ud på siden.
"Tilføj en kontaktformular i WordPress" eksempelformular
Det er alt sammen standard. Lad os sige, at du vil tilføje en rullemenu for at vælge formålet med at komme i kontakt med dig. På den måde kan du straks se de meddelelser, som du vil prioritere.
For at gøre det skal du først placere markøren, hvor du ønsker, at menuen skal vises i kontaktformularen. I dette tilfælde er det mellem e-mail-adressen og emnet.
Klik på rullemenuen i værktøjslinjen øverst. Du får denne menu:
Sådan udfyldes forskellige felter:
Felttype – Vælg, om feltet skal indsendes til kontaktformularen eller ej.
Navn – Dette angiver navnet, der er brugt i tagget. Det vises ikke for besøgende, men gør det lettere for dig at huske formålet med tagget og også konfigurere den e-mail, der sendes til din konto senere.
Muligheder – Indtast de tilgængelige indstillinger for besøgende ved hjælp af rullemenuen. Sæt en pr. Linje. Du har også muligheden for at tillade flere valg og bruge et tomt element som standard.
Id / klasse attribut – På dette sted kan du tildele en CSS-klasse eller id til feltet. Dette er meget nyttigt til tilpasset styling. Vi vil tale om det senere.
Sådan udfyldte vi det:
Når du er tilfreds, skal du klikke på Indsæt mærke at sætte det i form.
Vær opmærksom på, at når du først har forstået, hvordan tags fungerer, kan du også oprette dem eller foretage ændringer i tekstfeltet. For at gøre den nye rullemenu for eksempel til et ikke-påkrævet felt, kan du blot slette stjerne efter Vælg. Jo mere du bruger plugin, jo bedre forstår du, hvordan det fungerer.
Nu er det kun tilbage at tilføje en etiket. Det er teksten, der ledsager feltet med kontaktformularer for at forklare, hvad den gør. Kopier og indsæt blot den eksisterende kode fra andre felter, og juster den derefter til dine behov.
Trin 4. Rediger e-mail-indstillinger
Herefter skal du konfigurere den e-mail, der er sendt til dig fra kontaktformularen. Overraskende gør du det under Post fane øverst.
Du finder felterne forudfyldt med lignende tags som kontaktformularen tidligere. Det giver dig også tilgængelige feltkoder inklusive eventuelle nye, du oprettede tidligere (hvis du har gemt formularen). Du kan bruge dem til at tilpasse, hvordan du modtager beskeder fra din kontaktformular.
Her er, hvad hvert felt betyder:
Til – Den e-mail-adresse, som meddelelserne vil blive sendt til. Du kan normalt lade dette være som det er.
Fra – Afsender af e-mailen. Som standard er det indstillet til navnet på den person, der bruger din kontaktformular.
Yderligere overskrifter – Plads til yderligere felt for meddelelseshoved. Standardindstillingerne sender dit svar til e-mailen fra den person, der kontakter dig, ikke den e-mail, den kom fra (dvs. dit websted), da du ramte Svar. Det er også muligt at sæt adressater til CC eller BCC derinde.
Meddelelsesorgan – Organet af den e-mail, du vil modtage.
Ekskluder linjer med tomme mail-tags fra output – Når du kontrollerer dette, hvis nogen af ​​de anvendte tags er tomme, udelukker plugin dem fra meddelelsen.
Brug HTML-indholdstype – Som standard sendes beskeden i almindelig tekst. Marker dette felt for at bruge HTML i stedet.
Filvedhæftede filer – Hvis din formular tillader filoverførsler, hører tags for disse filer her. Du kan også bruge det til vedhæft filer, der er vært på din server.
Mail (2) – En ekstra mail-skabelon, der ofte bruges som autoresponder. Marker for at aktivere.
Standardindstillingerne er temmelig gode. Det eneste, vi har brug for at ændre til vores eksempel, er emnelinjen.
Ved hjælp af ovenstående format kan du nu oprette et filter i dit mail-program til at sortere meddelelser efter emnelinje, hvilket giver forretningsforespørgsler prioritet. Det handler alt om mailindstillinger lige nu.
Trin 5. Tilføj en formularbeskeder
Næste op er Beskeder fane. Du har muligheden for at konfigurere de meddelelser, som dine besøgende kan støde på, mens du bruger formularen.
Dette er fejlmeddelelser, succesmeddelelser eller bare tip om, hvordan man bruger formularen korrekt. Vi finder ud af, at disse allerede er temmelig gode, så vi normalt lader alt være. Hvis du har en grund til at ændre nogen af ​​dem (f.eks. For at passe til tonen på dit websted), er du velkommen til at gøre det.
Trin 6. Tilpas yderligere indstillinger
Endelig kommer du til de ekstra indstillinger.
Som standard er disse tomme. Du kan gøre forskellige ting – fra at begrænse muligheden for kun indlogerede personer til at indsende kontaktformularen til at indstille formularen til demotilstand til testformål. Det er ikke vigtigt til vores formål, men du kan finde alle de forskellige muligheder i dokumentation.
Trin 7. Føj formularen til dit websted
Nu hvor du er færdig med at konfigurere formularen, er det tid til at hente den på dit websted. Den første ting du skal gøre er at gemme formularen via knappen med samme navn.
Før du gør det, vil du måske føje et navn til toppen. Dette vil gøre formen mere skelnen, hvis du opretter flere.
Når du har gemt din formular, vises en kortkode på skærmen:
Du bruger den til at placere formularen, hvor du vil. Den første ting, du vil gøre, er at markere og kopiere det. Når det er gjort, skal du gå til den side, hvor du vil placere formularen. For eksempel kan du blot oprette en ny side og navngive den Kontakt. Indsæt kortkoden i WordPress-editoren.
Når du nu offentliggør siden og går til frontend:
Der er det. Bemærk rullemenuen, vi oprettede tidligere. Det er nu en del af kontaktformularen efter behov.
Enkelt, ikke? Desuden kan du bruge den samme metode til at placere formularen andre steder.
Trin 8. Inkluder en kontaktformular i en sidepanel (valgfrit)
Der er intet lettere end at placere kontaktformularen i en sidebjælke. Bare gå til Udseende> Widgets. Føj en tekstwidget til det widget-område, du vil have, at kontaktformularen skal vises og indsætte kortkoden.
Glem ikke at gemme widgetten! Når du nu går tilbage til fronten af ​​dit websted, er det:
Du har lige mestret det grundlæggende ved at tilføje en kontaktformular i WordPress. Vi er ikke ved slutningen endnu. Der er stadig en masse ting at gøre for at forbedre dine former yderligere.
Kontaktformularer i WordPress – Næste trin
Når du har formularen på dit websted, slutter arbejdet ikke. Der er stadig nogle vigtige ting at tage sig af, f.eks. Styling af din form, beskyttelse mod e-mail-spammere og implementering af beskyttelsesforanstaltninger til personlige data. Lad os gøre dette i rækkefølge:
Ændring af formdesign
Ideelt set er det ikke nødvendigt at ændre stylingen af ​​din kontaktformular. Dette er sandsynligvis i vores tilfælde, fordi kontaktformular 7 bruger standard HTML-kode som etiket eller input [type = "text"] at oprette formfelter.
I gode WordPress-temaer defineres disse i typografibladet. Følgelig passer kontaktformularen sandsynligvis automatisk til dit webstedsdesign. Du kunne se dette på eksempeleksemplet ovenfor. Hvis du stadig skal foretage justeringer, har du flere muligheder.
Som nævnt har formularer til kontaktformular 7 standard HTML-markering. Du kan simpelthen ændre det tilknyttede CSS og dermed hvordan formene ser ud. Bare husk, at dette også har konsekvenser for andre inputfelter på dit websted, der deler den samme markup.
Derudover leveres hver formular oprettet med kontaktformular 7 med en pluginspecifik kode. Du kan finde koden ved hjælp af udviklerværktøjer i din browser.
For eksempel er du i stand til at foretage ændringer i hele formens styling ved hjælp af .wpc7-formen CSS klasse. Vær opmærksom på, at det har konsekvenser for alle formularer oprettet med kontaktformular 7, men lader andre inputfelter på dit websted være uberørte.
Hvis du ønsker at blive endnu mere specifik og kun ændre stylingen til bestemte former, er du heldig. Som du kan se fra skærmbillede ovenfor, får hver kontaktformular 7-formular sin egen CSS-id.
Du kan bruge dette til at målrette mod elementer på en per-form basis. Derudover er det muligt at give elementerne på dine formularer deres egne CSS-klasser og id'er.
Med dem er du i stand til at målrette dem endnu mere specifikt.
Kort sagt, uanset hvad du vil ændre dine formers design, har du alle værktøjer til at gøre det.
Implementering af spambeskyttelse
Spam er et stort emne, når det kommer til internettet og websteder generelt. Hvis du lader din e-mail-adresse være ubeskyttet på dit websted, er der en masse automatiske programmer derude, der henter dem og begynder at sende dig uopfordrede tilbud, fiskemails og værre.
Desværre er det samme for kontaktformularer. Medmindre du indstiller foranstaltninger for at forhindre det, er der også programmer, der kan sende dig spam via kontaktformularer.
Heldigvis tilbyder Kontaktformular 7 nemme måder at forhindre dette på. En af dem er enkel: medtag en quiz i din form, som bots ikke kan svare på, som en simpel ligning.
Quizmærket gør det muligt. Det er lige så let at bruge som alle andre tags i kontaktformular 7, og du kan finde yderligere oplysninger her.
Bortset fra det er der reCAPTCHA. Dette er en Google-tjeneste til bekæmpelse af spam. Du har brug for en API-nøgle og integrer den med kontaktformular 7. Find instruktioner her. Dette kan have konsekvenser for beskyttelsen af ​​personlige oplysninger. Mere om det i det næste afsnit.
Du kan bruge reCAPTCHA-tagget til at føje det til din form. Producenten af ​​Kontaktformular 7 har også et Captcha-plugin, der kaldes Virkelig enkel CAPTCHA som du kan bruge til samme formål.
Du har også muligheden for at bruge tredjeparts plugins til spambeskyttelse. Det mest kendte er naturligvis, Akismet og Kontaktformular 7 indeholder detaljerede instruktioner om hvordan man bruger de to sammen.
Der er andre, f.eks Kontaktformular 7 Honeypot eller WPBruiser. For sidstnævnte har du brug for en betalt forlængelse for at det kan fungere med kontaktformular 7. Der er også flere muligheder, som du nemt kan finde.
Vigtig sidebemærkning: Kontaktformularer og GDPR
Du er måske opmærksom på, at der for nylig er sket nogle ændringer i lovgivning om privatlivets fred i Europa. Den 25. maj 2018, Generel databeskyttelsesforordning (GDPR) trådte i kraft.
Det medførte en række ændringer i love, der vedrører brugen af ​​personlige oplysninger online. Det truer også store bøder for enhver, der overtræder reglerne.
Hvorfor er det vigtigt? Kontaktformular indsamler personlige data. Af denne grund, hvis du falder ind under reglerne (og de fleste gør det nu), skal du være opmærksom på nogle ting.
Nedenfor finder du et antal tip til, hvordan du gør din kontaktformular GDPR-kompatibel. Disse tip er samlet efter vores bedste evner.
Ingen her på websitesetup.org er dog advokat, og vi spiller heller ikke en på tv. Af den grund erstatter nedenstående ikke en professionel høring og bør ikke ses som juridisk rådgivning.
Ok, så meget for "hvis du har problemer, skal du ikke vende tilbage og sagsøge os" -delen. Lad os komme til tipene!
Tip til at gøre din kontaktformular GDPR i overensstemmelse
Sådan bygger du privatlivsbevidste kontaktformer:
Indsaml ikke data, du ikke har brug for – Kontaktformularer giver dig et valg af hvilke felter du skal inkludere. Hvis der er data, du faktisk ikke har brug for, skal du stoppe med at indsamle dem. På den måde, hvis der er et brud, kan du ikke miste det.
Deaktiver enhver sporing – Hvis du bruger en kontaktformular, der sporer cookies, brugeragenter og / eller bruger-IP'er, skal du deaktivere dette for at være GDPR-kompatibel. Kontaktformular 7 gør tilsyneladende ingen af ​​dem, så der er ikke noget at gøre. Tjek den valgte kontaktformular, hvis du bruger noget andet.
Få absolut samtykke – Føj en måde til din formular for, at folk kan acceptere, at du indsamler deres data. For eksempel tilbyder kontaktformular 7 en accept boks. Vigtigt: Indstil ikke afkrydsningsfeltet til at være aktiveret som standard. Brugere skal gøre det selv. Medtag også en meddelelse, der siger, hvad du indsamler, og til hvilket formål plus et link til din privatlivspolitik.
Har en privatlivspolitik på plads – Når vi taler om, at hver professionel webside under GDPR skal vise en privatlivspolitik, der forklarer, hvilke data de indsamler, og hvordan de bruger dem. Du skal også give besøgende mulighed for at bede om deres personlige data og få dem fjernet. Dette er et mere komplekst emne, end vi kan dække her. Brug linket nedenfor for at finde flere oplysninger.
Implementere HTTPS – Ved hjælp af SSL / HTTPS krypterer dataudvekslingen mellem browser og server. Dette er vigtigt for kontaktformularer for at holde personlige data sikre. Det betragtes også som almindelig praksis nu. Se vores guide for, hvordan du implementerer den.
Fra alt, hvad vi har læst, bør ovenstående være nok til at gøre kontaktformularer i overensstemmelse med den nye lov. Der er selvfølgelig mere til dette emne for webstedsejere. Du kan finde ud af mere her og her.
Andre fantastiske kontaktformular-plugins til WordPress
Bortset fra kontaktformular 7 er der en masse flere plugins derude til at oprette kontaktformularer i WordPress. Her er et par andre gode kandidater.
Jetpack er en pakke med kraftfulde plugins produceret af WordPress.com (se vores sammenligning af WordPress.org vs WordPress.com). Disse inkluderer et modul til oprettelse af kontaktformularer. Når du tænder for det, kan du begynde at indtaste formularer på dit WordPress-websted lige fra post- og sideditoren.
Her er nogle fremtrædende funktioner:
E-mail-advarsler for at fortælle dig om formularindsendelser
Foretag eventuelle justeringer inde fra WordPress-editoren
En fantastisk løsning til at skabe enkle former
Når du bruger Jetpack-formularer, skal du sørge for at implementere en form for spambeskyttelse. vi taler af erfaring. De nævnte WPBruiser er en gratis mulighed.
HappyForms er relativt nyt på markedet. Det integreres med WordPress Customizer, som gør det nemt at komme i gang. Bortset fra det har den følgende funktioner:
Helt gratis at bruge (men kommer med branding)
Gør det muligt at oprette formularer via træk og slip
Viser formularindsendelser i WordPress-betjeningspanelet
Leveres med indbygget spambeskyttelse
Med kontaktformular 7 kan du administrere flere forskellige kontaktformularer med en grundlæggende let at bruge interface. De har også en premium-version, men den er ment som en donation. Præmien gør eller giver ikke rigtig noget (udover en ny mus, der indlæser animation).
Du kan foretage justeringer i WordPress
Betinget logik for kontaktformularer
Fantastisk gratis mulighed.
Dette plugin giver dig mulighed for at oprette formularer via en brugervenlig grænseflade. Det har en gratis version, men tilbyder også en premium-udgave med yderligere funktioner, tilføjelser, support, layout og mere. Disse inkluderer:
Forbind let med almindelige e-mail-marketingtjenester
Mulighed for at acceptere betalinger via dine formularer
Synkroniser formularer med CRM som Salesforce
Medlemskab af Ninja-formularer koster $ 99 / år og opefter.
Tyngdekraftsformer (præmie)
Gravity Forms er sandsynligvis den mest populære premium-løsning. Det er temmelig avanceret, har en god brugergrænseflade og et fantastisk supportsystem. I modsætning til andre poster på denne liste er dette plugin kun premium, men du får meget for dine penge.
Mere end 30 typer af formfelter
Stort udvalg af tilføjelser
Muligheden for, at brugerindstillinger vises i frontend
Betinget logik og avancerede beregninger
Hvis du er interesseret i Gravity Forms, starter deres planer på $ 59 / år.
Den sidste post på denne liste giver dig også mulighed for at oprette formularer med en grafisk grænseflade. Bortset fra det har den følgende funktioner:
Giv besøgende mulighed for at indsende deres egne indlæg
Helt lydhøre webformularer
Udover den gratis version er der også en starterudgave starter ved $ 6,24 / måned – $ 74,99 / år.
WordPress-kontaktformularer i et nøddeskal
At lære at tilføje en kontaktformular til WordPress er noget enhver, der ejer et websted, bør gøre. Det er en af ​​de vigtigste måder for folk at komme i kontakt med dig på. En kontaktformular får dit websted til at se mere professionelt ud, beskytter dig mod spammere, sørger for at du får de oplysninger, du har brug for, og fungerer som en dørmand.
I denne artikel har vi dækket, hvordan man tilføjer en kontaktformular til WordPress ved hjælp af kontaktformular 7. Vi har gennemgået avanceret styling og spambeskyttelse til din form. Derudover dækkede stillingen det vigtige emne med GDPR-overholdelse af kontaktformularer og tip til, hvordan man kan nå det. Endelig kiggede vi på en række andre fremragende plugins, du kan bruge til at tilføje en kontaktformular til dit WordPress-sted.
På nuværende tidspunkt ved du alt hvad du har brug for for at tilføje en formular til dit eget websted. Vi håber, at det vil føre til store muligheder og interessante nye kontakter.
Har du spørgsmål til, hvordan du tilføjer en kontaktformular til dit websted? I bekræftende fald, så lad os vide det i kommentarfeltet nedenfor.