Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Hur man bäddar in formulär i WordPress (Ultimat przewodnik för nybörjare)

WordPress-formulär är viktiga för att få kontakt med besökare och öka din publik. Oavsett om du lägger till ett kontaktformulär, en enkät eller ett feedbackformulär är det ett snabbt och enkelt sätt att samla in information från besökare genom att bädda in det på din webbplats.

Vi använder formulär i alla våra projekt, från kontaktsidor till nyhetsbrevsprenumerationer och till och med kassaformulär. På vägen har vi lärt oss alla steg som behövs för att bädda in ett WordPress-formulär, och vi är här för att guida dig genom hela processen från början till slut.

I den här przewodniken visar vi dig hur du bäddar in formulär med hjälp av de mest populära WordPress-formulärbyggarna.

How to Embed Forms in WordPress

Vad är ett WordPress-formulär och varför är det importować?

Ett WordPress-formulär är ett verktyg för att samla in värdefull information och insikter på din webbplats. Det låter besökare mata in sina uppgifter, t.ex. namn, e-postadress och feedback.

Det finns många användningsområden för formulär. Du kan till exempel skapa ett kontaktformulär för att låta användare nå dig och bygga upp en lista mailingowa, en enkät för att samla in åsikter eller ett registreringsformulär för evenemang.

Du kan också använda formulär för att boka möten eller samla in donationer. En del företag använder också formulär för att hantera förfrågningar från obsługa kunder.

Utan formulär kan du missa chansen att interagera med besökare. Så att lägga till formulär på din WordPress-webbplats är ett smart drag för alla webbplatsägare.

Så här bäddar du in formulär i WordPress

I de följande avsnitten går vi igenom varje steg för att lägga till formulär på din WordPress-webbplats. Om du är intresserad av en viss formulärtyp kan du klicka på länken för att hoppa vidare i artikeln:

Är du redo? Låt oss komma igång.

1. Så här bäddar du in WPForms på din WordPress-webbplats

WPForms är den bästa mångsidiga formulärbyggaren på marknaden. Det är också en av de mest populära, med över 6 miljoner aktiva användare.

Med det här verktyget kan du använda någon av dess 2000+ färdiga, anpassningsbara mallar för att skapa vilket formulär du vill.

WPForms' homepage

Förutom kontaktformulär kan WPForms hjälpa dig att enkelt bygga enkla till mer avancerade formulär, t.ex:

När det gäller inbäddning av WPForms kan du antingen använda ett WPForms-block eller en krótki kod.

Så låt oss installera och aktivera WPForms och prova detta tillsammans. Om du behöver hjälp kan du läsa vår przewodnik om hur du installerar ett WordPress-plugin.

Följ sedan vår steg-för-steg-przewodnik för hur du skapar ett kontaktformulär i WordPress.

Bädda in WPForms-formulär med hjälp av WPForms-blocket

När formuläret är klart att publiceras klickar du bara på knappen ”Embed” i formulärbyggaren för att lägga till formuläret på din webbsida med hjälp av ett WPForms-block.

The Embed button in WPForms form builder

Då öppnas ett popup-fönster där du kan välja en befintlig sida eller skapa en ny sida för formuläret.

Om du klickar på knappen ”Välj befintlig sida” ser du en rullgardinsmeny med alla tillgängliga sidor på din webbplats. Och om du klickar på ”Skapa ny sida” ser du ett fält ”Namnge din sida” som du ska fylla i.

När du har valt en sida eller namngett din nya sida kan du klicka på knappen ”Let’s Go!”.

Embed contact form WPForms

Du kommer då att omdirigeras till sidans blockredigerare.

Härifrån kan du klicka på ”+”-knappen och söka efter WPForms-blocket.

Adding WPForms block

Nästa steg är att öppna rullgardinsmenyn i blocket WPForms och välja det formulär som du vill bädda in.

När du har valt ett formulär kommer WPForms att ladda det i blockredigeraren.

Efter det kanske du vill leka lite med ”Formulärinställningar” i den högra panelen.

Som standard laddar WPForms inte din formulärtitel. Så du kanske vill slå på alternativet ”Form Title” för att lägga till formulärets titel och ge besökarna mer sammanhang. Om du skriver en formulärbeskrivning kan du också slå på alternativet.

Ännu bättre är att du kan utforma formuläret med ett tema som matchar webbplatsens övergripande utseende och känsla.

WPForms form settings in block editor

När du är nöjd med hur formuläret ser ut kan du gå vidare och klicka på ”Spara”.

Och det är så du bäddar in WPForms med hjälp av ett WPForms-block.

WPForms embedded on a live website

Bädda in WPForms-formulär med hjälp av en krótki kod

Ett annat sätt att bädda in WPForms är genom att använda en krótki kod.

För att göra detta vill du gå över till WPForms ” Alla formulär för att hitta kolumnen ’Krótki kod’ för varje formulär.

The shortcode column in WPForms page

Härifrån kopierar du helt enkelt den krótki kod för formuläret som du vill bädda in. Vi kommer till exempel att kopiera krótki koden för vårt formulär ”Kundrecension”.

Nästa steg är att öppna den sida eller det inlägg där du vill bädda in formuläret. För att göra det, gå till ”Sidor” eller ”Inlägg”. Håll sedan muspekaren över en av dem och klicka på ”Redigera” när den visas.

Då kommer du till sidans eller inläggets redigerare.

För att bädda in formuläret klickar vi på ”+”-knappen och söker efter blocket ”Krótki kod”.

