Hur man anpassar och stylar dina WordPress-formulär (2 enkla metoder)

Ett vanligt, klumpigt WordPress-formulär kan få även den bäst designade webbplatsen att kännas ofullständig och se helt malplacerad ut.

Det värsta? Besökare kan känna sig osäkra på att fylla i det om det inte matchar resten av din webbplats.

Under vår resa med att driva en WordPress-blogg har vi lärt oss att väldesignade, varumärkesspecifika formulär kan göra stor skillnad.

Faktum är att när vi matchade våra formulär med webbplatsens färger och layout, såg vi en enorm ökning av formulärinlämningar.

I den här guiden visar vi dig två enkla men kraftfulla sätt att anpassa och styla dina WordPress-formulär, så att de inte bara ser bra ut utan också presterar bättre. 🚀

Varför anpassa och styla dina WordPress-formulär?

Att anpassa dina WordPress-formulär hjälper dem att matcha ditt varumärke, vilket bygger förtroende och kan avsevärt öka dina konverteringsgrader för formulär. Genom att styla dina formulär gör du dem mer visuellt tilltalande och lättare för dina besökare att navigera.

Till exempel, om du lägger till ett registreringsformulär på din webbplats med hjälp av ett plugin för användarregistrering, kommer du att se att dess layout är lite tråkig. Detta kan misslyckas med att fånga din besökares uppmärksamhet och till och med avskräcka dem från att fylla i formuläret.

Att anpassa dina formulär kan göra dem mer attraktiva genom att matcha dem med ditt WordPress-tema och varumärke.

Detta kan leda till fler konverteringar eftersom stylade WordPress-formulär är lättare att navigera och kan uppmuntra fler användare att fylla i dem.

Stylade formulär kan också öka din varumärkeskännedom bland användarna. Du kan till exempel använda din webbplatslogotyp och företagets signaturfärger för att göra ditt formulär mer minnesvärt och effektivt.

Nu ska vi visa dig hur du enkelt anpassar och stylar dina WordPress-formulär, steg för steg.

Vi kommer att täcka två metoder i det här inlägget, och du kan använda snabblänkarna nedan för att hoppa till den du vill använda:

Låt oss börja!

Metod 1: Hur man anpassar och stylar WordPress-formulär med WPForms (kodfri metod)

WPForms är det bästa WordPress-pluginet för kontaktformulär med en dra-och-släpp-byggare. Det erbjuder över 2000 förgjorda teman och inbyggda anpassningsalternativ för kodfri formulärstyling, plus AI-verktyg för formulärskapande.

Vi använder WPForms på WPBeginner för kontaktformulär, webbplatsmigreringar och vår årliga undersökning. För att läsa mer om vår erfarenhet, se vår kompletta WPForms-recension.

Steg 1. Installera och aktivera WPForms-pluginet

Först, låt oss registrera oss för ett WPForms-konto.

På deras webbplats, klicka på knappen 'Skaffa WPForms nu', välj en plan och följ instruktionerna på skärmen för att slutföra registreringen.

Nu behöver du installera och aktivera WPForms-pluginet.

I ditt WordPress-adminområde, gå till Plugins » Lägg till plugin.

På nästa skärm kan du använda sökfältet för att snabbt hitta WPForms-pluginet.

Klicka på 'Installera nu' och sedan 'Aktivera' för att aktivera det på din WordPress-webbplats.

För detaljerade instruktioner, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Om du använder Pro-versionen, besök sidan WPForms » Inställningar i WordPress-administratörens sidofält för att ange din licensnyckel efter aktivering.

Du kan hitta denna information i ditt konto på WPForms webbplats.

Gå sedan till WPForms » Inställningar i din adminpanel och verifiera att kryssrutan 'Använd modern markup' är markerad.

Du måste aktivera Modern Markup för att låsa upp de avancerade designinställningarna och anpassningsalternativen inom WordPress blockredigerare.

Glöm inte att klicka på knappen 'Spara ändringar' för att spara dina inställningar.

Steg 2. Skapa ditt WordPress-formulär

Härifrån går vi till skärmen WPForms » Lägg till ny från WordPress admin-instrumentpanel för att skapa ditt formulär.

Detta tar dig till sidan 'Inställningar', där du kan börja med att skriva ett namn för ditt formulär.

Efter det kan du välja vilken formulärmall du vill, hovra över den och klicka på knappen 'Använd mall' under den. För den här handledningen kommer vi att skapa och lägga till ett enkelt kontaktformulär på vår webbplats.

Detta startar mallen i WPForms formulärbyggare, där du ser en förhandsgranskning av formuläret till höger och formulärfält i den vänstra kolumnen.

Härifrån kan du dra och släppa vilket formulärfält du vill till formuläret enligt dina önskemål. Du kan också ordna om eller ta bort fält.

För detaljerade instruktioner, se vår handledning om hur man skapar ett kontaktformulär i WordPress.

När du är klar med ditt formulär klickar du helt enkelt på knappen 'Spara' högst upp för att lämna formulärbyggaren.

