Hur man lägger till HTML-formulär i WordPress (2 metoder)

Har du någonsin lagt till ett HTML-formulär på din WordPress-webbplats, bara för att upptäcka att det ser bra ut men inte fungerar? Du är inte ensam.

Många webbplatsägare stöter på detta frustrerande problem och undrar varför deras formulär inte skickar in eller ansluter korrekt.

Anledningen är enkel: WordPress hanterar inte formulär på samma sätt som en vanlig HTML-webbplats. Så om du bara kopierar och klistrar in ett rått HTML-formulär fungerar det vanligtvis inte utan extra steg.

På våra egna webbplatser använder vi WPForms-pluginet eftersom det hanterar all bakom kulisserna-konfiguration åt oss. Ändå vet vi att många användare föredrar att arbeta med anpassade HTML-formulär för att hålla saker lätta, behålla full kontroll över koden och minska beroendet av plugins.

I den här guiden visar vi dig 2 beprövade sätt att lägga till HTML-formulär i WordPress – och se till att de faktiskt fungerar. Oavsett om du precis har börjat eller är bekväm med kod, kommer du att kunna skapa ett fungerande formulär utan allt krångel. 💡

Vad är HTML-formulär och varför skapa ett?

HTML-formulär fungerar ungefär som andra webbplatsformulär. De låter besökare skriva in och skicka information som namn, e-postadresser, feedback, beställningar och mer.

Det som skiljer dem åt är att HTML-formulär skapas med HTML-kod istället för en dra-och-släpp-visuell redigerare som ett formulärplugin. Så du måste definiera fält som textrutor, kryssrutor, alternativknappar och rullgardinsmenyer själv. Du bestämmer hur de ser ut och ställer in specifika regler för hur de fungerar.

Här är några fördelar med att skapa formulär från grunden med HTML:

• Optimerad prestanda. HTML-formulär tenderar att laddas snabbare och använda mindre minne eftersom koden är lättviktig.
• Kontroll. Du har fullständig kontroll över formulärets design och funktionalitet eftersom du inte är begränsad av ett formulärbyggnadsverktygs funktioner.
• Anpassning. HTML-formulär kan skräddarsys exakt efter dina behov och erbjuder mer flexibel formuläranpassning.

Att skapa HTML-formulär från grunden är ett utmärkt sätt att lära sig och öva kodning, men det har sina egna utmaningar.

Du kan ha problem med kompatibilitet mellan olika webbläsare, där formuläret fungerar olika i olika webbläsare.

Dessutom, baserat på vår erfarenhet, kan hantering av formulärvalidering med JavaScript vara knepigt. Det kräver noggrann testning för att säkerställa att du kan samla in och bearbeta alla användarinmatningar korrekt.

Med det sagt finns det sätt att lägga till HTML-formulär utan dessa komplexiteter. Så oavsett om du hanterar en WordPress-blogg, en företagswebbplats eller en webbutik, kan du enkelt lägga till HTML-formulär på din webbplats utan att behöva koda från grunden.

I följande avsnitt visar vi hur du lägger till HTML-formulär i WordPress. Här är en snabb översikt över de 2 metoder vi kommer att täcka i den här guiden:

• Metod 1: Lägga till HTML-formulär i WordPress med pluginet HTML Forms (Enkelt)
• Metod 2: Lägga till anpassad HTML i WordPress-formulär med WPForms
• Bonustips: Ladda upp en anpassad HTML-sida till WordPress
• Vanliga frågor: Hur man lägger till HTML-formulär i WordPress
• Ytterligare resurser: Fler guider för WordPress-formulär

Redo? Låt oss börja.

Metod 1: Lägga till HTML-formulär i WordPress med pluginet HTML Forms (Enkelt)

Ett enkelt sätt att lägga till ett HTML-formulär på en WordPress-webbplats är att använda ett gratis formulärplugin som HTML Forms. Det är ett utmärkt verktyg för att skapa och konfigurera HTML-formulär på ett och samma ställe, så du slipper hantera någon serverkonfiguration.