The shortcode block in block editor

När blocket har lagts till kan du klistra in ditt WPForms-formulärs krótki kod i textfältet.

Så här kan det se ut:

Adding WPForms shortcode

Blockredigeraren laddar inte formuläret i live-redigeringsområdet.

Så gå vidare och spara ändringarna först och klicka sedan på knappen ”Visa sida” när den visas i det nedre vänstra hörnet.

WPForms embedded using shortcode on a live website

2. Så här bäddar du in donationsformulär i WordPress

Genom att lägga till ett donationsformulär på din webbplats gör du det enkelt för människor att obsługa din sak. Besökare är mer benägna att donera när de ser ett tydligt och enkelt sätt att göra det på.

Det enklaste sättet att bädda in donationsformulär i WordPress är att använda Charitable-pluginet. Detta populära verktyg låter dig skapa och anpassa flera insamlingskampanjer med över 100 färdiga mallar.

Charitable's homepage

Låt oss nu installera och aktivera Charitable för att skapa ditt donationsformulär. Om du behöver hjälp kan du läsa vår przewodnik om hur du installerar ett WordPress-plugin.

Efter aktivering, låt oss gå över till Välgörenhet ” Inställningar för att aktivera Pro-licensen. Klistra bara in din klucz licencyjny och klicka på ”Verifiera nyckel” för att starta processen.

Adding the WP Charitable license key

När du har gjort det är du redo att skapa ditt donationsformulär. För detaljerade instruktioner kan du läsa vår przewodnik om hur du skapar ett återkommande donationsformulär i WordPress.

När du är nöjd med hur formuläret ser ut kan du bädda in det i ett WordPress-inlägg eller en WordPress-sida.

I kampanjbyggaren börjar du helt enkelt med att klicka på rullgardinsmenyn ”Utkast” för att öppna dess alternativ. Gå sedan vidare och klicka på ”Publicera”, så skapar Charitable automatiskt en ny sida för din kampanj.

Publishing a campaign in WP Charitable

Och det är allt – du har lyckats skapa och publicera din första Charitable-kampanj!

Om du nu besöker din webbplats kan du se ditt donationsformulär i działanie.

WP Charitable crowdfunding campaign on a live website

Som sagt, du kanske också lägger märke till länken ”Embed Wizard” i popup-fönstret eller knappen ”Embed” i Charitable-redigeraren.

Du kan också använda någon av dessa funktioner för att lägga till ditt donationsformulär i andra inlägg eller på andra sidor.

För att göra detta klickar du bara på länken ”Embed Wizard” eller på knappen ”Embed”, så aktiveras inbäddningsmeddelandet.

Charitable's embed wizard

I popup-fönstret som visas måste du välja mellan att välja en befintlig sida eller skapa en ny.

Eftersom vi redan har en särskild sida för donationsformulär är det en bra idé att välja ”Välj befintlig sida”. Gå vidare och klicka på knappen.

Select existing page for embedding Charitable campaign

Därefter visas en rullgardinsmeny med en lista över alla sidor på din WordPress-webbplats.

Du kan expandera rullgardinsmenyn, välja en sida och klicka på knappen ”Let’s Go”.

The Let's Go button

Du kommer då att omdirigeras till sidans blockredigerare.

Härifrån kan du klicka på ”+”-knappen och söka efter blocket ”Charitable Campaign”. Sedan klickar du bara på sökresultatet för att lägga till det i innehållsredigeraren.

Charitable Campaign block

Efter det kan du välja ett donationsformulär att bädda in från rullgardinsmenyn ”Charitable Campaign”.

Gå vidare och expandera rullgardinsmenyn. Sedan klickar du bara på den kampanj du vill lägga till.

Choosing a campaign

Oroa dig inte om du inte kan se förhandsgranskningen i innehållsredigeraren. Blocket fungerar alldeles utmärkt.

Nu klickar vi på knappen ”Spara”, ”Uppdatera” eller ”Publicera” för att göra det live.

Och nu är det klart! Du kan nu besöka sidan för att se donationsformuläret i działanie:

Charitable donation form on a live website

3. Hur man bäddar in HubSpot-formulär i WordPress

HubSpot är en bra plattform för att få ditt företag att växa, med verktyg som en CRM-plattform (Customer Relationship Management) där du kan hantera information om klienter, en webbplatsbyggare och mycket mer.

Den goda nyheten är att de också har en formulärbyggare som fungerar utmärkt med WordPress. När någon fyller i ett formulär går deras information direkt in i HubSpot CRM, så att du enkelt kan följa upp dem med e-post och meddelanden.

Du kan till och med ansluta HubSpot till andra formulärverktyg, inklusive WPForms. Detta gör plattformen riktigt praktisk eftersom den fungerar med många andra verktyg som du kanske redan använder.

I den här poradniken visar vi dig hur du bäddar in HubSpot-formulär med hjälp av pluginet HubSpot Form Builder och WPForms HubSpot Addon.

Bädda in HubSpot-formulär med hjälp av HubSpot-plugin

För att bädda in HubSpot Forms med hjälp av pluginet måste du först installera HubSpot-pluginet. Om du behöver hjälp kan du läsa vår przewodnik om hur du installerar ett WordPress-plugin.

