Så här lägger du till ett kontaktformulär till din WordPress-webbplats eller -blogg


Hur du lägger till ett kontaktformulärSom webbplatsägare bör du definitivt lära dig hur du lägger till ett kontaktformulär till WordPress. Din webbplats är inte en anonym enhet. De flesta vill veta och ibland interagera med vem som står bakom innehållet de läser. Varför tror du att det finns författarprofiler och bloggkommentarer??


Av den anledningen kommer du i den här artikeln att lära dig hur du lägger till ett kontaktformulär till din WordPress-webbplats. Inlägget kommer först att gå igenom orsakerna till att det är en bra idé och sedan får du en steg-för-steg-guide om hur du inkluderar ett kontaktformulär på din webbplats via ett plugin.

Vi kommer också att prata om hur du ändrar utformningen av din form och implementerar skräppost. Dessutom granskar vi kontaktformulär och skydd av personuppgifter – något som har kommit mer i fokus på sistone. Slutligen hittar du en lista med plugins som du kan använda för att lägga till ett kontaktformulär i WordPress.

Det kanske låter mycket, men oroa dig inte – vi kommer att hålla det enkelt!

Varför ska du använda ett kontaktformulär på din WordPress-webbplats?

Innan vi undersöker varför det är nödvändigt. Det finns många goda skäl att använda ett kontaktformulär på din webbplats istället för att publicera din e-postadress till exempel.

  • Skydd mot skräppost via e-post – Skräppost är ett skadedjur. Du kommer att märka det snabbt när du har en WordPress-webbplats som använder bloggkommentarer. En sak som spammare gör är att automatiskt skanna webbplatser efter oskyddade e-postadresser så att de kan lägga till dem i sina e-postlistor. Kontaktformulär hindrar det från att ge besökarna en chans att komma i kontakt utan att publicera din adress online.
  • Be om rätt information – Personer som kommer i kontakt med dig skickar inte alltid all information du behöver. Med ett kontaktformulär kan du specifikt begära det på förhand. Det ger dig också ett sätt att filtrera förfrågningar, till exempel efter typ. Detta underlättar ditt liv och minskar mycket fram och tillbaka.
  • Informera dina kunder Omvänt kan kontaktformulär fungera som den första informationspunkten. Du kan inkludera information för de som ringer upp för att informera dem om den förväntade responstiden och de åtgärder de kan vidta i förväg för att hantera deras förfrågan. Detta minskar sannolikheten för flera e-postmeddelanden från samma otåliga person.

Övertygad om att kontaktformulär är användbara? Låt oss sedan komma till den praktiska delen av den här tutorialen.

Hur man lägger till ett kontaktformulär i WordPress med kontaktformulär 7

Det finns många WordPress-plugins där för att lägga till ett kontaktformulär till din webbplats, både gratis och premium. Vi kommer att prata om några av dem senare i den här artikeln. För följande handledning kommer vi att använda Kontaktformulär 7.

Pluginet är tillgängligt gratis i WordPress-katalogen och har konsekvent varit bland de mest populära plugins hela tiden (i själva verket är det i början av detta skrivande). Utöver detta är det lätt att använda, har en fin funktionslista och förnuftiga tillägg.

Det är därför vi väljer det för att lära dig hur du lägger till ett kontaktformulär i WordPress.

Steg 1. Installera kontaktformulär 7 Plugin

Att installera kontaktformulär 7 är lika enkelt som alla andra WordPress-insticksprogram. Logga bara in på din webbplats, gå till Plugins> Lägg till nytt och skriv namnet i sökrutan.

installera kontaktformulär 7 för att lägga till kontaktformulär i wordpress

Det bör visas i första hand. Klicka på Installera nu för att ladda ner den på din webbplats. När det är klart klickar du på Aktivera för att börja använda plugin.

Steg 2. Skapa ditt nya kontaktformulär

Efter installationen hittar du ett nytt menyalternativ med namnet Kontakt i din WordPress-sidofält. Om du klickar på den kommer du till den här skärmen.

kontaktformulär 7 huvudmeny

Du får ett antal verktygstips för att göra ditt kontaktformulär bättre, till exempel att använda skräppostskydd. Vi kommer till det där senare.

