Så här visar du ditt formulär på en enda rad i WordPress (enkelt sätt)

Att skapa formulär som är både attraktiva och enkla att använda är avgörande för en bra användarupplevelse.

Att visa ett formulär på en enda rad kan vara särskilt effektivt för kompakta utrymmen, t.ex. sidhuvuden, sidfötter eller sidofält, så att din webbplats ser ren och professionell ut.

Det innebär att du enkelt kan lägga till formulär i högtrafikerade delar av din webbplats och förbättra konverteringen.

Under årens lopp har vi experimenterat med olika kontaktformulär för att finjustera vår lead capture-process. Denna praktiska erfarenhet har lärt oss att enkla fält med en rad kan leda till högre ifyllnadsgrad.

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

Varför ska formulär med en rad visas i WordPress?

Formulär med en enda rad ger dig större flexibilitet när du väljer var du vill placera dina formulär. Eftersom formuläret bara består av en rad tar det inte upp mycket plats och kan enkelt integreras med befintligt innehåll på en WordPress-blogg.

Registreringsformulär för nyhetsbrev via e-post visas till exempel ofta på en enskild rad ovanför eller under blogginläggets content. Den här typen av formulär fungerar också bra på landing pages, kontaktsidor och andra viktiga sidor på din website.

Förutom att generera fler prenumeranter och leads kan du förvandla alla typer av formulär till ett formulär med en rad.

Det kan t.ex. vara vettigt att visa kontaktformuläret på en enda rad för att spara utrymme på WordPress-webbplatsen och göra formuläret mer mobilanpassat.

Med detta sagt, låt oss visa dig hur du visar ett formulär med en rad på din WordPress site.

Så här skapar du ett formulär med en rad i WordPress

För denna tutorial kommer vi att använda WPForms tillägg för att skapa ett formulär med en rad eftersom det är ett av de bästa plugin-programmen för lead-generering för WordPress som används av över 6 miljoner webbplatser.

Du kan använda dra-och-släpp-byggaren för att snabbt skapa valfritt WordPress-formulär. Dessutom integreras det med populära verktyg för e-postmarknadsföring så att du enkelt kan utöka din e-postlista.

För mer information, se vår fullständiga WPForms recension.

Först måste du installera och aktivera WPForms plugin. För mer detaljer, se vår guide för nybörjare om hur du installerar ett plugin för WordPress.

Efter aktivering, besök WPForms ” Add New page i din WordPress admin sidebar och ge ditt formulär ett namn. Sedan måste du välja din template för formuläret.

Vi väljer templaten ”Opt-In Form”. Håll bara hovern över templaten och click knappen ”Use Template”.

Detta kommer att starta WPForms drag and drop form builder på vyn.

Du kommer att se att den template vi valde automatiskt innehåller fälten för namn och email samt en knapp för submit.

Varje fält kan redigeras genom att clicka på dem och göra ändringar i den vänstra colonnen.

Du kan också dra and drop-fälten för att ändra ordern på dem.

När du är klar med att customize fälten kan du visa ditt formulär på en enda rad.

För att göra detta, växla till Settings ” Allmänt tabs i form builder och klicka sedan på rullgardinsmenyn ”Avancerat”.

Skriv sedan ”inline-fields” i boxen ”Form CSS Class” (utan citationstecken).

Detta kommer att tillämpa den CSS-klassen på formuläret. Eftersom WPForms inkluderar styling för klassen ’inline-fields’ kommer den automatiskt att ändra hela din formulärlayout och visa den snyggt på en enda rad.

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

För att göra detta klickar du bara på ett fält i formuläret för att öppna dess inställningar i den vänstra colonnen.

När du har gjort det, välj alternativet ”Advanced” i menyn och klicka på ”Hide Label” toggle för att slå på den.

Sedan måste you göra samma sak för all etikettering av formulärfält.

Efter det, i samma ”Advanced” section, kan you enter text i ”Placeholder” boxen.

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

När du är klar med att customize ditt formulär, se till att klicka på knappen ”Save” 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 provider för email marketing. För mer details, se vår guide om hur du skapar ett nyhetsbrev via email på rätt sätt.

Lägga till ditt formulär med en rad på din website i WordPress

Nu är det dags att add to ditt formulär med en rad till din site i WordPress. You can add it to any page, post, or widgetar area.

Vi kommer att lägga till den på en befintlig page, men processen kommer att vara liknande om du lägger till den på ett annat area av din WordPress blogg.

Öppna bara upp sidan där du vill ha formuläret med en rad och klicka på knappen ”Add Block” (+) för att öppna blockmenyn.

Sedan klickar du på blocket ”WPForms” för att add to your site.

Välj sedan det enradiga formuläret som du skapade tidigare från dropdown-menyn i själva blocket.

När du har valt ditt formulär kommer pluginet att hämta en preview av ditt formulär i content editorn. Klicka sedan på knappen ”Update” eller ”Publicera” för att göra ditt nya formulär live.

Nu kan du besöka din website och se ditt new formulär i action.

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

Förutom att skapa formulär på en rad kan du också bygga flytande kontaktformulär, opt-in-popup-fönster och banners på din webbplats för att fånga e-postleads.

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

OptinMonster allow you to create beautiful optin forms that display personalized and relevant information based on your user’s interest and makes it super easy to capture leads.

Om du vill ha details kan du läsa vår tutorial om hur du skapar en popup med kontaktformulär i WordPress.

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

På så sätt kan du genomföra details om användarna utan att det tar upp mycket plats på din website eller irriterar användarna.

För detaljer, vänligen se vår guide för nybörjare om hur man bygger en email list med OptinMonster.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du visar ditt formulär på 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 de bästa Typeform-alternativen.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.