När du har aktiverat HubSpot klickar du på menyn ”HubSpot” från din kokpit på WordPress. I den här panelen ser du flera sätt att ansluta din webbplats till HubSpot:

  • Om du har ett konto i HubSpot klickar du bara på ”Logga in”.
  • Om du inte gör det fortsätter du med ditt Google-, Microsoft- eller Apple-konto.
  • Om du vill kan du använda samma e-postadress som du använde för att registrera din webbplats.
Signing up for HubSpot in WordPress

När du har loggat in eller skapat ett HubSpot-konto kommer du att bli ombedd att ansluta det till din WordPress-webbplats.

Klicka bara på knappen ”Anslut webbplats” så startar HubSpot processen.

Connecting HubSpot with WordPress website

När du är ansluten är du redo att skapa ditt HubSpot-formulär med hjälp av HubSpot-pluginet.

Gå vidare och navigera till HubSpot ” Formulär. Sedan kan du klicka på knappen ”Skapa formulär”.

Creating HubSpot forms

Härifrån kan du välja en formulärstyp och mall. Sedan kommer du att omdirigeras till en ny karta där du kan använda formulärbyggaren för att anpassa ditt HubSpot-formulär.

För detaljerade instruktioner kan du se den första metoden i vår przewodnik om hur du skapar ett HubSpot-formulär i WordPress.

När du är nöjd med hur ditt formulär ser ut är nästa steg att bädda in det på din webbplats. Naturligtvis vill du använda knappen ”Bädda in” i formulärbyggaren.

Embed button in HubSpot's form builder

Den här metoden är dock lite förvirrande.

Det låter dig bara dela formulärlänken och använda ett HTML-fragment kodu på ditt WordPress-inlägg eller sida.

Embed methods in HubSpot form builder

Istället kan du klicka på knappen ”Tillbaka till WordPress” och bädda in dina formulär från HubSpots kokpit i ditt obszara administracyjny.

Gå vidare och klicka på knappen i det övre vänstra hörnet.

Back to WordPress button in HubSpot form builder

Härifrån behöver du bara hålla muspekaren över det formulär du vill bädda in.

Därefter klickar du bara på knappen ”Embed” när den visas.

HubSpot embed button in the WP admin area

Du kommer då att se ett popup-fönster där HubSpot delar med sig av flera sätt att bädda in ditt formulär.

Här kan du välja att bädda in ditt HubSpot-formulär i ett inlägg eller en sida med hjälp av HubSpot-blocket. Och om du byter till den andra kartan hittar du formulärets krótki kod.

I den här poradniken klickar vi på knappen ”WordPress Post”.

HubSpot's Your Form Is Ready popup window

Detta öppnar sidan ”Inlägg” på en ny karta. Gå vidare och öppna ett inlägg för att bädda in formuläret i genom att hålla muspekaren över ett inlägg och klicka på ”Redigera” när det visas.

Du kommer sedan att kunna lägga till HubSpot Form-blocket på sidan via innehållsredigeraren.

Härifrån kan du klicka på ”+” -knappen och använda sökfältet för att leta efter HubSpot Form-blocket. Klicka på det när du ser det.

Adding a HubSpot form block to a post

Detta kommer att lägga till HubSpot Form-blocket i innehållsområdet.

Nästa gång klickar vi på rullgardinsmenyn för att öppna de tillgängliga alternativen. Sedan kan du välja det HubSpot-formulär du vill bädda in.

HubSpot form embedded

Och så är det klart! Du kan nu klicka på knappen ”Spara” för att spara dina ändringar.

Så här ser det ut på vår demosajt:

HubSpot form on a live website

Bädda in HubSpot-formulär med hjälp av WPForms HubSpot Addon

Att använda WPForms för att skapa ett HubSpot-formulär är ett enklare och mer effektivt sätt att hantera formulär och kontakter utan att behöva jonglera med flera plugins.

WPForms hanterar både skapandet av formulär och integrationen med HubSpot på ett och samma ställe. Detta förenklar processen eftersom det ger dig tillgång till WPForms dra-och-släpp-byggare och mallar samtidigt som du synkroniserar dina formulärdata med HubSpot automatiskt.

Obs: För att använda HubSpot Addon i WPForms behöver du Elite-planen. Förutom HubSpot-tillägget och allt i Pro-planen kan du använda pluginet för obegränsat WordPress-webbplatser och låsa upp premiumsupport. Detta gör det perfekt om du driver en marknadsföringsbyrå.

Det första du behöver göra är att installera och aktivera WPForms plugin. Kolla in vår detaljerade przewodnik om hur du installerar ett WordPress-plugin.

Vid aktivering måste du verifiera din klucz licencyjny i WPForms ” Inställningar.

Du hittar din klucz licencyjny i ditt WPForms-konto. Klicka bara på ikonen för urklipp för att kopiera den. Sedan kan du gå tillbaka till din WordPress karta och fylla i fältet ”Klucz licencyjny”.

Gå vidare och klicka på knappen ”Verify Key” för att aktivera ditt abonnemang.

Activating license key to WPForms

Låt oss nu gå till WPForms ” Addons från admin kokpit för att installera HubSpot Addon.

Härifrån rullar du ner och letar efter HubSpot-tillägget. Gå sedan vidare och klicka på knappen ”Installera Addon”.

Installing the HubSpot Addon in WPForms

När du har aktiverat tillägget bör du gå till WPForms ”Inställningar” -panel från WordPress kokpit och sedan byta till kartan ”Integration”.

Här kan du ansluta ditt HubSpot CRM-konto till WPForms. Klicka bara på ”+ Lägg till nytt konto” och ange dina kontouppgifter.

