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

Vill du skriva din egen formulär-markup istället för att dra fält runt i en visuell byggare?

Goda nyheter: du behöver inte skriva någon PHP för att få det formuläret att fungera. Du kan låta ett lättviktigt plugin hantera bearbetningen medan du skriver varje tagg själv. Alternativt kan du bygga formuläret visuellt och släppa anpassad HTML exakt där du behöver det.

I den här guiden visar vi dig hur du skapar ett anpassat HTML-formulär som fungerar i WordPress.

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

Ett HTML-formulär samlar in besökarinformation, som namn, e-postmeddelanden och feedback, precis som alla andra formulär på webben. Vad som skiljer det åt är *hur* det byggs. Istället för att förlita sig på en tung dra-och-släpp visuell redigerare, bygger du ett HTML-formulär med ren kod. Det betyder att du skriver ut fälten (som textrutor, kryssrutor och rullgardinsmenyer) själv.

Människor som använder HTML-formulär över en dra-och-släpp-formulärbyggare gör det vanligtvis för att maximera sin webbplatsprestanda. Rena HTML-formulär gör att dina webbsidor laddas lite snabbare. Utöver bara hastighet ger skrivning av koden dig total designkontroll. Istället för att vara inlåst av en byggares strikta inställningar kan du anpassa layouten exakt efter dina behov.

De flesta WordPress-användare tycker att dra-och-släpp-plugins för formulärbyggare erbjuder den bästa användarupplevelsen. Du får full HTML-anpassning utan krånglet med manuell serverkonfiguration.

Här är allt vi kommer att gå igenom i den här guiden:

Metod 1: Lägga till HTML-formulär i WordPress med ett plugin

🎖️ Bäst för: Utvecklare och webbplatsadministratörer som vill ha full HTML-kontroll med en lättviktig, prestandafokuserad lösning. Pluginet betonar enkelhet och snabbhet framför visuella formulärbyggare.

Du kan lägga till ett HTML-formulär i WordPress med ett gratis formulärplugin som HTML Forms. Detta plugin hanterar PHP och en liten mängd JavaScript som krävs för att köra ett HTML-formulär i WordPress, samtidigt som du får total frihet att skriva HTML själv.

Gratisversionen täcker allt i den här handledningen, inklusive att skicka e-postmeddelanden och lagra dina inlämningar. Spam-skydd är också gratis.

För att komma igång, installera pluginet på din WordPress-webbplats. Om du behöver hjälp, följ vår steg-för-steg-guide om att installera ett WordPress-plugin.

Efter aktivering, gå till HTML Forms » Lägg till ny för att börja skapa ditt formulär.

Skriv ett namn för ditt formulär i fältet 'Formulärrubrik'. I den här guiden bygger vi ett enkelt kontaktformulär, så vi döpte vårt till 'Kontaktformulär'.

Klicka sedan på knappen Skapa formulär.

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

Överst på sidan ser du formulärets detaljer, inklusive formulärrubriken, slug, och kortkod. Under dessa detaljer hittar du fem flikar: 'Fält', 'Meddelanden', 'Inställningar', 'Åtgärder' och 'Inlämningar'.

Fliken 'Fält' innehåller tio knappar som genererar din fältkod.

Längst ner på denna flik hittar du ett förbyggt HTML-formulär tillsammans med en förhandsgranskning.

Standardformuläret är ganska enkelt. Det har 4 fält för användare att skriva sitt namn, e-postadress, ett kort ämne och ett meddelande.

För att lägga till ett nytt fält, klicka på motsvarande knapp precis ovanför rutan 'Formulärkod'.

Vi kommer att ersätta ämnesfältet med ett rullgardinsfält i den här handledningen.

Klicka på 'Rullgardinsmeny' för att öppna dess inställningar. Skriv sedan din fråga i rutan 'Fältetikett' och lägg till ett val per förfråganstyp, till exempel 'Allmän fråga', 'Försäljning' och 'Support'.

Efter att ha angett denna information, klicka på 'Lägg till fält i formulär'.

Du kommer sedan att se den nya rullgardinsmenytaggen visas i rutan 'Formulärkod'. Skrolla bara ner för att se din uppdaterade markup.

För att göra formuläret användarvänligt, låt oss placera nedrullningsfältet direkt under fältet 'Din e-post'. Eftersom detta plugin inte har en dra-och-släpp-byggare, måste du klippa ut koden från kodbyggaren och klistra in den där du vill placera den.

För att ta bort ämnesfältet, ta bort hela styckesblocket som innehåller ämnesfältet.

När du är klar vill du kontrollera panelen 'Formulärförhandsgranskning'.

