Hur du skapar WordPress-formulär med rullgardinsfält (enkel metod)

Besökare börjar fylla i ditt kontaktformulär, sedan överger de det plötsligt halvvägs. Det är en av de mest frustrerande upplevelserna för alla webbplatsägare, särskilt när du vet att dessa potentiella kunder kan förändra din verksamhet.

Sanningen är att långa formulär skrämmer användare och får besökare att lämna utan att slutföra formuläret.

Efter år av att ha hjälpt ägare av WordPress-webbplatser att optimera sina formulär har vi upptäckt att användning av rullgardinsfält kan förbättra dina formulärs slutförandefrekvens.

Dessutom sparar dessa enkla element inte bara värdefullt skärmutrymme utan guidar också användare mot att ge exakt den information du behöver veta om dem.

I den här handledningen visar vi dig det enklaste sättet att skapa WordPress-formulär med nedfällda fält som besökare faktiskt vill fylla i.

Vad är rullgardinsfält och varför använda dem?

Ett rullgardinsfält låter användare välja ett alternativ från en fast lista med olika variationer. Användare kan helt enkelt klicka på fältet för att se alla rullgardinsvalen.

Som webbplatsägare kan du använda rullgardinsfält för att skapa webbformulär, såsom kontaktformulär, anmälningsformulär för evenemang, anmälningar till e-postutskick eller formulär för produktbeställningar.

Rullgardinsfält kan förbättra ditt formulärs effektivitet. Här är några fördelar:

• 💡 Konsekvens. Den fasta listan med alternativ håller insamlade data konsekventa och förhindrar ogiltiga inmatningar. Detta gör dataanalysen mer exakt.
• 🎢 Dynamiska fält. Rullgardinsfält gör det enklare att ställa in villkorlig logik. Den fasta listan med alternativ låter dig visa ytterligare fält baserat på användarens val utan onödiga hinder.
• ✂️ Minskad formulärlängd. Genom att kombinera flera alternativ i en kompakt rullgardinsmeny ser ditt formulär mindre skrämmande ut. Detta kan resultera i en bättre användarupplevelse.

Nu ska vi titta på hur man skapar formulär med rullgardinsfält i WordPress. Här är en snabb översikt över stegen vi kommer att gå igenom i den här handledningen:

Låt oss börja!

Steg 1: Installera WPForms-pluginet

WPForms är det bästa pluginet för kontaktformulär för WordPress. Det har AI-verktyg och mer än 2 000 mallar, som hjälper dig att skapa formulär med bara några få klick.

På WPBeginner använder vi WPForms för att skapa våra kontaktformulär, årliga användarundersökningar och migreringsförfrågningar, och vi kunde inte vara mer nöjda!

Lär dig gärna om alla dess funktioner i vår kompletta WPForms-recension.

Så, låt oss installera och aktivera WPForms-pluginet.

Du kan gå till Plugins » Lägg till plugin från din WordPress-instrumentpanel.

På nästa skärm kan du använda sökfältet för att hitta WPForms-pluginet.

När det är hittat kan du klicka på 'Installera plugin' och sedan 'Aktivera'.

För detaljerade instruktioner kan du läsa vår guide om hur man installerar ett WordPress-plugin.

Steg 2: Skapa ett nytt formulär med WPForms

Efter aktivering bör du se en WPForms-meny i ditt WordPress-adminområde som denna:

Nu kommer du att kunna komma åt WPForms-byggargränssnittet och skapa formulär med nedfällbara fält.

För att börja bygga ett nytt formulär kan du gå till WPForms » Lägg till nytt.

Nu ser du panelen 'Inställningar' i WPForms formulärbyggare.

I den här panelen är det första du behöver göra att namnge ditt formulär.

Till exempel kan du skriva ‘Enkelt kontaktformulär’ eller bara ‘Kontaktformulär’ i fältet ‘Namnge ditt formulär’.

När det är gjort är det dags att välja hur du ska bygga ditt WordPress-formulär.

Med WPForms kan du skapa från grunden, välja en färdig mall eller använda den AI-drivna formulärbyggaren.

Om du vill använda AI-formulärbyggaren behöver du bara ange en enkel uppmaning. AI:n kommer sedan att generera formuläret åt dig på några sekunder.

För den här guiden kommer vi dock att använda ‘Enkelt kontaktformulär’.

För att använda en formulärmall behöver du bara hovra över den du vill ha och klicka på ‘Använd mall’.

För steg-för-steg-instruktioner, se vår detaljerade guide om hur man skapar ett kontaktformulär i WordPress.

Steg 3: Lägga till rullgardinsfältet i ditt formulär