Ännu viktigare är att du hittar en lista med alla kontaktformulär på din webbplats. Den innehåller ett exempelform som du teoretiskt kan använda direkt. Antingen klicka på den för att börja redigera eller slå Lägg till ny längst upp på skärmen. Båda kommer dig hit:

hur man lägger till kontaktformulär till wordpress med kontaktformulär 7

Det ser lite kryptiskt ut i början, men oroa dig inte – du kommer att förstå det snart.

För att fungera behöver ditt kontaktformulär fält. Fält är där besökare skriver in sitt namn, e-postadress eller meddelandet de vill skicka till dig, eller något annat du kanske vill att de ska lägga till.

Kontaktformulär 7 skapar de med lite HTML plus anpassade taggar. Allt mellan anger ett fält i ditt kontaktformulär plus den textbeskrivning som tillhör det. De faktiska fälten skapas av vad som finns mellan de fyrkantiga parenteserna.

Betyder det att för att skapa ett kontaktformulär måste du lära dig programmeringsspråk? Lyckligtvis kommer plugin med verktyg för att generera dessa automatiskt.

Steg 3. Konfigurera ditt formulär

För tillfället kommer standardformuläret i baksidan att se ut så här på sidan.

Kontaktformulärskonfiguration
“Lägg till ett kontaktformulär i WordPress” -formulär

Det är helt standard. Låt oss säga att du vill lägga till en rullgardinsmeny för att välja syftet med att komma i kontakt med dig. På det sättet kan du omedelbart se de meddelanden som ska prioriteras.

För att göra det måste du först placera markören där du vill att menyn ska visas i kontaktformuläret. I det här fallet är det mellan e-postadressen och ämnet.

Klicka på rullgardinsmenyn i verktygsfältet överst. Du får den här menyn:

kontaktformulär 7 skapa rullgardinsmeny

Så här fyller du i olika fält:

  • Fälttyp – Välj om fältet ska skicka kontaktformuläret eller inte.
  • namn – Detta anger namnet som används i taggen. Det visas inte för besökare men gör det lättare för dig att komma ihåg syftet med taggen och också konfigurera e-postmeddelandet som skickas till ditt konto senare.
  • alternativ – Ange tillgängliga alternativ för besökare med hjälp av rullgardinsmenyn. Sätt en per rad. Du har också möjlighet att tillåta flera val och använda ett tomt objekt som standard.
  • Id / klassattribut – Här kan du tilldela en CSS-klass eller id till fältet. Detta är mycket användbart för anpassad styling. Vi kommer att prata om det senare.

Så här fyllde vi ut det:

fyllt i formuläret taggenerator kontaktformulär 7

När du är nöjd klickar du på Sätt in tagg att sätta det i formen.

lägg till formuläretiketter för rullgardinsmenyn till kontaktformulär 7

Tänk på att när du först har förstått hur taggarna fungerar kan du också skapa dem eller göra ändringar i textfältet. För att göra den nya rullgardinsmenyn till ett icke-obligatoriskt fält kan du till exempel helt enkelt ta bort asterisken efter Välj. Ju mer du använder plugin, desto bättre förstår du hur det fungerar.

Nu återstår bara att lägga till en etikett. Det är texten som följer med kontaktformulärfältet för att förklara vad den gör. Kopiera och klistra in den befintliga koden från andra fält och justera den sedan efter dina behov.

lägg till HTML-kod för att formulera taggar i kontaktformulär 7

Steg 4. Redigera e-postinställningar

Därefter måste du konfigurera e-postmeddelandet som skickas till dig från kontaktformuläret. Det är inte förvånande att du gör det under Post fliken högst upp.

konfigurera kontaktformulär 7 e-postinställningar

Du hittar fälten som är förfyllda med liknande taggar som kontaktformuläret tidigare. Det ger dig också tillgängliga fälttaggar inklusive alla nya du skapade tidigare (om du har sparat formuläret). Du kan använda dem för att anpassa hur du får meddelanden från ditt kontaktformulär.