Adding HubSpott account to WPForms

När du har gjort det är det dags att skapa och bädda in ett HubSpot-formulär från WPForms.

Först måste du skapa ditt formulär genom att navigera till WPForms ” Add New. På nästa skärm ska du namnge formuläret och välja en formulärmall.

Efter det kan du anpassa mallen med hjälp av formulärbyggaren.

Om allt redan ser bra ut kan du gärna byta till panelen ”Marknadsföring”. Härifrån, låt oss öppna alternativet ”HubSpot” för att ansluta formuläret till plattformen.

Adding new HubSpot connection in WPForms

Gå vidare och ange dina HubSpot-kontouppgifter och följ installationsanvisningarna.

När du är klar kan du publicera formuläret med hjälp av WPForms-blocket eller formulärets krótki kod. För mer information kan du kolla in vår przewodnik om hur du skapar ett HubSpot-formulär i Wordpress.

4. Så här bäddar du in Google Formulär i WordPress

WPForms och andra WordPress-formulärbyggare är verkligen enkla att använda. De fungerar direkt på din WordPress-webbplats och låter dig göra massor av saker som att bygga formulär som accepterar betalningar, skapa inloggningsformulär, skapa anpassade användarregistreringsformulär och mycket mer.

Men ibland kan du behöva dela ett formulär på olika webbplatser eller plattformar.

I sådana fall kan Google Formulär vara superhändiga. De är lätta att dela, fungerar utmärkt på mobiltelefoner och håller alla svar på ett ställe. Dessutom kan du lägga till medarbetare som kan hjälpa dig med svaren, som alla lagras i Google Drive.

För att bädda in ett Google-formulär i WordPress kan du börja med att skapa ett formulär på Google Forms webbplats. Klicka bara på knappen ”Gå till formulär”.

The Go to Forms button in Google Forms

På nästa skärm ser du olika formulärmallar. Gå vidare och klicka på en av dem för att börja bygga.

Du kan också börja om från början genom att klicka på ”Blankett”.

Google Forms' templates

När du har valt en mall kan du börja anpassa formuläret. Här är några saker som du kan behöva göra:

  • Skapa formulärets titel.
  • Ange en beskrivning av formuläret.
  • Anpassa fälten så att de matchar dina mål.
Adding fields to Google Forms

Du kan också använda AI-verktyg för att välja de lämpligaste fälten för dina frågor.

När du är nöjd med hur formuläret ser ut kan du klicka på knappen ”Skicka”. Då öppnas ett popup-fönster där du kan hämta formulärets inbäddningskod.

Copying Google Forms' embed code

När du har kopierat denna kod kan du öppna en sida eller ett inlägg i WordPress där du vill visa formuläret.

I sidans eller inläggets innehållsredigerare klickar vi på ”+”-knappen och söker efter blocket ”Anpassad HTML”. Gå vidare och klicka på det för att lägga till det på din sida.

Adding custom HTML block in WordPress

Sedan klistrar du bara in Google Forms inbäddningskod i det anpassade HTML-blocket.

När du är klar, glöm inte att klicka på knappen ”Uppdatera” eller ”Publicera”. Om du nu besöker din webbplats bör du se Google-formuläret i działanie.

Google Form preview on a live WordPress site

För mer detaljerade steg-för-steg-instruktioner kan du läsa vår przewodnik om hur du bäddar in ett Google-formulär i WordPress.

5. Så här bäddar du in Zoho Forms i WordPress

Zoho Forms är ett fantastiskt verktyg som låter dig enkelt skapa alla typer av formulär. Oavsett om du behöver ett kontaktformulär, en enkät, ett registreringsformulär eller ett beställningsformulär, har Zoho Forms allt du behöver.

Dessutom är det enkelt att bädda in ett Zoho-formulär på din WordPress-webbplats. Men innan vi kommer till den här delen, låt oss först skapa formuläret.

För att komma igång måste du skapa ett konto på Zoho Forms webbplats. Klicka bara på ”Registrera dig gratis”.

Zoho Forms' homepage

När du har skapat ett konto kan du börja skapa ditt formulär.

Först måste du klicka på knappen ”Nytt formulär” i formulärbyggaren.

The New Form button in Zoho Forms

Du kommer då att se att Zoho Forms erbjuder 3 sätt att skapa formulär:

  • Skapa formulär från grunden med hjälp av standard- eller kortformulärstyp.
  • Använd färdiga formulärmallar.
  • Skapa CRM-formulär, vilket är en funktion som bara är tillgänglig om du uppgraderar till Pro-planen.
Three ways to create Zoho Forms

I den här przewodniken väljer vi mallen ”Website Feedback”.

Så låt oss klicka på knappen ”Använd den här mallen”.

Zoho Forms' Use this template button

När du har gjort det kommer du till Zoho Forms formulärbyggare.

Den vänstra panelen har alla anpassningsalternativ och förhandsgranskningen av formuläret finns till höger. Du kan lägga till element i formuläret genom att helt enkelt dra och släppa dem.

Med Zoho Forms kan du också ändra formulärets tema så att det matchar din webbplats tema.

För att göra detta kan du gå till kartan ”Teman”. Sedan är det bara att hålla muspekaren över det tema du vill använda och klicka på ”Apply”.

Applying Zoho Forms theme

Om allt redan ser bra ut kan du byta till kartan ”Dela”.

På den här kartan kan du se att Zoho Forms har många alternativ för inbäddning av formulär.