Steg 3. Anpassa din formulärdesign med WPForms-teman

Du är nu redo att lägga till ditt formulär i blockredigeraren och anpassa det. Låt oss klicka på knappen 'Bädda in' inuti formulärbyggaren.

Detta öppnar inbäddningsguiden där du kan välja ett av följande alternativ:

• Välj en befintlig sida – Välj en sida på din WordPress-webbplats och lägg till formuläret med WPForms-blocket.
• Skapa en ny sida – Detta lägger automatiskt till formuläret på en ny sida.

För den här guiden väljer vi 'Skapa ny sida'.

Därefter lägger vi till ett namn för den nya sidan, till exempel 'Kontakta oss'.

Klicka på 'Låt oss köra!' när du är klar här.

Detta öppnar sidredigeraren med ditt formulär redan inbäddat.

För mer information, se vår guide om hur man bäddar in formulär i WordPress.

Nu när du har lagt till formuläret är det dags att anpassa och styla det.

För att göra detta måste du öppna blockpanelen på skärmens högra sida och rulla ner till avsnittet 'Teman'.

Härifrån kan du välja från ett bibliotek med över 40 fördesignade teman för att omedelbart ge ditt formulär ett vackert utseende.

Därefter kan du skrolla ner till avsnittet 'Fältstilar' för att anpassa ditt formulär ytterligare.

Du kan välja storleken på dina formulärfält från rullgardinsmenyn och till och med ställa in deras kantstorlek och radie.

Därefter kan du ändra bakgrunds-, text- och kantfärgen på formulärfälten med hjälp av färgvalsverktyget.

Här kan du använda ditt varumärkes signaturfärger eller andra färger som används på resten av din WordPress-blogg för att skapa ett visuellt tilltalande formulär.

När du har gjort det, scrolla ner till avsnittet 'Etikettstilar', där du kan välja teckenstorlek för etiketterna från rullgardinsmenyn.

Därefter kan du också ändra teckenfärg för fältetiketter, underetiketter och felmeddelanden som kommer att visas i ditt formulär.

För att anpassa knappen i ditt formulär, scrolla ner till sektionen 'Knappstilar' och välj dess storlek från rullgardinsmenyn.

Du kan också ställa in en kantradie och ändra bakgrunds- och textfärg för formulärets skickaknapp.

När du har avslutat anpassningen av formuläret, klickar du helt enkelt på knappen 'Uppdatera' eller 'Publicera' högst upp för att spara dina inställningar.

Nu kan du besöka din WordPress-webbplats för att se det stylade formuläret i aktion.

Metod 2: Hur man stylar WordPress-formulär med CSS (avancerad anpassning)

Om du inte vill använda anpassningsalternativen som erbjuds av WPForms eller om du vill tillämpa olika anpassningar med CSS, kan du också använda ett anpassat CSS-utdrag.

Steg 1. Skapa ditt formulär med WPForms

För att börja måste du skapa ett formulär med WPForms. Det är det bästa WordPress-pluginet för kontaktformulär med en dra-och-släpp-byggare, som erbjuder över 2000 mallar för att hjälpa dig att snabbt skapa kontaktformulär, formulär för filuppladdning, registreringsformulär och RSVP-formulär.

För detaljerade instruktioner kan du se vår handledning om hur man skapar ett kontaktformulär i WordPress eller se metod 1.

När du har gjort det, låt oss hämta ditt formulär-ID – du behöver det för ditt anpassade kodutdrag.

För att göra detta, besök sidan WPForms » Alla formulär i WordPress-instrumentpanelen och kopiera WPForms ID-numret för formuläret som du vill styla.

Steg 2. Installera och aktivera WPCode

WPCode är det säkraste och enklaste pluginet för WordPress-kodavsnitt för att lägga till anpassad CSS för att styla formulär. Det har smart kodvalidering för att förhindra fel och erbjuder ett bibliotek med färdiga kodavsnitt för WordPress-anpassning.

Vi använder WPCode på WPBeginner för att lägga till och hantera anpassade kodavsnitt på våra företagswebbplatser. För att läsa mer om vår erfarenhet, se vår kompletta WPCode-recension.

Först kan du skapa ett WPCode-konto. På WPCode-webbplatsen klickar du på knappen 'Get WPCode Now', väljer en plan och följer instruktionerna på skärmen för att registrera dig.

Nu installerar och aktiverar vi WPCode-pluginet.

I din WordPress adminpanel, gå till Plugins » Lägg till plugin.

Därefter kan du använda sökfältet för att snabbt hitta WPCode-pluginet.

När du ser det klickar du på knappen ‘Install Now’ och ‘Activate.’

För detaljerade instruktioner, se vår nybörjarguide om hur man installerar ett WordPress-plugin.

Steg 3. Lägg till anpassad kodsnutt för att anpassa WordPress-formulär

Efter aktivering, besök sidan Kodsnuttar » + Lägg till snutt från WordPress-instrumentpanelen.