Så här betyder varje fält:

  • Till – Den e-postadress till vilken meddelandena kommer att skickas. Du kan vanligtvis lämna detta som det är.
  • Från – Avsändaren av e-postmeddelandet. Som standard är det inställt på namnet på den person som använder ditt kontaktformulär.
  • Ytterligare rubriker – Utrymme för ytterligare fält för meddelandets rubrik. Standardinställningarna skickar ditt svar till e-postmeddelandet från personen som kontaktar dig, inte e-postmeddelandet det kom från (dvs. din webbplats) när du träffade Svar. Det är också möjligt att sätta adressater till CC eller BCC där.
  • Meddelandeorgan – Den e-postadress du kommer att få.
  • Uteslut rader med tomma mail-taggar från utdata – När du kontrollerar detta, om någon av de använda taggarna är tomma, kommer plugin att utesluta dem från meddelandet.
  • Använd HTML-innehållstyp – Som standard skickas meddelandet i vanlig text. Markera den här rutan för att använda HTML istället.
  • Filbilagor – Om ditt formulär tillåter filöverföring tillhör taggarna för dessa filer här. Du kan också använda den till bifoga filer värd på din server.
  • Mail (2) – En ytterligare e-postmall som ofta används som autosvar. Markera för att aktivera.

Standardalternativen är ganska bra. Det enda vi behöver ändra för vårt exempel är ämnesraden.

ställa in ett filter i ditt e-postprogram

Med hjälp av formatet ovan kan du nu ställa in ett filter i ditt e-postprogram för att sortera meddelanden efter ämnesrad och prioritera affärsförfrågningar. Det handlar om e-postinställningar för tillfället.

Steg 5. Lägg till ett formulärmeddelande

Nästa upp är meddelanden flik. Du har möjlighet att konfigurera meddelanden dina besökare kan stöta på när du använder formuläret.

konfigurera formulärmeddelanden för kontaktformulär 7

Det här är felmeddelanden, framgångsmeddelanden eller bara tips om hur man använder formuläret korrekt. Vi tycker att dessa redan är ganska bra så vi brukar lämna allt som det är. Om du har en anledning att ändra någon av dem (till exempel för att passa tonen på din webbplats), känn dig fri att göra det.

Steg 6. Anpassa ytterligare inställningar

Slutligen kommer du till de ytterligare inställningarna.

kontaktformulär 7 ytterligare inställningar

Som standard är dessa tomma. Du kan göra olika saker – från att begränsa möjligheten för bara inloggade personer att skicka kontaktformuläret för att ställa in formuläret till demoläge för teständamål. Det är inte viktigt för våra ändamål, men du kan hitta alla de olika alternativen i dokumentation.

Steg 7. Lägg till formuläret på din webbplats

Nu när du är klar med att konfigurera formuläret är det dags att få det på din webbplats. Det första du behöver göra är att spara formuläret med knappen med samma namn.

Innan du gör det, kanske du vill lägga till ett namn till toppen. Detta gör formen mer urskiljbar om du skapar flera.

När du har sparat formuläret visas en kortkod på skärmen:

kontaktformulär 7 kortkod för att lägga till kontaktformulär till wordpress

Du kommer att använda det för att placera formuläret vart du vill. Det första du vill göra är att markera och kopiera det. När det är klart går du till sidan där du vill placera formuläret. Till exempel kan du helt enkelt skapa en ny sida och namnge den Kontakt. Klistra in kortkoden i WordPress-redigeraren.

kontaktformulär 7 kortkod i wordpress editor

När du nu publicerar sidan och går till front-end:

Kontaktformulär 7 formulär på sidan

Där är det. Lägg märke till rullgardinsmenyn som vi skapade tidigare. Det är nu en del av kontaktformuläret efter behov.

Enkelt, eller hur? Dessutom kan du använda samma metod för att placera formuläret någon annanstans.

Steg 8. Inkludera ett kontaktformulär i en sidofält (valfritt)

Det finns inget enklare än att placera kontaktformuläret i en sidofält. Gå bara till Utseende> Widgets. Lägg till en textwidget till vilket widget-område du vill att kontaktformuläret ska visas och klistra in kortkoden.

lägg till kontaktformuläret till wordpresswidget