I den här guiden kommer vi att använda pluginets gratisversion, som innehåller allt du behöver för att skapa ett HTML-formulär.

För att komma igång, låt oss se till att du har pluginet installerat på din WordPress-webbplats. Om du behöver hjälp kan du följa vår steg-för-steg-guide för att installera ett WordPress-plugin.

Efter aktivering kan du navigera till HTML-formulär » Lägg till nytt i din WordPress-adminpanel för att börja skapa ditt kontaktformulär.

Detta omdirigerar dig till sidan 'Lägg till nytt formulär'.

Härifrån är det första du behöver göra att namnge ditt formulär genom att helt enkelt skriva namnet i fältet 'Form Title'. Till exempel namngav vi vårt formulär 'Newsletter Sign-Up'.

Klicka sedan på knappen ‘Skapa formulär’ under fältet.

När du har gjort det visas sidan ‘Redigera formulär’, och du kan börja anpassa ditt HTML-kontaktformulär.

Överst i fliken ser du formulärets detaljer, inklusive formulärets titel, slug och kortkod. Du behöver inte memorera dessa detaljer, eftersom de kommer att finnas tillgängliga på instrumentpanelen för HTML-formulär när du behöver dem.

Nedanför dessa detaljer hittar du menyflikarna. Under fliken ‘Fält’ kan du se olika fältknappar, som ‘Text,’ ‘Datum,’ ‘Kryssrutor,’ och ‘Radioknappar,’ att lägga till i dina formulär.

Låt oss scrolla ner lite till.

Längst ner på den här fliken hittar du ett förbyggt HTML-formulär tillsammans med förhandsgranskningen.

Detta kontaktformulär är ganska enkelt. Det har 4 fält där användare kan skriva in sitt namn, e-postadress, ett kort ämne och ett meddelande.

Låt oss nu säga att du vill lägga till ett nytt fält med en prenumerationsanmälan för en e-postnyhetsbrev. Klicka sedan helt enkelt på en av fältknapparna ovanför ‘Formulärkod.’

Till exempel kommer vi att använda ett rullgardinsfält och skapa ett alternativ för 'Ja/Nej'.

Härifrån vill du klicka på 'Dropdown', och detta öppnar konfigurationsalternativen för dropdown-fältet. Du kan börja fylla i detaljerna, som inkluderar fältets etikett och val.

Efter att ha angett detaljerna kan du klicka på 'Add Field to Form'.

Då bör du se nedrullningsfältstaggen i avsnittet ‘Formulärkod.’ Skrolla helt enkelt ner på fliken för att kolla in den.

Nästa steg är att organisera om kontaktformuläret.

För att bibehålla ett bra flöde vill du att nedrullningsfältet ska ligga precis under fältet ‘E-post.’

För att flytta det kan du klippa ut dropdown-fältets tagg från den första taggens <p> till den sista </>. Gå sedan vidare och klistra in den precis under taggen ‘E-post’.

Standardfältet 'Ämne' kanske inte är nödvändigt för ett nyhetsbrevsanmälningsformulär. Därför rekommenderar vi att du tar bort fältet.

Du kan göra detta genom att ta bort dess tagg från första <p> till sista </p>.

Efter att ha flyttat och tagit bort taggar vill du skrolla ner på fliken till sektionen 'Form Preview'.

I det här avsnittet kan du kontrollera om du har flyttat och tagit bort fälten utan att ha förstört något. Du kan också kontrollera om rullgardinsmenyn fungerar korrekt.

När du är nöjd med resultaten, klicka på den blå knappen ‘Spara ändringar’ under sektionen ‘Formulärkod’.

När sparprocessen är klar bör du se en notifikation om ‘Formulär uppdaterat.’ högst upp på den här sidan.

Nu kanske du vill kontrollera formulärets konfiguration. Låt oss gå till fliken 'Messages' för att se hur HTML Forms konfigurerar bekräftelsemeddelandena för formulärinlämning.