Efter att ha slutfört installationsprocessen kommer du att omdirigeras till formulärbyggaren, där det finns en lista med fält till vänster och en liveförhandsgranskning till höger.

Nu vill vi lägga till ett rullgardinsfält i vårt kontaktformulär.

Dra helt enkelt 'Rullgardinsmeny' och släpp den på höger sida av formuläret (Proffstips: om du bara har 2-3 val, överväg att använda Radio-knappar istället för en bättre användarupplevelse).

Till höger om panelen kommer du att se ett rullgardinsfält på ditt kontaktformulär. Du kan sväva över fältet för att komma åt dess inställningar, som inkluderar:

Till höger om panelen kommer du att kunna se ett rullgardinsfält i ditt kontaktformulär. När du klickar på fältet kan du komma åt dess inställningar. Du kan också sväva över det för att se alternativ som:

• En kopieringsknapp
• En borttagningsknapp
• En instruktion 'Klicka för att redigera'
• En instruktion ‘Dra för att ordna om’

Här är hur det kan se ut på din skärm:

Med dra-och-släpp-funktionen, låt oss flytta nedfällda fältet ovanför ‘Kommentar eller meddelande’.

Genom att ha fältet 'Kommentar eller meddelande' precis före skicka-knappen, erbjuder du ett bättre flöde för formulärslutförandet. Det gör också ditt rullgardinsfält mer synligt, så att användarna inte missar det.

Steg 4: Konfigurera rullgardinsmenyer med alternativ och villkorsstyrd logik

I det här steget ställer du in etiketten, alternativen och beskrivningen för ditt rullgardinsfält. Din lista med alternativ bör överensstämma med din formulärtyp. Eftersom vi skapar ett kontaktformulär, låt oss erbjuda ett alternativ för nyhetsbrevsabonnemang.

Klicka helt enkelt på rullgardinsfältet i förhandsgranskningspanelen. Detta öppnar automatiskt fliken 'Fältalternativ' till vänster.

På fliken 'Allmänt' fyller du i nödvändiga uppgifter:

• Etikett. För rullgardinsmenyer är etiketter vanligtvis frågor som ‘Vill du prenumerera på vårt nyhetsbrev?’ Vi rekommenderar också att lägga till platshållartext som ‘Välj ett alternativ,’ för att säkerställa att användarna väljer ett svar snarare än att av misstag skicka in standardvalet.
• Val. Låt oss lägga till 'Ja, tack.' och 'Nej, tack.'
• Beskrivning. Du kan lämna 'Du kan avregistrera dig när som helst.' i detta fält.
• Obligatoriskt. Aktivera detta alternativ för att kräva att besökare fyller i detta fält.

Låt oss sedan ställa in villkorlig logik.

Villkorlig logik låter dig visa eller dölja fält baserat på en användares tidigare svar. Detta håller dina formulär korta och snygga genom att bara visa fält när de är relevanta.

Att ställa in villkorlig logik gör formulär enklare att fylla i. Genom att bara visa relevanta alternativ baserat på tidigare val överväldigar formuläret inte användarna med onödiga val.

I det här exemplet ska vi visa ett ytterligare fält om användarna väljer alternativet 'Ja, tack'. Vi kommer att tillåta prenumeranterna att välja hur ofta de vill ta emot kampanjmejl.

För att villkorlig logik ska fungera behöver vi först fältet som kommer att visas eller försvinna baserat på användarens val. Gå tillbaka till fliken ‘Lägg till fält’ och klicka på ‘Rullgardinsmeny’ eller någon annan fälttyp. Fyll sedan i detaljerna för det nya fältet.

Här är ett exempel:

Nu när det nya fältet är klart, klicka på det och navigera till fliken 'Smart Logic'.

Härifrån kan du aktivera villkorlig logik genom att växla alternativet 'Aktivera villkorlig logik'.

När den är aktiverad kan du konfigurera villkorlig logik för ditt nya fält.

Börja med att välja att ‘Visa’ eller ‘Dölj’ det nya fältet. Välj sedan ett befintligt fält och en användarinmatning.

Här är vår konfiguration som referens: ‘Visa’ detta fält om ‘Vill du prenumerera på vårt nyhetsbrev?’ är ‘Ja, tack’.

Steg 5: Anpassa dina formulärmeddelanden och bekräftelser

Det är dags att anpassa ditt nya formulär.

Du kan börja med att ställa in e-postaviseringar varje gång en ny användare skickar in ett formulär. Gå till Inställningar » Aviseringar och aktivera alternativet 'Aktivera aviseringar'.