Glöm inte att spara widgeten! När du nu går tillbaka till fronten på din webbplats är det:

kontaktformulär i WordPress widget

Du har precis behärskat grunderna för att lägga till ett kontaktformulär i WordPress. Vi är inte i slutet ännu. Det finns fortfarande en massa saker att göra för att ytterligare förbättra dina former.

Kontaktformulär i WordPress – Nästa steg

När du har formuläret på din webbplats slutar inte arbetet. Det finns fortfarande några viktiga saker att ta hand om, t.ex. utforma din form, skydda den från e-postspammare och genomföra skyddsåtgärder för personuppgifter. Låt oss göra detta i ordning:

Ändra formdesign

Helst finns det inget behov av att ändra utformningen av ditt kontaktformulär. Detta är sannolikt i vårt fall eftersom kontaktformulär 7 använder standard HTML-kod som märka eller input [type = "text"] för att skapa formulärfält.

I bra WordPress-teman definieras dessa i mallen. Följaktligen passar kontaktformuläret troligen automatiskt till din webbplatsdesign. Du kan se detta på exempelwebbplatsen ovan. Om du fortfarande behöver göra justeringar har du flera alternativ.

Som nämnts har formulär för kontaktformulär 7 standard HTML-markering. Du kan helt enkelt ändra tillhörande CSS och därmed hur formen ser ut. Tänk bara på att detta också får konsekvenser för andra inmatningsfält på din webbplats som har samma markering.

Dessutom har varje formulär skapat med kontaktformulär 7 en plugin-specifik kod. Du kan hitta koden med hjälp av utvecklarverktygen i din webbläsare.

ändra kontaktformulärdesign via css

Till exempel kan du göra ändringar i hela formens styling genom att använda .wpc7-formen CSS-klass. Var medveten om att det har konsekvenser för alla former som skapats med kontaktformulär 7, men lämnar andra inmatningsfält på din webbplats orörda.

Om du vill bli ännu mer specifik och ändra styling endast för vissa former, har du tur. Som du kan se från skärmdumpen ovan får varje kontaktformulär 7-formulär sitt eget CSS-id.

Du kan använda detta för att rikta in element på en per-form basis. Dessutom är det möjligt att ge elementen på dina formulär sina egna CSS-klasser och id.

lägg till css-klass och id i kontaktformuläret 7

Med dessa kan du rikta in dem ännu mer specifikt.

Kort sagt, vad du än vill ändra dina formers design har du alla verktyg för att göra det.

Implementera skräppost

Spam är ett stort ämne när det gäller webben och webbplatser i allmänhet. Om du lämnar din e-postadress oskyddad på din webbplats finns det många automatiska program där ute som kommer att hämta dem och börja skicka oönskade erbjudanden, fiskemails eller värre.

Tyvärr gäller det samma för kontaktformuläret. Om du inte sätter in åtgärder för att förhindra det finns det också program som kan skicka dig skräppost via kontaktformulär.

Lyckligtvis erbjuder kontaktformulär 7 enkla sätt att förhindra detta. En av dem är enkel: inkludera en frågesport i din form som bots inte kan svara, som en enkel ekvation.

kontaktformulär 7 skräppostskydd via frågesport

Quiz-taggen gör det möjligt. Det är lika enkelt att använda som alla andra taggar i kontaktformulär 7 och du kan hitta ytterligare information här.

Bortsett från det finns det reCAPTCHA. Detta är en Google-tjänst för att bekämpa skräppost. Du behöver en API-nyckel och integrera den med kontaktformulär 7. Hitta instruktioner här. Detta kan få konsekvenser för att skydda personlig information. Mer om det i nästa avsnitt.

Du kan använda reCAPTCHA-taggen för att lägga till den i ditt formulär. Tillverkaren av Contact Form 7 har också ett Captcha-plugin som heter Riktigt enkelt CAPTCHA som du kan använda för samma ändamål.

Du har också möjligheten att använda plugins från tredje part för skräppost. Det mest kända är naturligtvis, Akismet och Kontaktformulär 7 erbjuder detaljerade instruktioner om hur man använder de två tillsammans.