Om du inte ser den, klicka på länken 'Visa formulärförhandsgranskning'.

Denna liveförhandsgranskning låter dig bekräfta att dina ändringar fungerade utan att bryta layouten.

Du kan snabbt verifiera att ämnesfältet är borta och testa att din nya nedrullningsmeny fungerar korrekt.

Gå sedan vidare och klicka på den blå knappen 'Spara ändringar'.

Nu kanske du vill kontrollera formulärets konfiguration. Gå vidare och klicka på fliken 'Meddelanden' för att se hur HTML-formulär konfigurerar bekräftelsemeddelandena för formulärinlämning.

Den här fliken låter dig anpassa bekräftelsemeddelandena som användarna kommer att se.

Om du är nöjd med standardtexten kan du låta den vara. Annars, gör dina ändringar och klicka sedan på Spara ändringar.

Som standard sparar ett nytt formulär dina inlägg i databasen, men det skickar inte e-post till dig när någon skickar in det.

För att åtgärda detta, klicka på fliken Åtgärder. Du kommer att se ett meddelande som säger 'Inga formuläråtgärder konfigurerade för detta formulär'.

Gå vidare och klicka på 'Skicka e-post'.

Fälten 'Från', 'Till' och 'Meddelande' är alla obligatoriska. Du kan använda variabelfälten som listas direkt under meddelandefältet för att automatiskt infoga information som besökaren skrev in i ditt formulär.

Efter att ha fyllt i dessa, klicka på 'Spara ändringar'. Du kommer nu att få ett e-postmeddelande varje gång någon skickar in ditt formulär.

När allt är konfigurerat behöver du bara publicera ditt HTML-formulär. Gå till sidan eller inlägget där du vill bädda in formuläret. Håll sedan muspekaren över området där du vill infoga formuläret och klicka på '+' -knappen.

Härifrån, börja skriva 'HTML-formulär' i sökfältet. När rätt block visas, klicka för att lägga till det på din sida eller inlägg.

Inuti HTML-formulärblocket, klicka på nedrullningsmenyn och välj det formulär du vill visa.

När du har valt formuläret från nedrullningsmenyn, klicka på knappen 'Uppdatera'.

Ditt kontaktformulär är nu live. Här är hur det kommer att se ut för dina besökare:

Innan du marknadsför formuläret någonstans, rekommenderar vi att du testar det själv genom att skicka in ett exempel. Så här bekräftar du att formuläret inte bara visas, utan faktiskt levereras.

Efter att ha skickat in ett testinlägg, gå till HTML-formulär » Alla formulär. Här, klicka på formulärets 'Inlämningar' -länk.

Detta visar alla dina formulärinlämningar. Ditt testinlägg kommer att visas i tabellen, och du bör också få en avisering i din inkorg.

Tabellen 'Inlämningar' öppnas med en kolumn 'Tidsstämpel' som talar om när formuläret skickades, följt av en kolumn för varje fält.

Metod 2: Lägga till anpassad HTML i formulär med dra-och-släpp

🎖️ Bäst för: Alla som vill bygga ett formulär visuellt men ändå behöver lägga in specifik HTML i det, som en tooltip, en länk eller en formaterad notering.

När det gäller att skapa formulär rekommenderar vi WPForms. Det ger dig en dra-och-släpp-byggare samtidigt som det låter dig infoga din egen markup, så en länk, en formaterad notering eller en tooltip hamnar exakt där du vill ha den.

Vi använder WPForms på våra egna webbplatser för kontaktformulär, leadgenerering, årliga undersökningar och mer.

WPForms Lite är helt gratis, men HTML-fältet som används i den här metoden är en betalfunktion. Det är tillgängligt på Basic-planen (39,60 USD/år) och högre.

I den här metoden visar vi hur du lägger till HTML-kodavsnitt för att anpassa dina WordPress-formulär med WPForms.

För att börja, installera och aktivera WPForms.

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

För att komma igång, låt oss skapa kontaktformuläret genom att gå till WPForms » Lägg till nytt.

I panelen Inställningar, börja med att ge ditt formulär ett namn.

Det här namnet är endast för intern referens, så du kan använda vad du vill.

Nästa steg är att bestämma hur du vill bygga ditt formulär. Med WPForms kan du börja från en fördefinierad mall, bygga från grunden, eller beskriva vad du behöver och låta AI-formulärbyggaren sätta ihop det åt dig.

Om du vill använda den AI-drivna byggaren, ange helt enkelt en enkel prompt. AI:n kommer sedan att skapa formuläret åt dig på några sekunder.

För den här handledningen använder vi en förbyggd mall.