Klicka helt enkelt på 'Meddelanden' för att öppna fliken.

Den här fliken låter dig redigera den färdiga texten för när en användares formulärinsändning är framgångsrik och andra liknande situationer.

Om allt ser bra ut för dig kan du låta det vara som det är. Om du har gjort några ändringar, glöm inte att klicka på knappen ‘Spara ändringar’ så att du inte förlorar dina framsteg.

Gå sedan till fliken ‘Inställningar’.

Som standard kommer HTML Forms att ställa in ‘Ja’ för att spara varje formulärinlämning och ‘Nej’ för att dölja formuläret efter en lyckad inlämning. Du kan anpassa detta efter behov.

Sedan, i ‘Omdirigera till URL efter lyckade registreringar,’ kan du kopiera och klistra in URL:en till en live-webbsida från din WordPress-webbplats. Eller, skriv 0 i fältet för att behålla användarna på sidan efter en lyckad formulärinlämning.

När allt är inställt, allt som återstår att göra är att lägga till HTML-kontaktformuläret på en WordPress-sida.

Låt oss gå till Inlägg eller Sida » Alla inlägg eller Alla sidor från WordPress-instrumentpanelen.

För den här guiden lägger vi till HTML-formuläret på vår ‘Kontakt’-sida.

Så, vi kommer att hålla muspekaren över sidan 'Kontakt' i listan och klicka på 'Redigera' när den visas.

Detta startar blockredigeraren för sidan 'Kontakt'.

I redigeraren kan du börja välja ett område för att lägga till formuläret. Håll sedan muspekaren över det och klicka på '+' -knappen för att lägga till blocket HTML-formulär.

Nu kan du skriva 'HTML-formulär' i sökfältet för att snabbt hitta blocket. När du har sökresultatet klickar du på det.

Du kommer då att se en rullgardinsmeny i blocket 'HTML-formulär'. Expandera helt enkelt på den och välj det formulär du vill visa. Här väljer vi formuläret 'Nyhetsbrevsanmälan' som vi just skapade.

Formuläret kommer att visas när du publicerar ditt innehåll. Så när du har valt formuläret från rullgardinsmenyn kan du klicka på knappen 'Uppdatera'.

Där har du det! Ditt formulär är nu live och användare kan anmäla sig till ditt nyhetsbrev.

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

För att se formulärinlämningar kan du först gå till HTML-formulär » Alla formulär. Detta tar dig till listan över alla dina HTML-formulär.

Håll sedan muspekaren över ett formulär och klicka på knappen 'Inskick' när den visas.

Härifrån kan du se alla dina formulärinlämningar.

Tabellen 'Inskickade formulär' visar all information som användarna fyllde i ditt formulär. Sedan finns det kolumnen 'Tidsstämpel', som talar om när de skickade in formuläret.

Till exempel, här gjordes den första inlämningen av ‘Användare 1.’

Från tabellen kan vi se att användaren skickade in formuläret den 25 juni runt kl. 13.00. Dessutom svarade 'Användare 1' 'Kanske senare' på frågan 'Vill du prenumerera på vårt nyhetsbrev'. Så i det här fallet bör du inte lägga till deras e-postadress i din e-postlista.

Metod 2: Lägga till anpassad HTML i WordPress-formulär med WPForms

Ett annat sätt att skapa HTML-formulär är att använda en formulärbyggare. Även om den här metoden inte låter dig koda dina formulär från grunden, tillåter den dig att anpassa dem genom att lägga till HTML-kodavsnitt.

Till exempel kan du använda anpassad HTML för att visa ett kort varningmeddelande på ett kassaformulär med en länk till din sida 'Återbetalnings- och returpolicy'. Eller så kan du lägga till en framstegsmätare för att låta användarna veta hur långt de är från att slutföra formuläret. Anpassad HTML kan till och med låta dig infoga emojis eller lägga till en verktygstips.