Det finns andra, t.ex. Kontaktformulär 7 Honeypot eller WPBruiser. För det senare behöver du a betald förlängning för att det ska fungera med kontaktformulär 7. Det finns också fler alternativ som du enkelt kan hitta.

Viktig sidobesked: Kontaktformulär och GDPR

Du kanske är medveten om att det nyligen har skett några förändringar av Internet-sekretesslagar i Europa. Den 25 maj 2018, Allmän uppgiftsskyddsförordning (GDPR) trädde i kraft.

Det medförde ett antal ändringar av lagar som rör användningen av personlig information online. Det hotar också stora böter för alla som bryter mot bestämmelserna.

Varför är det viktigt? Kontaktformulär samlar in personuppgifter. Av den anledningen, om du faller under förordningarna (och de flesta gör det nu) måste du vara uppmärksam på vissa saker.

Första saker först: Vi är inte ett advokatbyrå!

Nedan hittar du ett antal tips om hur du gör ditt kontaktformulär GDPR-kompatibelt. Dessa tips har sammanställts efter bästa förmåga.

Men ingen här på websitesetup.org är en advokat och vi spelar inte heller en på TV. Av den anledningen ersätter inte nedan ett professionellt konsultation och bör inte ses som juridisk rådgivning.

Okej, så mycket för “om du har problem, kom inte tillbaka och stämmer oss” -delen. Låt oss ta tips!

Tips för att göra ditt kontaktformulär GDPR överensstämmande

Så här bygger du integritetsmedvetna kontaktformer:

  1. Samla inte in data du inte behöver – Kontaktformulär ger dig valet av vilka fält du vill inkludera. Om det finns några uppgifter som du egentligen inte behöver, sluta samla in dem. På det sättet, om det finns ett brott, kan du inte förlora det.
  2. Inaktivera spårning – Om du använder ett kontaktformulär som spårar cookies, användaragenter och / eller användar-IP: er måste du inaktivera detta för att vara GDPR-kompatibel. Kontaktformulär 7 tycks inte heller göra något, så det finns inget att göra. Kontrollera ditt kontaktformulär om du använder något annat.
  3. Få absolut samtycke – Lägg till ett sätt i ditt formulär för att folk ska godkänna att du samlar in sina uppgifter. Till exempel erbjuder kontaktformulär 7 en godkännande rutan. Viktigt: ställ inte in kryssrutan för att vara aktiverad som standard. Användare måste göra det själva. Inkludera också ett meddelande som säger vad du samlar in och för vilket ändamål plus en länk till din integritetspolicy.
  4. Ha en integritetspolicy på plats – När vi talar om, under GDPR måste varje professionell webbplats visa en sekretesspolicy som förklarar vilken information de samlar in och hur de använder den. Du måste också ge besökarna möjlighet att be om sina personuppgifter och få dem bort. Detta är ett mer komplext ämne än vi kan ta upp här. Använd länken nedan för att hitta mer information.
  5. Implementera HTTPS – Med SSL / HTTPS krypteras datautbytet mellan webbläsare och server. Detta är viktigt för kontaktformer för att skydda personuppgifter. Det anses också som vanligt praxis nu. Kolla in vår guide för hur du implementerar den.

Från allt vi har läst, borde ovanstående räcka för att göra kontaktformer i överensstämmelse med den nya lagen. Naturligtvis finns det mer med det här ämnet för webbplatsägare. Du kan ta reda på mer här och här.

Andra fantastiska kontaktformulär plugins för WordPress

Förutom kontaktformulär 7 finns det ett flertal fler plugins där ute för att skapa kontaktformulär i WordPress. Här är några andra bra kandidater.

Jetpack Forms (fri)

jetpack former

Jetpack är en svit med kraftfulla plugins som produceras av WordPress.com (se vår jämförelse av WordPress.org vs WordPress.com). Dessa inkluderar en modul för att skapa kontaktformulär. När du sätter på den kan du börja skriva in formulär till din WordPress-webbplats direkt från inlägg och sidredigerare.