Eftersom vi kommer att bädda in den på en WordPress-webbplats, låt oss gå över till Bädda in ” Website Builders. Gå sedan vidare och klicka på knappen ”Gå till WordPress”.

The Go to WordPress button in Zoho Forms

Du kommer då att omdirigeras till Zoho Forms-sidan i WordPress plugin-katalog.

Allt du behöver göra är att installera insticksprogrammet. Om du behöver hjälp kan du läsa vår przewodnik om hur du installerar ett WordPress-plugin.

Efter aktivering kan du öppna ett inlägg eller en sida där du vill bädda in Zoho Forms. Härifrån klickar du sedan på ”+”-knappen och väljer Zoho Forms-blocket.

Adding the Zoho Forms block to WP content editor

När blocket har lagts till kan du klicka på knappen ”Access Zoho Forms”.

Det finns också länken ”Bädda in med permalänk”, men vi rekommenderar inte den här metoden eftersom den inte är lika nybörjarvänlig.

The Access Zoho Forms button in Zoho Forms block

Därefter uppmanas du att välja den domän där du registrerade ditt Zoho-konto.

I det här fallet väljer vi"zoho.com” i rullgardinsmenyn och klickar på ”Connect”.

Connecting Zoho account

Därefter kan du välja det formulär som du vill bädda in.

Klicka bara på rullgardinsmenyn och välj ett av de tillgängliga alternativen. Sedan ska du rulla ner och klicka på knappen ”Bädda in”.

Embedding the Website Feedback form

Din innehållsredigerare kommer sedan att ladda ditt Zoho-formulär.

Om du gillar vad du ser kan du klicka på knappen ”Spara”.

Saving the post with Zoho Forms

Om du nu besöker sidan kommer du att se ditt Zoho-formulär i działanie.

Så här kan det se ut:

Zoho Forms on a live website

Från bilden ovan kan du också se att Zoho Forms tema gör det lättare att matcha formuläret med din webbplatsdesign.

6. Så här bäddar du in formulär för e-postregistrering i WordPress

OptinMonster, även om det inte är en typisk formulärbyggare, är ett utmärkt verktyg för att skapa användarregistreringsformulär och bygga en lista mailingowa.

På WPBeginner har vi sett utmärkta resultat med hjälp av detta leadgenereringsverktyg. Till exempel, med OptinMonster ökade vi våra e-postprenumeranter med 600%.

När du ställer in e-postregistreringsformulär kan du använda olika kampanjtyper, till exempel slide-ins och popup-fönster med okno) lightbox. Så innan vi pratar om att bädda in OptinMonster-e-postregistreringsformuläret, låt oss se till att formuläret är klart.

Först måste du skapa ett OptinMonster-konto på deras webbplats genom att klicka på knappen ”Få OptinMonster nu”.

OptinMonster's homepage

Du kommer då till prissättningssidan.

Vi rekommenderar Pro-planen eftersom den är populär och inkluderar funktionen ”Exit Intent”. Du kan också använda vår exklusiva WPBeginner OptinMonster kupongkod för att få 10% rabatt.

För att slutföra ditt köp anger du bara dina betalningsuppgifter och fortsätter med betalningen.

Med det gjort, låt oss installera och aktivera OptinMonster WordPress plugin. Om du behöver hjälp kan du läsa vår steg-för-steg przewodnik om hur du installerar ett WordPress-plugin.

Detta plugin kommer att ansluta din WordPress-webbplats till OptinMonster. Navigera bara till OptinMonster ” Inställningar från din WordPress-adminpanel. Gå sedan vidare och klicka på ”Anslut ditt befintliga konto”.

Connect your existing account

När du är ansluten är du redo att skapa ditt OptinMonster-registreringsformulär för e-post. För detaljerade instruktioner kan du läsa vår przewodnik om hur du bygger din lista mailingowa i WordPress med OptinMonster.

OptinMonsters detaljerade visningsregler gör att du kan visa rätt kampanj till rätt person vid rätt tidpunkt, vilket bidrar till att öka konverteringsgraden. Du hittar dessa inställningar genom att gå till Visningsregler i kampanjbyggaren.

The Display Rules tab in OptinMonster

Här kan du styra när och var dina kampanjer visas baserat på kundernas beteende.

Du kan också anpassa kampanjer för olika målgrupper, till exempel genom att visa olika layouter för mobila och stationära användare.

Adding display rules to a marketing or advertising campaign

OptinMonster låter dig ställa in regler baserat på specifika dagar eller platser, så att du kan köra riktade kampanjer som Black Friday-erbjudanden eller popup-fönster med semestertema för olika länder.

Dessutom hjälper OptinMonsters exit-intent-teknik att återhämta besökare som håller på att lämna din webbplats. Den här funktionen spårar användarnas beteende och utlöser ett riktat meddelande precis innan de lämnar, så att du kan fånga fler e-postprenumeranter och öka konverteringarna.

Exit intent display rules

När du är nöjd med allt är det dags att bädda in formuläret för leadgenerering på din webbplats.

Klicka bara på ”Spara”-knappen från byggaren för att starta processen.

OptinMonster's Save button

När du har kontrollerat att du har sparat dina ändringar kan du gå till kartan ”Publicera”.

Gå vidare och ändra status från ”Utkast” till ”Publicera”. Du kommer då att se att kartan ”Publicera” har ändrats till ”Publicerad” och att pausikonen har ändrats till en bock.

Publishing OptinMonster popup