I den här metoden visar vi hur du lägger till HTML-kodavsnitt för att anpassa dina WordPress-formulär med hjälp av WPForms, den bästa formulärbyggaren för WordPress.

På vår WPBeginner-sida använder vi den för kontaktformulär, årliga undersökningar och förfrågningar om webbplatsmigrering. Få mer information om detta plugin på vår detaljerade WPForms-recension.

WPForms levereras med omfattande tillägg med ett klick och tredjepartsintegrationer. Du kan till exempel installera tillägget Form Abandonment för att spåra och minska problem med övergivna formulär och mycket mer!

Så, WPforms gör det enklare att utöka formulärets funktionalitet än om du skulle hårdkoda ditt WordPress-formulär från grunden.

Innan vi börjar, låt oss se till att du har WPForms installerat och aktiverat på din WordPress-webbplats. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering kan du navigera till WPForms » Inställningar för att ange din licenskod. Efter att ha angett nyckeln klickar du helt enkelt på knappen 'Verifiera nyckel' för att starta verifieringen.

När du är klar kan du börja skapa ditt formulär och lägga till anpassad HTML. I den här guiden visar vi hur du lägger till en enkel tooltip till ditt kontaktformulär.

En tooltip är som en liten popup-ruta som visas när du för muspekaren över ett webbningselement. Det är praktiskt eftersom det låter användare lära sig mer om ett specifikt webbningselement utan att klicka eller lämna sidan de befinner sig på.

Men först, låt oss skapa kontaktformuläret. Gå helt enkelt till WPForms » Lägg till nytt från ditt WordPress-administrationsområde för att komma igång.

Detta öppnar panelen 'Inställningar', där du först behöver namnge ditt formulär. Detta namn är endast för din referens, så du kan använda vad du vill.

Nästa steg är att välja hur du vill bygga ditt formulär.

Med WPForms kan du skapa formulär med hjälp av AI-formulärbyggaren, en färdig mall, eller från grunden.

Om du vill använda den AI-drivna byggaren, behöver du bara ange en enkel prompt. AI:n skapar sedan formuläret åt dig på några sekunder.

För den här handledningen kommer vi dock att demonstrera det med hjälp av en förbyggd mall.

Eftersom det finns över 2 000 formulärmallar att välja mellan kan du använda sökfältet för att snabbt filtrera dem. För att göra detta, skriv bara in 'Kontaktformulär' och vänta tills sökningen är klar.

Om du vill utforska varje sökresultat för att se hur formuläret ser ut, kan du dra nytta av förhandsgranskningsfunktionen. Håll bara muspekaren över formulärmallen och klicka på ‘Visa demo.’

När du har hittat det perfekta kontaktformuläret för dina behov, håll muspekaren över det igen och klicka på 'Använd mall'.

Detta startar formulärbyggaren.

Nu finns alla anpassningsverktyg i den vänstra panelen, och liveförhandsgranskningen av formuläret finns på höger sida av skärmen.

På hela den här sidan kan du använda dra-och-släpp-funktionen för att lägga till element från anpassningspanelen till förhandsgranskningen i realtid. Du kan också använda funktionen för att flytta fält i förhandsgranskningen i realtid.

Låt oss försöka lägga till HTML-fältet i formuläret. Allt du behöver göra är att skrolla ner i den vänstra panelen och sedan dra och släppa ‘HTML’ till formuläret.

Efter att ha infogat HTML-fältet kan du klicka på det för att öppna dess anpassningsalternativ. Här är det första du ska göra att fylla i fältets 'Etikett'. Du kan också lämna det tomt.

Sedan infogar du den anpassade HTML-koden i fältet ‘Kod’.

För att skapa en tooltip kan du använda funktionen ‘<span>’ eller helt enkelt kopiera följande kod och klistra in den i fältet ‘Kod’:

<span title="We have cool stuff to share every week. :)">Hi there! We have an email newsletter you might want to subscribe to. Let us know in the Comment or Message field, and we’ll sign you up.</span> 

Detta är bara ett exempel på kod, så redigera gärna vår kopia för att bättre matcha dina behov.

