Ett vanligt, klumpigt WordPress-formulär kan få även den bäst designade webbplatsen att känna sig 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?
När du lägger till ett formulär på din WordPress-webbplats med hjälp av ett plugin, kommer du att märka att dess layout vanligtvis är enkel och vanlig.
Till exempel, om du lägger till ett registreringsformulär på din webbplats med hjälp av ett plugin för användarregistrering, då 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 stiliserade WordPress-formulär är lättare att navigera och kan uppmuntra fler användare att fylla i dem.
Stilar på formulär kan också öka din varumärkeskännedom bland användarna. Du kan till exempel använda din webbplatslogotyp och signaturfärger för att göra ditt formulär mer minnesvärt och effektivt.
Med det sagt, vi visar 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:
- Metod 1: Hur man anpassar och stylar WordPress-formulär med WPForms (kodfri metod)
- Metod 2: Hur man stylar WordPress-formulär med CSS (avancerad anpassning)
- Bonustips 🧑💻: Hur man enkelt skapar anpassade webbsidor
Låt oss börja!
Metod 1: Hur man anpassar och stylar WordPress-formulär med WPForms (kodfri metod)
Du kan enkelt anpassa och styla dina WordPress-formulär med hjälp av WPForms. Det är den bästa WordPress-kontaktformulärpluginet på marknaden, som används av över 6 miljoner webbplatser.
Vi använder själva WPForms för många formulärtyper, och du kan läsa mer om pluginet i vår detaljerade WPForms-recension.
WPForms levereras med en dra-och-släpp-byggare som gör det superenkelt att skapa alla typer av formulär. Den har till och med ett stort bibliotek med över 2 000 färdiga teman och inbyggda anpassningsalternativ för ditt formulär som inte kräver någon kodning.
Den har också AI-verktyg som hjälper dig att skapa anpassade formulär från grunden med en enkel prompt och generera flera val för fält som rullgardinsmenyer, radioknappar eller kryssrutor.
Först måste du installera och aktivera pluginet WPForms. För detaljerade instruktioner, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
📝 Notera: WPForms har också en gratisversion som du kan använda för den här handledningen. Vi kommer dock att använda premiumpluginet eftersom det har fler inställningar och alternativ.
Besök sidan WPForms » Inställningar från WordPress admin sidofält efter aktivering för att ange din licensnyckel.
Du kan hitta denna information i ditt konto på WPForms webbplats.
När du har gjort det, gå till skärmen WPForms » Lägg till ny från WordPress-instrumentpanelen.
Detta tar dig till sidan 'Välj en mall', där du kan börja med att skriva ett namn för ditt formulär. Därefter kan du välja vilken formulärmall du vill och klicka på knappen 'Använd mall' under den.
För den här handledningens skull 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.
Därefter måste du besöka sidan WPForms Inställningar från WordPress-instrumentpanelen och klicka på kryssrutan 'Använd modern markup'. Om du inte gör detta kommer WPForms anpassningsinställningar inte att vara tillgängliga i blockredigeraren.
Glöm inte att klicka på knappen 'Spara ändringar' för att spara dina inställningar.
Öppna sedan sidan eller inlägget där du vill lägga till formuläret som du precis skapade.
Härifrån behöver du klicka på knappen 'lägg till block' '+' i det övre vänstra hörnet för att öppna blockmenyn och lägga till WPForms-blocket.
När du har gjort det, väljer du helt enkelt det formulär du vill lägga till på din webbplats från rullgardinsmenyn i själva blocket.
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-avsnitt.
För att göra detta måste du först skapa ett formulär med WPForms, som är den främsta formulärbyggaren på marknaden.
Den använder en dra-och-släpp-byggare och levereras med över 2 000 mallar som hjälper dig att snabbt skapa formulär, inklusive kontaktformulär, filuppladdningsformulär, registreringsformulär, RSVP-formulär, och mycket mer!
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 skapat ett formulär är det dags att anpassa det med hjälp av WPCode. Det är det bästa pluginet för kodavsnitt för WordPress på marknaden och erbjuder det enklaste och säkraste sättet att lägga till CSS-kod för att styla ditt WordPress-formulär.
Vissa av våra företagswebbplatser använder WPCode för att lägga till och hantera anpassade kodavsnitt, och det har fungerat exceptionellt bra. Se vår kompletta WPCode-recension för detaljer om verktyget.
Först måste du installera och aktivera pluginet WPCode. För detaljerade instruktioner kan du se vår nybörjarguide om hur man installerar ett WordPress-plugin.
📝 Notera: WPCode har en gratis version som du kan använda för den här handledningen. Vi kommer dock att använda premiumplanen.
Efter aktivering, besök sidan Kodsnuttar » + Lägg till snutt från WordPress-instrumentpanelen.
När du är där klickar du bara på knappen 'Använd kodavsnitt' under alternativet 'Lägg till din anpassade kod (nytt kodavsnitt)'.
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 'Kodförhandsgranskning':
#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;
}
När du har gjort det måste du ersätta standardkortkoden högst upp med kortkoden för det formulär du vill anpassa.
För att göra detta, besök sidan WPForms » Alla formulär från WordPress-instrumentpanelen och kopiera WPForms ID-numret för formuläret du vill styla.
Därefter klistrar du in formulärets ID-nummer bredvid raden wpforms- i koden. Nu kommer all kod att köras endast i detta specifika formulär.
Därefter kan du enkelt ändra hexkoden för bakgrundsfärgen, lägga till ett typsnitt enligt ditt val och konfigurera stoppningen och kantradierna för 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.
Om du dock inte har lagt till formuläret på din webbplats ännu, öppna då 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 för att se det anpassade formuläret i aktion.
Bonustips 🧑💻: Hur man enkelt skapar anpassade webbsidor
Att styla WordPress-formulär är bara ett sätt att göra din webbplats mer attraktiv och visuellt intressant. Du kan också designa dina egna helt anpassade webbsidor med hjälp av SeedProd.
Det är den bästa sidbyggarplugin för WordPress på marknaden. Det låter dig skapa attraktiva sidor utan att använda någon kod.
Några av våra partnervarumärken har byggt hela sina webbplatser med SeedProd. Det är en kraftfull dra-och-släpp-byggare som går utöver bara landningssidor! Läs mer om verktyget i 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.
🌟 Proffstips: Du kan till och med använda SeedProd för att skapa en viral väntelista-sida, en försäljningssida, en underhållssida, en kommande-sida, och mycket mer.
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år handledning om hur du lägger till ett fält för kupongkoder i WordPress-formulär och vår jämförelse av WPForms vs. Gravity Forms vs. Formidable Forms.
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.
Mrteesurez
En del av anledningarna till att jag gillar WPForms är det faktum att det är flexibelt och mycket anpassningsbart med inbyggda mallar eller genom att använda CSS-kod, man behöver bara identifiera ID:t för det specifika formulär som man anpassar.
Ett väldesignat och anpassat formulär tilltalar användare och positionerar ditt formulär som professionellt.
Tack för guiden.
WPBeginner Support
Varsågod!
Admin
Jiří Vaněk
Tack för handledningen. Jag lade till ett kontaktformulär på webbplatsen med WPForms och lämnade det i sitt standardläge. Egentligen tänkte jag inte ens att jag kunde anpassa det på något sätt. Tack vare den här artikeln fick jag flera idéer om hur jag kan göra det mer grafiskt tilltalande. Tack
Ralph
Tack för den här guiden.
Nu kommer mitt kontaktformulär att se bättre och mer professionellt ut än standard vit tomrum med ljusgrå linjer. Detta kommer att höja nivån på min webbdesign!
WPBeginner Support
Glad we could help improve your site’s design
Admin