Här är några framstående funktioner:

  • Snabbt och enkelt att använda
  • E-postvarningar för att informera dig om formulärinsändningar
  • Gör eventuella justeringar inifrån WordPress-redigeraren
  • En bra lösning för att skapa enkla former

När du använder Jetpack-formulär måste du implementera någon typ av skräppost. vi talar av erfarenhet. Nämnda WPBruiser är ett gratis alternativ.

HappyForms (fri)

HappyForm logotypHappyForms är relativt nytt på marknaden. Det integreras med WordPress Customizer, vilket gör att det är lätt att komma igång. Bortsett från det har den följande funktioner:

  • Lätt och snabbt
  • Helt gratis att använda (men kommer med varumärke)
  • Låter dig bygga formulär via dra och släpp
  • Visar formulärinsändningar i WordPress-instrumentpanelen
  • Levereras med inbyggt skräppost

Kontaktformulär 7 (fri)

Kontaktformulär 7

Med kontaktformulär 7 kan du hantera flera olika kontaktformulär med ett grundläggande användarvänligt gränssnitt. De har också en premiumversion, men den är tänkt som en donation. Premien gör inte eller ger ingenting riktigt (förutom en ny mus som laddar animering).

  • Snabbt och enkelt att använda
  • Du kan göra justeringar i WordPress
  • Villkorad logik för kontaktformulär

Fantastiskt gratis alternativ.

Ninja Forms (Freemium)

Ninja Forms

Detta plugin låter dig bygga formulär genom ett användarvänligt gränssnitt. Den har en gratis version men erbjuder också en premiumutgåva med ytterligare funktioner, tillägg, support, layouter och mer. Dessa inkluderar:

  • Anslut enkelt med vanliga e-postmarknadsföringstjänster
  • Möjlighet att acceptera betalningar via dina formulär
  • Synkronisera formulär med CRM som Salesforce

Medlemskap för Ninja Forms kostar $ 99 / år och uppåt.

Gravity Forms (premie)

gravitationslogotyp

Gravity Forms är förmodligen den mest populära premiumlösningen. Det är ganska avancerat, har ett bra användargränssnitt och ett bra stödsystem. Till skillnad från andra poster på den här listan är detta plugin endast premium, men du får mycket för dina pengar.

  • Mer än 30 typer av formulärfält
  • Stort utbud av tillägg
  • Filuppladdningar
  • Möjligheten för användarinsändningar att visas i frontend
  • Former på flera sidor
  • Villkorad logik och avancerade beräkningar

Om du är intresserad av Gravity Forms börjar deras planer på $ 59 / år.

Caldera Forms (Freemium)

caldera former

Den sista posten i den här listan låter dig också bygga formulär med ett grafiskt gränssnitt. Bortsett från det har den följande funktioner:

  • Ge besökarna möjlighet att skicka in sina egna inlägg
  • Auto-responders
  • Anti-spam-funktioner
  • Helt lyhörda webbformulär

Förutom gratisversionen finns det också en startutgåva från $ 6,24 / månad – $ 74,99 / år.

WordPress-kontaktformulär i ett nötskal

Att lära sig att lägga till ett kontaktformulär till WordPress är något som alla som äger en webbplats bör göra. Det är ett av de viktigaste sätten för människor att komma i kontakt med dig. Ett kontaktformulär gör att din webbplats ser mer professionell ut, skyddar dig från spammare, ser till att du får den information du behöver och fungerar som en dörrvakt.

I den här artikeln har vi behandlat hur du lägger till ett kontaktformulär till WordPress med kontaktformulär 7. Vi har gått igenom avancerad styling och skräppostskydd för ditt formulär. Utöver detta täckte posten det viktiga ämnet för GDPR-efterlevnad för kontaktformulär och tips om hur man kan uppnå det. Slutligen tittade vi på ett antal andra utmärkta plugins som du kan använda för att lägga till ett kontaktformulär till din WordPress-webbplats.

Nu vet du allt du behöver för att lägga till ett formulär på din egen webbplats. Vi hoppas att det kommer att leda till stora möjligheter och intressanta nya kontakter.

Har du några frågor om hur du lägger till ett kontaktformulär till din webbplats? Låt oss i så fall meddela oss i kommentaravsnittet nedan.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map