Observera att WPForms inte visar HTML-koden i förhandsgranskningen av formulärbyggaren. För att förhandsgranska fältet och se till att allt är rätt kan du spara ändringarna först och klicka på 'Förhandsgranska'.

Detta tar dig till en ny flik.

Nu ska vi testa om HTML-kodavsnittet för din tooltip fungerar korrekt. Håll bara muspekaren över texten och vänta tills tooltippen visas i några sekunder.

När du är nöjd med resultatet kan du gå tillbaka till formulärbyggaren för att slutföra ditt formulär.

Dina formulärinställningar för meddelanden och bekräftelser är redan inställda i WPForms. Om du vill anpassa dem, gå dock till ‘Inställningar’ och sedan ‘Meddelanden’ eller ‘Bekräftelser’.

I avsnittet 'Aviseringar' kan du lägga till flera mottagare för ditt kontaktformulärs inlämning.

Du kommer att se en kort instruktion om du håller muspekaren över frågeteckenknappen bredvid fältet 'Skicka till e-postadress'. Du vill följa den för att säkerställa att ditt meddelande skickas till rätt e-postadresser.

Du kan också redigera den förinställda texten för din e-postämnesrad.

Till exempel ändrade vi vår från 'Nytt inlägg: Kontaktformulär' till 'Du har post: Ny kontakt'.

När du har anpassat dina aviseringar vill du gå till panelen 'Bekräftelse'.

Som standard ställer WPForms in din bekräftelsetyp till 'Meddelande' och har den förgjorda texten redo för dig. Du kan definitivt ändra dessa inställningar om du vill.

Förutom att visa ett bekräftelsemeddelande kan du vidarebefordra användare till en ny sida eller en specifik URL.

När allt är klart är det dags att publicera och bädda in WordPress-formuläret.

Klicka på knappen ‘Bädda in’ för att börja publicera. WPForms kommer sedan att fråga om du vill lägga till formuläret på en befintlig eller en ny sida. I den här guiden väljer vi ‘Välj befintlig sida.’

I nästa popup-fönster väljer du en sida från listan över tillgängliga sidor. Därefter kan du klicka på ‘Låt oss gå!’ för att gå till sidans blockredigerare.

Nu kan du sväva över området där du vill placera formuläret och klicka på '+'-knappen. Fortsätt och välj WPForms-blocket.

Sedan kan du välja ett formulär från WPForms-blockets rullgardinsmeny.

När du har valt ett formulär kommer WPForms att ladda det i det valda innehållsområdet. Om du vill visa formulärets titel kan du gå till fliken 'Block' i panelen till höger och slå på reglaget 'Visa titel'.

När du är nöjd med allt, klicka på knappen 'Uppdatera'.

Och klart! Du har lagt till anpassad HTML i ditt WPForms-kontaktformulär och gjort det live på din WordPress-webbplats.

Nu kan användare börja fylla i formuläret och eventuellt anmäla sig till ditt e-postnyhetsbrev.

För att se alla dina WPForms formulärinlägg, navigerar du till WPForms » Alla formulär.

Sedan kan du sväva över 'Kontaktformulär' eller vilket formulär som helst i listan och klicka på 'Inlägg' när knappen visas.

På nästa skärm bör du kunna se alla dina formulärinlämningar.

Tabellen visar all information som användarna skickade in med formuläret, samt tiden för inlämningen.

Till exempel, den 2 juli runt kl. 08.00, sa 'Användare 3' att de ville prenumerera på e-postnyhetsbrevet och lämnade en fråga om hur man når vårt kundsupportteam.

Vi kan också se kolumnen ‘Åtgärder’. I den här kolumnen finns flera knappar: ‘Visa’, ‘Redigera’, ‘Spam’ och ‘Papperskorg’.

Om du klickar på 'Visa' tar WPForms dig till en dedikerad översiktssida för en post. På den här sidan uppmuntrar pluginet dig att aktivera två tillägg.