Du kan nu stänga kampanjredigeraren och navigera till OptinMonster ” Kampanjer.

Nästa steg är att ändra statusen ”Pending” till ”Publish” för din pop-up för e-postregistrering. Klicka bara på länken ”Pending” för att öppna rullgardinsmenyn och välj alternativet ”Publish”.

Changing OptinMonster campaign's status

Där har du det!

Om du nu besöker din webbplats kommer du att se popup-fönstret för e-postregistrering i działanie.

OptinMonsters' email sign up on a live website

7. Så här bäddar du in betalningsformulär i WordPress

Om du bara vill sälja en enda produkt eller inte vill ställa in en fullständig kundvagn, kan det vara överdrivet att använda omfattande e-handelsplugins som Easy Digital Downloads eller WooCommerce. Att skapa ett enkelt betalningsformulär är ofta ett bättre alternativ för att acceptera anpassade belopp eller sälja ett fåtal artiklar.

Det är här WP Simple Pay kan hjälpa till.

WP Simple Pay

WP Simple Pay är det bästa valet för att acceptera Stripe-betalningar utan att kräva ett komplett plugin för e-handel.

Det gör det också möjligt för dig att acceptera andra betalningsmetoder, till exempel kreditkortsbetalningar, Apple Pay, Google Pay och mer. Det är perfekt för ideella organisationer, småföretag och volontärer som behöver en enkel lösning för att samla in betalningar.

För att bädda in ett betalningsformulär måste du först installera insticksprogrammet WP Simple Pay. Om du behöver hjälp kan du läsa vår steg-för-steg przewodnik om hur du installerar ett WordPress-plugin.

Vid aktivering följer du bara installationsguiden för att ansluta till Stripe.

Connecting your WordPress website to Stripe

När du är ansluten är du redo att skapa ditt betalningsformulär med WP Simple Pay.

För detaljerade instruktioner kan du följa den första metoden i vår przewodnik om hur du skapar ett WordPress-formulär med betalningsalternativ.

När du är nöjd med ditt betalningsformulär går du vidare och klickar på knappen ”Publicera”. Sedan kan du kopiera formulärets krótki kod för att bädda in det i ditt inlägg eller på din sida.

WP Simple Pay's shortcode

I WordPress innehållsredigerare behöver du bara klicka på ”+”-knappen och välja blocket ”Krótki kod”.

Därefter kan du klistra in formulärets krótki kod i textområdet.

Adding a shortcode block in Gutenberg

Observera att WP Simple Pay skapar ditt betalningsformulär i testläge som standard. Det innebär att du inte kan ta emot betalningar från besökare ännu.

För att poprawka detta, låt oss navigera till WP Simple Pay ” Betalningsformulär i WordPress kokpit. Sedan kan du hålla muspekaren över det formulär du just skapat och klicka på ”Redigera” när det visas.

Editing WP Simple Pay form

I den här panelen vill du gå till avsnittet ”Betalningar”.

Slutligen kan du klicka på alternativknappen ”Live Mode” och sedan på ”Update”.

Setting WP Simple Pay form to live mode

Och det är så du bäddar in ett WP Simple Pay-formulär och börjar ta emot betalningar från din publik.

Så här ser det ut på vår demosajt:

Buy Me a Coffee WP Simple Pay button on a live website

8. Så här bäddar du in Formidable-formulär i WordPress

Formidable Forms är ett utmärkt verktyg för att skapa avancerade formulär, t.ex. en kalkylator för bolån, bilbetalning eller livförsäkring. Det innehåller över 225 formulärmallar som du kan använda för din WordPress-webbplats.

För detaljer om hur man gör ett formulär med Formidable Forms kan du se vår fullständiga Formidable Forms-recension.

Formidable Forms gör det superenkelt att placera dina formulär på valfri sida eller inlägg. När du är klar med att skapa ditt formulär kan du klicka på knappen ”Bädda in” i formulärbyggaren.

Formidable Forms' Embed button

Då öppnas ett popup-fönster där du kan välja var formuläret ska läggas till. Det finns 3 alternativ: ”Välj befintlig sida”, ”Skapa ny sida” och ”Wstawić manuellt”.

Om du väljer alternativet ”Wstawić manuellt” kommer du att behöva hantera en del kod. Detta kan vara lite skrämmande för nybörjare, så vi rekommenderar inte det.

I den här poradniken väljer vi ”Välj befintlig sida”.

Formidable Forms' Embed form options

Därefter visas en annan popup-fråga.

Här vill du öppna rullgardinsmenyn och välja en sida. Vi har till exempel valt att bädda in formuläret på vår demosajts ”Hem”-sida.

Choosing a page to embed Formidable Forms

När du har valt sida går du vidare och klickar på knappen ”Wstawić form”.

Detta öppnar sidans blockredigerare och du bör se att formuläret redan är inbäddat på sidan.

Formidable Forms embedded in the block editor

Nu är du redo att uppdatera sidan.

Gå vidare och tryck på knappen ”Spara”.

Så här ser det ut på vår demosajt:

Formidable Forms on a live website

9. Så här bäddar du in Gravity-formulär i WordPress

Gravity Forms är ett kraftfullt plugin för formulärbyggare för WordPress, men här är haken – det är endast premium.

Denna formulärbyggare har ett brett utbud av funktioner och anpassningsalternativ. Det låter dig skapa många typer av formulär, till exempel enkäter, frågesporter, registreringar och beställningsformulär.