Eftersom det finns över 2 100 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 'Kontaktformulär' och vänta tills sökningen är klar.

För att titta närmare på en mall kan du använda den inbyggda förhandsgranskningsfunktionen. Håll muspekaren över en formulärmall 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. Du ser alla anpassningsverktyg i den vänstra panelen och en liveförhandsgranskning till höger.

Du kan dra element från den vänstra panelen och släppa dem på liveförhandsgranskningen. Du kan också ordna om element i förhandsgranskningen med dra-och-släpp.

Skrolla ner i den vänstra panelen till gruppen Fancy Fields, dra sedan och släpp HTML-fältet direkt på ditt formulär.

Efter att ha lagt till HTML-fältet, klicka på det för att öppna dess anpassningsalternativ.

För att börja, skriv in en 'Etikett' för att hjälpa dig att identifiera det här fältet. Detta är bara för din referens och visas inte för besökare, så du kan använda vad du vill. Du kan också lämna fältet tomt.

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

För att skapa ett verktygstips kan du använda taggen <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 exempelkod, så redigera den gärna för att passa dina behov. `title=""`-delen av koden är exakt vad som talar om för webbläsaren att skapa hover-popup-effekten, så du får tooltippen utan att lägga till någon CSS på din webbplats.

Observera att WPForms inte visar HTML-koden i formulärbyggarens förhandsgranskning. För att testa tooltippen, klicka på 'Förhandsgranska'.

Detta öppnar en ny flik.

Här kan du testa att HTML-kodavsnittet för din tooltip fungerar korrekt genom att föra muspekaren över texten. Efter en kort stund bör tooltippen visas.

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

WPForms konfigurerar automatiskt dina inställningar för aviseringar och bekräftelser åt dig. Om du vill anpassa dem väljer du dock 'Inställningar' och sedan antingen 'Aviseringar' eller 'Bekräftelser'.

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

För att lägga till flera mottagare, separera e-postadresser med kommatecken, som email1@example.com, email2@example.com, email3@example.com.

När du har anpassat dina aviseringar och andra inställningar är det dags att publicera och bädda in WordPress-formuläret.

Klicka på knappen 'Bädda in' i det övre högra hörnet av formulärbyggaren.

WPForms kommer då att fråga om du vill lägga till formuläret på en befintlig sida eller en ny sida.

I den här guiden väljer vi 'Välj befintlig sida'.

I nästa popup-fönster, välj en sida från listan över tillgängliga sidor. Därefter kan du klicka på 'Låt oss gå!' för att öppna blockredigeraren.

Håll nu muspekaren över området där du vill lägga till formuläret och klicka på '+' -knappen. Gå sedan vidare och välj WPForms-blocket.

Du kan nu välja det formulär du vill visa, med hjälp av rullgardinsmenyn.

Efter att ha valt ditt formulär kommer WPForms att ladda det i blockredigeraren.

När du är nöjd med hur allt är inställt, 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.

Innan du skickar riktiga besökare till formuläret rekommenderar vi att du skickar in en snabb testpost för att säkerställa att allt fungerar.

Efter att ha skickat in ett test, gå till WPForms » Alla formulär. Här, håll muspekaren över ditt kontaktformulär och klicka på 'Inskickade formulär' när det visas.

På nästa skärm ser du alla dina formulärinskickningar.

Tabellen visar all information som användarna skickat in, tillsammans med den exakta tiden för inskickningen.

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

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

Troligtvis visar WordPress ditt formulär men bearbetar det inte. Att bara klistra in ett HTML-formulär på en sida räcker inte för att det ska fungera.

Även om formuläret kan visas korrekt, bearbetar WordPress inte automatiskt formulärinlämningar. Till skillnad från en grundläggande HTML-webbplats finns det inget inbyggt skript för att hantera data när någon klickar på Skicka.

För att göra formuläret funktionellt behöver du lägga till anpassad PHP-kod för att bearbeta inlämningar eller använda ett plugin som hanterar detta åt dig.

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

Ja, absolut. Att använda HTML ger dig full kontroll över hur ditt formulär ser ut och fungerar. Tänk bara på att du också kommer att vara ansvarig för allt annat, som till exempel:

• Stilning av formuläret med din egen CSS
• Lägga till validering, felmeddelanden eller villkorlig logik med anpassad kod
• Att se till att formuläret fungerar korrekt på olika enheter och webbläsare

Så ja, du har full flexibilitet, 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 exporterar WordPress-formulärinlägg till CSV och Excel
• Hur man anpassar och stylar dina WordPress-formulär
• Bästa WordPress-kontaktformulärplugins

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.