Den första är tillägget Geolocation för spårning, där användaren skickar in formuläret. Den andra är tillägget User Journey, som kan hjälpa dig att analysera användarens väg genom din webbplats tills de klickar på knappen ‘Skicka in’.

Vi rekommenderar att installera och aktivera dessa tillägg för mer optimerad formulärprestanda.

Knapparna 'Spam' och 'Papperskorg' är användbara för att markera falska inlägg och ta bort dem från dina inlägg. För att lära dig mer om att minska falska formulärinlägg kan du läsa vår guide om hur man blockerar spam i kontaktformulär.

Bonustips: Ladda upp en anpassad HTML-sida till WordPress

Du kanske också letar efter ett sätt att ladda upp en anpassad HTML-sida till din WordPress-webbplats. Detta kan vara användbart om du har en statisk mall som du vill använda eller en HTML-sida från en gammal webbplats.

Den allmänna tumregeln är att ladda upp en enda HTML-sida utan separata CSS- eller bildfiler. Men om sidan du vill ladda upp innehåller separata CSS-filer och bilder, måste du placera dem i en katalogstruktur.

AIOSEO, den bästa SEO-plugin för WordPress, kan hjälpa dig med detta.

För att lära dig mer, se vår nybörjarguide om hur man laddar upp en HTML-sida till WordPress utan 404-fel.

Vanliga frågor: Hur man lägger till HTML-formulär i WordPress

Vi har besvarat några vanliga frågor för att hjälpa dig att enkelt lägga till HTML-formulär i WordPress.

Varför fungerar inte mitt HTML-formulär på WordPress?

Det är ett vanligt problem. WordPress bearbetar inte automatiskt formulärinlämningar som en vanlig HTML-webbplats kan göra när den paras ihop med server-side-skript. Så om du bara klistrar in ett grundläggande HTML-formulär kan det se bra ut, men det kommer faktiskt inte att göra något när någon trycker på "skicka".

Det beror på att WordPress inte inkluderar någon inbyggd hantering för formulärdata. På en standard HTML-webbplats ansluter utvecklare vanligtvis formulär till skript som form-handler.php för att bearbeta indata. I WordPress behöver du lägga till din egen anpassade PHP-kod eller använda ett plugin för att göra formuläret funktionellt.

Kort sagt, att visa formuläret är enkelt, men att få det att fungera kräver lite extra inställningar.

Hur kan jag säkerställa att mina formulärinlämningar går igenom?

Det enklaste sättet är att använda ett kontaktformulärplugin som WPForms och Formidable Forms. Det tar hand om allt bakom kulisserna, som att hantera inlämningar, skicka aviseringar och blockera skräppost, så att du inte behöver ställa in allt manuellt.

Kan jag fortfarande anpassa mina formulär om jag använder HTML?

Absolut! Om du är bekväm med att arbeta med kod ger rå HTML dig full kontroll över strukturen på ditt formulär. Tänk bara på:

• Du behöver skriva din egen CSS för att styla saker som layouter, färger och avstånd.
• Formulärvalidering, felmeddelanden eller villkorlig logik kräver anpassad JavaScript eller server-side kod.
• Och du är också ansvarig för att se till att formuläret fungerar på olika webbläsare och enheter.

Så ja, du har full frihet, men också fullt ansvar.

Ytterligare resurser: Fler guider för WordPress-formulär

Vi hoppas att den här artikeln har hjälpt dig att lära dig hur du lägger till HTML-formulär i WordPress. Därefter kanske du vill kolla in våra guider om:

• Hur man skapar ett RSVP-formulär i WordPress
• Hur man skapar ett onlinebokningsformulär i WordPress
• Hur man skapar ett WordPress-formulär med en datumväljare
• Hur man skapar flerspråkiga formulär i WordPress
• Hur man skapar konversationsformulär i WordPress
• Hur man stylar och anpassar dina WordPress-formulär
• Hur man exporterar WordPress-formulärinlägg till CSV och Excel
• 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.