Om du vill skapa ett formulär med Gravity Forms måste du köpa insticksprogrammet från Gravity Forms webbplats.

Gravity Forms homepage

Sedan kan du installera och aktivera det på din webbplats. Om du behöver hjälp kan du läsa vår przewodnik om hur du installerar ett WordPress-plugin.

Efter aktivering ska du navigera till Gravity Forms ” Nytt formulär i din kokpit i WordPress och klicka på ”Lägg till nytt”.

Creating a new form with Gravity Forms

På nästa skärm väljer du en formulärmall.

Det är ingen brådska – du kan utforska det här popup-fönstret för att hitta den mall du vill använda. När du har hittat den håller du bara muspekaren över mallen och klickar på knappen ”Använd mall”.

The Use Template button in Gravity Forms

Därefter uppmanas du att namnge formuläret och skriva en kort beskrivning av formuläret.

Du kan använda följande bild som exempel:

Form name and description examples

Gå vidare och klicka på ”Använd mall” igen för att börja bygga formuläret.

Detta öppnar Gravity Forms dra-och-släpp-byggare, där du kan anpassa ditt formulär med hjälp av fälten till höger.

Gravity Forms' form builder

När formuläret är klart kan du klicka på knappen ”Spara formulär” för att kontrollera att du har sparat alla ändringar.

Gå sedan vidare och klicka på ”Bädda in”.

Detta öppnar 3 alternativ för att bädda in ditt Gravity Forms-formulär – på en befintlig sida, en ny sida eller en metod med krótki kod för personer som använder den klassiska redigeraren.

Embedding Gravity Forms

I den här poradniken visar vi dig hur du bäddar in Gravity Forms på en befintlig webbsida.

Härifrån väljer vi alternativknappen ”Post”. Sedan kan du öppna rullgardinsmenyn för att välja ett publicerat inlägg på din WordPress-webbplats.

Embedding Gravity Forms into an existing post

Gå vidare och klicka på knappen ”Wstawić Form”.

Du kommer då att omdirigeras till sidans innehållsredigerare, där du uppmanas att lägga till blocket ”Form”. Gå vidare och klicka på det.

The Gravity Forms block to add to content editor

Gravity Forms kommer sedan att lägga till det formulär du just skapade i inlägget.

Du kanske också märker att ”Formulärets titel” och ”Formulärets beskrivning” ingår som standard.

Gravity Forms includes title and descriptions by default

Om du tror att allt är klart är det dags att trycka på ”Spara”-knappen.

Och det är allt – du har skapat och bäddat in ett Gravity Forms-formulär på din webbplats.

Gravity Forms on a live website

10. Så här bäddar du in Microsoft-formulär i WordPress

Vissa människor kanske vill använda Microsoft Forms för att skapa formulär eftersom det är ett verktyg som de redan känner till tack vare sitt Office 365-konto. Det integreras också automatiskt med andra Microsoft-produkter som Excel, vilket gör datainsamling och hantering enklare.

Microsoft Forms erbjuder inbyggda alternativ för att skapa enkäter, frågesporter och omröstningar. Du kan sedan enkelt bädda in Microsoft 365-formulär i WordPress genom att kopiera formulärets inbäddningskod och lägga till den på din WordPress-webbplats.

Först skapar du ditt formulär med hjälp av Microsoft Forms i ditt Office 365-konto.

Från Office 365-hemsidan klickar vi på ”Logga in” för att komma igång.

Signing in to Ms 365

När du har loggat in kan du klicka på menyikonen längst upp till vänster på sidan.

Sedan ska du leta upp ”Forms” och klicka på det.

Ms Forms

Detta öppnar mallgalleriet i en ny karta. Du kan sedan välja de formulär som du vill bygga.

Microsoft Forms har 4 formulär att välja mellan – enkät, frågesport, inbjudan och registrering. För den här poradniken väljer vi alternativet ”Inbjudan”. Låt oss klicka på det.

Choosing form type

Microsoft Forms-redigeraren öppnas i en ny karta. Härifrån är det första du ska göra att välja en mall.

Du kan utforska mallalternativen i den vänstra panelen. Eftersom vi skapar ett inbjudningsformulär har vi 7 färdiga mallar för olika ändamål.

I den här poradniken använder vi mallen för bröllopsinbjudan. Så här ser standardmallen ut i redigeraren:

Wedding invitation form

Om du bläddrar ner i den högra panelen hittar du de standardfält som den här mallen erbjuder.

Den här mallen har 4 förinställda fält för användarnas namn, antal gäster, matallergier och e-postadresser.

Låt oss säga att du vill lägga till fler frågor. I så fall kan du klicka på knappen ”+ Wstawić ny fråga” och välja frågetyp, till exempel ”Datum”, ”Betyg”, ”Text” eller andra.

Om du vill redigera de befintliga klickar du bara på en, så visas anpassningsalternativen.

Editing a field

Om du vill ändra utseendet kan du klicka på palettikonen.

Härifrån kan du ändra formulärets layout och bakgrundsbild.

Styling wedding invitation form

Du kan sedan växla till kartan med inställningar genom att klicka på kugghjulsikonen.

Microsoft Forms har redan konfigurerat vissa grundläggande inställningar.

Men du kanske vill aktivera ”Slutdatum” för att hjälpa dig att strategiskt planera din bröllopsdag baserat på svar och ”Få e-postmeddelande om varje svar” så att du har säkerhetskopieringsdata för att förhindra att svaret går förlorat.

