Hur man visar ditt formulär i en enda rad i WordPress (enkelt sätt)

Att visa ett formulär i en enda rad är ett utmärkt sätt att spara utrymme samtidigt som din webbplats får ett rent utseende.

Det fungerar särskilt bra i sidhuvuden, sidfötter eller sidofält, vilket gör att du kan placera formulär i områden med hög trafik och öka konverteringarna.

På WPBeginner har vi testat olika placeringar av kontaktformulär för att optimera vår process för att samla in leads. Genom denna erfarenhet har vi funnit att enkla formulär ofta leder till högre slutförandegrader.

I den här artikeln visar vi dig hur du enkelt kan visa ditt formulär i en enda rad i WordPress, steg för steg.

Varför visa formulär på en enda rad i WordPress?

Enradiga formulär ger dig mer flexibilitet när du väljer var du ska placera dina formulär. Eftersom denna formulärstil bara är en enda rad, tar de inte upp mycket utrymme och kan enkelt integreras med ditt befintliga innehåll på en WordPress-blogg.

Till exempel visas formulär för e-postprenumerationer ofta i en enda rad ovanför eller under innehållet i blogginlägget. Dessa typer av formulär fungerar också bra på landningssidor, kontaktsidor och andra viktiga sidor på din webbplats.

Förutom att generera fler prenumeranter och leads kan du omvandla vilken typ av formulär som helst till ett enradigt formulär.

Till exempel kan det vara vettigt att visa ditt kontaktformulär i en enda rad för att spara utrymme på WordPress-webbplatsen och göra ditt formulär mer mobilanpassat.

Med det sagt, låt oss visa dig hur du visar ett formulär på en enda rad på din WordPress-webbplats.

Hur man skapar ett formulär med en enda rad i WordPress

För den här handledningen kommer vi att använda WPForms-pluginet. Det har en dra-och-släpp-byggare som gör att du snabbt kan skapa alla WordPress-formulär. Dessutom integreras det med populära e-postmarknadsföringverktyg så att du enkelt kan växa din e-postlista.

På WPBeginner har vi använt detta verktyg för att skapa kontaktformulär och årliga undersökningar, och vi har sett fantastiska resultat. För mer information, se vår kompletta WPForms-recension.

Först måste du installera och aktivera pluginet WPForms. För mer information, se vår nybörjarguide om hur man installerar ett WordPress-plugin. 

Efter aktivering, besök sidan WPForms » Lägg till ny i din WordPress admin-sidomeny och ge ditt formulär ett namn. Sedan måste du välja din formulärmall.

Vi väljer mallen 'Opt-In Form'. Håll muspekaren över mallen och klicka på knappen 'Använd mall'.

Detta startar WPForms dra-och-släpp-formulärbyggare på skärmen.

Du kommer att se att mallen vi valde automatiskt inkluderar fälten för namn och e-post samt en knapp för att skicka.

Varje fält kan redigeras genom att klicka på dem och göra ändringar i kolumnen till vänster.

Du kan också dra och släppa fälten för att ändra deras ordning.

När du är klar med att anpassa fälten kan du visa ditt formulär i en enda rad.

För att göra detta, byt till fliken Inställningar » Allmänt i formulärbyggaren och klicka sedan på rullgardinsmenyn 'Avancerat'.

Skriv sedan 'inline-fields' i rutan 'Form CSS Class' (utan citattecken).

Detta kommer att tillämpa den CSS-klassen på formuläret. Eftersom WPForms inkluderar styling för klassen 'inline-fields', kommer det automatiskt att ändra hela ditt formulärs layout och visa det snyggt på en enda rad.

Därefter kan du göra ditt formulär ännu mindre genom att dölja fältetiketterna.

För att göra detta, klicka helt enkelt på ett fält i formuläret för att öppna dess inställningar i den vänstra kolumnen.

När du har gjort det, välj alternativet 'Avancerat' i menyn och klicka på växlingsknappen 'Dölj etikett' för att aktivera den.

Sedan behöver du göra samma sak för alla formulärfältsetiketter.

Därefter, i samma avsnitt "Avancerat", kan du ange text i rutan "Platshållare". 

Detta talar om för dina användare vad varje formulärfält är till för. 

När du är klar med att anpassa ditt formulär, se till att klicka på knappen 'Spara' för att lagra dina inställningar. 

Om du använder ditt formulär för att generera leads kan du ansluta ditt formulär till din e-postmarknadsföringstjänst. För mer information, se vår guide om hur man skapar ett e-postnyhetsbrev på rätt sätt. 

Lägga till ditt formulär i en enda rad på din WordPress-webbplats

Nu är det dags att lägga till ditt formulär i en enda rad på din WordPress-webbplats. Du kan lägga till det på vilken sida, inlägg eller widgetområde som helst.

Vi kommer att lägga till det på en befintlig sida, men processen kommer att vara liknande om du lägger till det på ett annat område på din WordPress-blogg.

Öppna helt enkelt sidan där du vill ha formuläret i en enda rad och klicka på knappen 'Lägg till block' (+) för att öppna blockmenyn.

Klicka sedan på blocket 'WPForms' för att lägga till det på din webbplats.

Välj sedan formuläret med en enda rad som du skapade tidigare från rullgardinsmenyn i själva blocket.

När du har valt ditt formulär kommer pluginet att ladda en förhandsgranskning av ditt formulär inuti innehållsredigeraren. Klicka sedan på knappen 'Uppdatera' eller 'Publicera' för att göra ditt nya formulär live.

Nu kan du besöka din webbplats för att se ditt nya formulär i aktion. 

Bonus: Använd OptinMonster för att bygga popup-fönster och banderoller

Förutom att skapa formulär med en enda rad kan du också bygga flytande kontaktformulär, opt-in popups och banners på din webbplats för att samla in e-postadresser.

För att göra detta kan du använda OptinMonster, som är det bästa verktyget för konverteringsoptimering för WordPress på marknaden.

Vi använder det konsekvent på WPBeginner för att bygga popup-fönster och banners som marknadsför våra pro-tjänster och nyhetsbrev, och vi älskar det. För att lära dig mer, se vår fullständiga OptinMonster-recension.

Verktyget låter dig skapa vackra optin-formulär som visar personlig och relevant information baserat på användarens intresse och gör det superenkelt att samla in leads.

För detaljerade instruktioner kan du titta på vår handledning om hur du skapar ett kontaktformulär som popup i WordPress.

Utöver det kan du också skapa attraktiva banners för din webbplats och be användare att registrera sig och bli en del av ditt nyhetsbrev.

På så sätt kan du samla in användardetaljer utan att ta upp mycket plats på webbplatsen eller irritera användarna.

För detaljer, se vår nybörjarguide om hur man bygger en e-postlista med OptinMonster.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du visar ditt formulär i en enda rad i WordPress. Du kanske också vill se vår guide om hur du skapar mer interaktiva formulär eller vårt expertval av bästa Typeform-alternativen.

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.