Gå sedan igenom ditt formulärs standardaviseringar nedanför växlingsknappen.

Vissa poster i fältet ‘Standardavisering’ har en ‘Smart Tag’, som automatiskt hämtar information från dina WordPress-inställningar eller själva formulärfälten. Med det sagt kan du justera inställningarna efter dina behov.

Till exempel har fältet 'Skickas till e-postadress' smart taggen {admin_email}. Som standard är detta din WordPress-webbplats administratörs e-postadress. Så alla formulärinlämningar kommer att gå till administratörens inkorg.

Du kan lägga till fler mottagare, som din e-postmarknadsföringsspecialist. Se bara till att separera varje e-postadress med ett kommatecken.

Om du vill lära dig hur du skickar ditt formulärs e-postmeddelande till flera personer eller olika avdelningar, läs vår guide om hur du skapar ett kontaktformulär med flera mottagare.

Därefter är standardtexten för din ‘Ämnesrad för e-post’ ‘Ny inlämning: Ditt formulärnamn’. Du kan dock ändra ämnesraden som du vill, så länge den är lätt att identifiera.

Användare som skickar in ett formulär bör få en avisering i sina e-postmeddelanden. Fältet 'Från namn' låter användare veta vem som skickar aviserings-e-postmeddelandet.

Nästa fält är 'Från e-post', och 'Smart Tag' för detta fält är {admin_email}.

Med denna standardinställning kommer användare att få aviserings-e-postmeddelanden från din webbplats administratörs-e-post.

Om du ser ett varningsmeddelande här, betyder det att din ‘Från-e-post’ inte matchar din webbplats domän (till exempel, du använder en @gmail.com-adress istället för @dindomän.com).

För att förhindra att dina aviseringsmeddelanden hamnar i ‘Skräppost’-mappen bör du se till att ‘Från-e-post’ matchar din webbplats domän.

Du kan läsa vår guide om att konfigurera WP Mail SMTP för att säkerställa att dina e-postmeddelanden hamnar i läsarnas inkorgar.

För varje skickat notifierings-e-postmeddelande har mottagaren också möjlighet att svara på det.

I fältet ‘Svara till’ kan du ställa in vart ditt svar kommer att gå om du svarar på aviseringsmeddelandet. Du bör vanligtvis ställa in detta till besökarens e-postadress.

Klicka helt enkelt på ‘Visa smarta taggar’ och välj fältet ‘E-post’ från ditt formulär.

Nu, när du får en inlämning och klickar på “Svara” i din e-postinkorg, kommer ditt meddelande att gå direkt till besökaren som fyllde i formuläret.

Slutligen har fältet 'E-postmeddelande' Smart Taggen {all_fields}. Så, ditt e-postmeddelande kommer att innehålla dina formulärfält tillsammans med användarens svar.

När du har anpassat dina aviseringar, navigera till ‘Bekräftelser’. Aviseringar är e-postmeddelanden som skickas efter att någon har skickat in formuläret, medan bekräftelser är de meddelanden på skärmen som användare ser direkt.

Först kan du välja 'Meddelanden', 'Visa sida' eller 'Gå till URL (Omdirigering)' som din bekräftelsetyp.

Om du väljer ‘Meddelande’ som din bekräftelsetyp, visas ett bekräftelsemeddelande för att informera användarna om att du har tagit emot deras formulärinlämningar.

Med denna bekräftelsetyp kan du redigera standardmeddelandet så att det passar ditt varumärke. Gå till fältet 'Bekräftelsemeddelande' och skriv ditt anpassade meddelande i textrutan.

Om du väljer 'Visa sida' måste du välja en befintlig sida på din WordPress-webbplats. Och om du väljer 'Gå till URL (Omdirigering)' infogar du en sid-URL.

Innan du går vidare till nästa steg, klicka på 'Spara' så att du inte förlorar dina framsteg.

Med det gjort är du redo att visa ditt nya formulär på din WordPress-webbplats.

Steg 6: Bädda in ditt kontaktformulär på en sida

För att visa ditt nya formulär på din WordPress-webbplats kan du använda 'Bädda in'-guiden i WPForms formulärbyggare.

Detta kommer att utlösa popup-fönstret 'Bädda in på en sida'. Där kan du välja 'Välj befintlig sida' eller 'Skapa ny sida', beroende på vad som är relevant för dig.

I det här exemplet väljer vi 'Välja befintlig sida'.

Nästa steg är att välja den sida där du vill visa ditt nya formulär.

Klicka helt enkelt på rullgardinsmenyn och välj en befintlig webbsida. När du har gjort det klickar du på ‘Låt oss köra!’.