Håll sedan muspekaren över alternativet ‘Add Your Custom Code (New Snippet)’ och klicka på knappen ‘Use Snippet.’

Du kommer då att se en popup som ber dig att välja din kodtyp.

Låt oss välja ‘CSS Snippet.’

Detta tar dig till sidan 'Skapa anpassad snutt', där du kan börja med att skriva ett namn för din kodsnutt.

Därefter väljer du alternativet 'CSS-utdrag' från rullgardinsmenyn i det övre högra hörnet av skärmen.

Kopiera och klistra sedan in följande kod i rutan ‘Code Preview’. Taggar som !important talar om för webbläsaren att prioritera dessa stilar framför din temas standardinställningar:

#wpforms-0000 .wpforms-form {
    background-color: #ADD8E6 !important;
	font-family: 'Arial', sans-serif !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
    border-radius: 20px !important;
}

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

Därefter kan du ändra hexkoden, som #ADD8E6, för att matcha ditt varumärkes specifika färg. Du kan hitta dessa koder med hjälp av vilket gratis online-verktyg som helst för färgval.

Du kan också lägga till ett typsnitt som du väljer och konfigurera marginalen (utrymme inuti rutan) och rundningen på hörnen (rundade hörn) på formuläret genom att ändra kodavsnittet.

När du har gjort det, scrolla ner till avsnittet 'Insertion' och välj läget 'Auto Insert'.

Koden kommer automatiskt att köras på din webbplats vid aktivering.

Slutligen, scrolla tillbaka till toppen av sidan och växla omkopplaren till 'Aktiv'.

Klicka sedan på knappen 'Spara snutt' för att lagra dina inställningar

Nu kommer WordPress-formuläret automatiskt att anpassas enligt CSS-snutten, och du kan gå och visa det.

Men om du inte har lagt till formuläret på din webbplats ännu, öppna bara en sida eller ett inlägg i blockredigeraren.

När du är där, klicka på '+' -knappen i det övre vänstra hörnet för att öppna blockmenyn och lägg till WPForms-blocket.

Välj därefter formuläret som du stylade med CSS-snutten från rullgardinsmenyn i själva blocket.

Klicka slutligen på knappen ‘Uppdatera’ eller ‘Publicera’ för att spara dina inställningar.

Nu kan du besöka din WordPress-webbplats i ett inkognitofönster eller privat fönster för att se det anpassade formuläret i aktion, eftersom webbläsarcache ibland kan dölja nyligen gjorda ändringar.

Bonustips 🧑‍💻: Hur man enkelt skapar anpassade webbsidor

Du kan styla dina WordPress-formulär för att göra din webbplats mer attraktiv och visuellt intressant. Det är också möjligt att designa dina egna helt anpassade webbplatssidor med hjälp av SeedProd. Det är det bästa dra-och-släpp WordPress-sidbyggarpluginet för att skapa webbplatssidor och teman utan kod.

Vi har grundligt testat SeedProd för att se hur det jämför sig med andra lösningar. För att läsa mer om vår erfarenhet, se vår kompletta SeedProd-recension.

SeedProd har också färdiga mallar och webbplatskit, enkla anpassningsalternativ, färgpaletter och avancerade sidblock. Dessutom kan du enkelt bädda in dina WPForms-formulär i SeedProd-redigeraren.

För mer information kan du se vår handledning om hur man skapar en landningssida i WordPress.

Vanliga frågor om att anpassa och styla WordPress-formulär

Har du fortfarande frågor? Här är några av de vanligaste frågorna vi får från läsare – besvarade.

Vad kan jag anpassa i ett WordPress-formulär?

Du kan anpassa fält, layout, färger, typsnitt, etiketter, felmeddelanden och skicka-knappen för att matcha din webbplats design.

Behöver jag kodningskunskaper för att styla WordPress-formulär?

Nej. Med utmärkta plugins som WPForms kan du anpassa och styla formulär med inbyggda inställningar, ingen kod krävs.

Kan jag få mina formulär att matcha mitt webbplats varumärke?

Ja. Du kan använda dina varumärkesfärger, typsnitt och avstånd så att formuläret smälter naturligt in med ditt WordPress-tema.

Påverkar anpassning och styling av ett formulär hur det fungerar?

Visuella ändringar påverkar inte funktionaliteten. Se bara till att testa formuläret om du ändrar obligatoriska fält eller regler.

Kan jag ändra formulärstilen senare?

Absolut. Du kan uppdatera designen när som helst utan att bygga om formuläret från grunden.

Fler guider för att använda formulär i WordPress

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du anpassar och stylar dina WordPress-formulär.

Du kanske också vill se våra handledningar om:

• Hur man laddar upp filer från WordPress-formulär till Google Drive
• Hur låter användare ta livefoton och videor i WordPress-formulär
• Tips för att göra dina WordPress-formulär mer interaktiva
• Hur du automatiserar WordPress-formulär med n8n för att spara timmar av manuellt arbete
• Bästa Google Forms-alternativen (bättre funktioner + gratis)

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.