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 skapar onödig friktion i din konverteringsprocess.

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 rullgardinsmeny-val.

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

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

• Konsekvens. Den fasta uppsättningen alternativ håller insamlade data konsekventa och förhindrar ogiltiga inlägg. Detta gör dataanalysen mer exakt.
• Dynamiska fält. Rullgardinsfält gör det enklare att ställa in villkorsstyrd 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. Att kombinera flera alternativ i en kompakt rullgardinsmeny gör att ditt formulär ser mindre skrämmande ut. Detta kan resultera i en bättre användarupplevelse.

Med det sagt, låt oss titta på hur man skapar formulär med nedfällda fält i WordPress. Här är en snabb översikt över stegen vi kommer att gå igenom i den här handledningen:

• Steg 1: Installera det bästa pluginet för kontaktformulär
• Steg 2: Skapa ett nytt formulär med WPForms
• Steg 3: Lägga till rullgardinsfältet i ditt formulär
• Steg 4: Konfigurera rullgardinsmenyer med alternativ och villkorsstyrd logik
• Steg 5: Anpassa dina formulärmeddelanden och bekräftelser
• Steg 6: Bädda in ditt formulär i WordPress
• Steg 7: Publicera det nya formuläret på din WordPress-webbplats
• Bonustips: Kreativa sätt att använda rullgardinsfält
• Vanliga frågor: Använda nedfällda fält i WordPress-formulär
• Ytterligare resurser: Bemästra dina WordPress-formulär

Låt oss börja!

Steg 1: Installera pluginet Bästa kontaktformuläret

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 pluginet WPForms. Du kan gå till Plugins » Lägg till nytt plugin från din WordPress-instrumentpanel.

På nästa skärm kan du använda sökknappen för att hitta WPForms-pluginet. När det har hittats 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 prompt. AI:n genererar sedan 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.

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:

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

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ärfyllningsprocessen. 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 på ditt rullgardinsfält och gå sedan till 'Fältalternativ'.

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

• Etikett. I nedrullningsfält är etiketter vanligtvis frågor. Vi använder ‘Vill du prenumerera på vårt nyhetsbrev?’ som ett exempel.
• 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.

Villkorsstyrd logik innebär att fatta beslut med 'om' och 'då'-satser. När den används i formulär bestämmer den vad som händer härnäst baserat på det svar en användare ger.

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 ditt formulär inte användare 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.

Innan dess behöver du förbereda ett nytt fält. Gå tillbaka till fliken ‘Lägg till fält’ och klicka på ‘Nedrullningslista’ 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 'Smart Tag'. Denna tagg antar bland annat vart formulärinlämningsaviseringar ska skickas. Med det sagt kan du justera inställningarna baserat på dina behov.

Till exempel har fältet 'Skicka till e-postadress' Smart Taggen {admin_email}. Som standard är detta din WordPress-webbplats administratörs e-post. Så, alla formulärinlämningsaviseringar 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är 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.

Den markerade delen informerar dig om att din webbplats administratörs e-postadress finns på en annan domän, till exempel @gmail.com. Detta kan leda till problem med leveransbarheten, till exempel att e-postmeddelanden hamnar i skräppostmappen.

Du kan läsa vår guide om att ställa in 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 ange vilken e-postadress som ska ta emot användarsvar. Detta fälts ‘Smart tagg’ är {field_id= “1”}. Det betyder att användarnas svar kommer att skickas till samma e-postadress som den i fältet ‘Från e-post’.

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'. I det här avsnittet ställer du in hur du vill visa en bekräftelse efter att formuläret har skickats in.

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 (Omdirigera)', 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 formulär i WordPress

För att visa ditt nya formulär på din WordPress-webbplats kan du använda guiden 'Bädda in' 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 '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

Vet du vad som är fantastiskt med rullgardinsfält? De är mycket mer mångsidiga än de flesta tror!

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 kaskadrullgardinsmenyer 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, delstat 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 – Nedrullningslistor ä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 webbplats design.

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 villkorsstyrd 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 standardrullgardinsfältet, vilket låter dig bygga organiserade och användarvänliga formulär utan att spendera en krona.

Ä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.

Kan jag använda bilder som val i mina formulärfält?

WPForms Pro inkluderar en funktion för ‘Bildval‘ för radio-knappar och kryssrutor. Även om detta inte är tillgängligt för nedrullningslistor, låter det användare välja mellan visuella alternativ, perfekt för produktval och liknande formulär.

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 då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.