Detta omdirigerar dig till WordPress blockredigerare.

Härifrån behöver du klicka på ‘+’-knappen för att lägga till ett WPForms-block.

Du kan skriva in ‘WPForms’ i sökfältet, och du bör se WPForms-blocket i sökresultaten. Klicka för att lägga till det.

Efter att ha lagt till WPForms-blocket ser du en rullgardinsmeny på din sida.

Klicka bara på nedfällda menyn och välj ett formulär från listan. Låt oss välja ‘Kontaktformulär’ eftersom det är formuläret vi precis skapade.

Steg 7: Publicera det nya formuläret på din WordPress-webbplats

I detta sista steg, låt oss förhandsgranska formuläret innan publicering för att säkerställa att allt ser perfekt ut. I WordPress innehållsredigerare, klicka på Visa » Förhandsgranska i ny flik.

Om du vill kan du också förhandsgranska hur formuläret ser ut på surfplattor och mobila enheter. Allt du behöver göra är att klicka på Visa » Surfplatta eller mobil » Förhandsgranska i ny flik.

Slutligen, om inga ytterligare justeringar behövs, kan du fortsätta och klicka på 'Uppdatera'.

Grattis! Du har framgångsrikt lagt till ditt nya kontaktformulär med rullgardinsfält på din WordPress-webbplats.

Så här såg det ut på vår demowebbplats:

Bonustips: Kreativa sätt att använda rullgardinsfält

Rullgardinsfält är otroligt mångsidiga och kan användas till mycket mer än bara enkla kontaktformulär.

Efter år av att bygga webbplatser har vi upptäckt några riktigt smarta sätt att använda rullgardinsmenyer som går utöver de vanliga kontaktformulären. Här är några av våra favorit kreativa användningsområden för att få inspiration:

• 🛍️ Produktkonfiguratorer – Detta låter användare anpassa produkter, som 'Välj din färg', 'Välj storlek' eller 'Välj en finish'. Detta är perfekt för WooCommerce produktsidor eller anpassade beställningsformulär.
• 📅 Tidsbokning – Småföretag eller tjänstewebbplatser kan dra nytta av kaskad rullgardinsmenyer för datum och tidsluckor. Detta är särskilt bra för bokningssystem eller konsultationsförfrågningar.
• 🗺️ Platsbaserade tjänster – Du kan lägga till rullgardinsmenyer för val av land, stat och stad medan du bäddar in kartor i dina formulär. Detta kan vara mycket användbart för leveranstjänster eller lokala företagsregister.
• ✏️ Quizformulär – Rullgardinsmenyer är också perfekta för flervalsfrågor. Om du driver en onlinekurs, kan du använda dessa fält för att hålla allt snyggt och organiserat!

Framför allt kan du alltid anpassa och styla dina WordPress-formulär ytterligare, så att de smälter in i din webbplatsdesign.

Vanliga frågor: Använda nedfällda fält i WordPress-formulär

Här är svar på några av de vanligaste frågorna om användning av rullgardinsfält i WordPress.

Vilket är det bästa pluginet för att skapa formulär med rullgardinsfält?

Vi rekommenderar WPForms som det bästa alternativet. Dess AI-verktyg snabbar upp processen, dra-och-släpp-byggaren är superenkel att använda, och rullgardinsfältet ingår även i den kostnadsfria WPForms Lite-versionen.

För avancerade funktioner som villkorlig logik är WPForms Pro-versionen en utmärkt uppgradering.

Kan jag lägga till rullgardinsfält i mina formulär gratis?

Ja! Den kostnadsfria WPForms Lite-pluginen inkluderar standard rullgardinsfält, vilket låter dig bygga organiserade och användarvänliga formulär utan att spendera ett öre.

Är rullgardinsfält mobilvänliga?

Absolut. När du använder ett kvalitetsplugin som WPForms är alla formulärfält helt responsiva. Det innebär att nedfällda menyer automatiskt anpassas för att se bra ut och fungera smidigt på stationära datorer, surfplattor och smartphones.

Ytterligare resurser: Bemästra dina WordPress-formulär

Vi hoppas att den här guiden har hjälpt dig att lära dig hur du skapar WordPress-formulär med rullgardinsfält. Om du tyckte att detta var användbart, här är några handplockade guider som hjälper dig att få ut mer av dem:

• Hur man anpassar och stylar dina WordPress-formulär
• Hur du använder ett kontaktformulär för att växa din e-postlista
• Hur man blockerar skräppost från kontaktformulär i WordPress 
• Hur man spårar och minskar formulärsavhopp i WordPress
• Ultimativ guide till att använda WordPress-formulär

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.