Om du vill kan du också redigera det förinställda bekräftelsemeddelandet.

Configuring wedding invitation form

När formuläret är klart är det dags att starta det.

I formulärbyggaren klickar vi på knappen ”Samla in svar”.

Collect responses button

I popup-fönstret som visas kan du klicka på ikonen ”</>” eller ”embed”.

Du bör nu se den krótki kod som du lägger till på din webbplats. Gå vidare och klicka på ”Kopiera”.

Copying MS Forms shortcode

Nu kan du klistra in den här koden i ett inlägg eller på en sida med hjälp av blocket ”Anpassad HTML”.

I WordPress innehållsredigerare klickar du helt enkelt på ”+”-knappen för att lägga till blocket. Sedan kan du använda sökfältet för att leta efter blocket ”Anpassad HTML”.

Gå vidare och klicka på det för att lägga till blocket i innehållsredigeraren.

Adding custom HTML block

Härifrån går du vidare och klistrar in Microsoft Forms ’krótki kod till textområdet.

Oroa dig inte om du inte ser någon förhandsgranskning i din editor; krótki koden fungerar alldeles utmärkt.

Embedding Ms Forms shortcode

Nu kan du trycka på knappen ”Publicera” eller ”Uppdatera” för att göra det live.

Så här ser det ut på vår demosajt:

Microsoft Forms on a live website

11. Så här bäddar du in HTML-formulär i WordPress

HTML-formulär är vanligtvis handkodade, så du har inte en dra-och-släpp-redigerare för att redigera ditt formulär.

Lyckligtvis finns det formulärplugins som gör det lättare att ställa in HTML-formulär. Ett av de bästa alternativen är HTML Forms-pluginet. Detta plugin är utmärkt för att ställa in enkla kontaktformulär som hjälper dig att samla in information från besökare.

The form code editor in HTML Forms

Det bästa är att du inte behöver veta hur man kodar för att använda HTML Forms.

Det är enkelt att lägga till ett nytt fält. Välj bara ett av de tillgängliga alternativen, så kommer HTML Forms att be dig att justera fältets data.

Adding a dropdown field in HTML Forms

När du har klickat på knappen ”Lägg till fält i formuläret” konverterar HTML Forms data till ett HTML-fragment kodu och placerar det i området ”Formulärkod”.

Och det är allt som behövs! Glöm inte att klicka på knappen ”Spara ändringar” för att spara dina framsteg.

Nu är det dags att publicera formuläret.

Med HTML-formulär kan du enkelt bädda in ditt formulär i ett inlägg, en sida eller ett widgetområde. För att göra detta behöver du formulärets krótki kod. Du hittar formulärets krótki kod längst upp i panelen ”Redigera formulär”.

HTML Forms' shortcode

Låt oss kopiera den här krótki koden till urklippet.

Du kan sedan öppna en sida eller ett inlägg där du vill visa HTML-formuläret. I den här poradniken lägger vi till formuläret på vår sida ”Kontakt”.

När du är i blockredigeraren klickar du bara på ”+” -knappen och söker sedan efter ”Anpassad HTML.” Gå vidare och klicka på den för att lägga till den på din sida.

The custom HTML block

Du kan sedan klistra in krótki koden i blocket ”Custom HTML”.

WordPress blockredigerare visar dig inte formuläret. Men oroa dig inte. Det kommer att dyka upp på sidan när du sparar den.

Adding HTML Forms shortcode

Så låt oss trycka på ”Spara”-knappen för att se den i działanie.

Så här kan det se ut på din webbplats:

HTML Forms on a live website

För detaljerade instruktioner kan du kolla in vår przewodnik om hur du lägger till HTML-formulär i WordPress.

Vanliga frågor om inbäddning av WordPress-formulär

Har du frågor om inbäddning av formulär i WordPress? Här är några snabba svar som hjälper dig att komma igång.

Kan du bädda in formulär i WordPress?

Ja, du kan enkelt bädda in formulär i WordPress med hjälp av olika plugins, inklusive WPForms, som är den bästa mångsidiga formulärbyggaren.

Hur installerar jag ett formulär i WordPress?

Först måste du gå till Plugins Lägg till nytt från din WordPress admin. Nästa steg är att hitta ett formulärplugin som du väljer och sedan helt enkelt installera och aktivera det. När du är klar kommer du att använda pluginet för att skapa ett formulär och bädda in det på din webbplats med hjälp av en krótki kod eller ett block.

Hur ställer man in WPForms i WordPress?

För att konfigurera WPForms måste du först installera och aktivera WPForms-pluginet. Därefter kan du skapa ett nytt formulär med hjälp av dra-och-släpp-byggaren och bädda in formuläret på din webbplats med hjälp av en krótki kod eller pluginets block.

Hur skapar man ett formulär i WordPress utan plugin?

Att skapa ett formulär i WordPress utan ett plugin kräver anpassad HTML och PHP. Du kan manuellt lägga till formulärets HTML på din sida och hantera inskickningar med anpassad PHP i ditt temas functions.php-fil. Eftersom detta inte är nybörjarvänligt rekommenderar vi att du använder en formulärbyggare istället.

Vi hoppas att den här artikeln har hjälpt dig att lära dig hur du bäddar in formulär i WordPress. Därefter kanske du vill kolla in våra andra przewodniker om hur du ställer in WordPress-formulärspårning i Google Analytics och hur du spårar och minskar övergivna formulär.

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.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

1 kommentarLämna ett svar

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.