Så här Customize och Styling dina WordPress formulär (2 enkla metoder)

Om du har lagt till formulär på din webbplats är det en bra idé att anpassa dem så att de matchar webbplatsens design. Det kan hjälpa till att fånga människors uppmärksamhet, öka engagemanget och säkerställa en sömlös interaktion med din publik.

Oavsett om det är ett kontaktformulär, ett registreringsformulär eller en enkät kan det göra hela skillnaden om det matchar webbplatsens estetik.

Under årens lopp har vi lagt till olika formulär på vår webbplats och alltid anpassat dem så att de matchar våra varumärkesfärger. Detta förbättrar inte bara varumärkeskännedomen utan gör också formulären mer visuellt tilltalande. Som ett resultat av detta har vi märkt en ökning av antalet användare som fyller i formulären.

I den här artikeln kommer vi att visa dig hur du enkelt customize och stil WordPress formulär, steg för steg.

Varför Customize och Styling av 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.

Om du till exempel addar ett registreringsformulär till din website med hjälp av ett plugin för användarregistreringsformulär, så kommer du att se att layouten är lite tråkig. Detta kan Misslyckas med att genomföra din besökares uppmärksamhet och till och med avskräcka dem från att fylla i formuläret.

Genom att anpassa dina formulär kan du göra dem mer attraktiva genom att matcha dem med din 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.

Styling av formulär kan också öka din varumärkeskännedom bland användarna. You can for instance use your website logo and signature company colors to make your form more memorable and effective.

Med detta sagt, låt oss se hur du enkelt customize och styla dina WordPress-formulär, steg för steg. Vi kommer att täcka två metoder i detta post, och du kan använda snabblänkarna under för att hoppa till den du vill använda:

Metod 1: Hur man Customize och Styling WordPress Formulär Med WPForms (Kod Gratis Metod)

Du kan enkelt customize och styla dina WordPress-formulär med WPForms. Det är det bästa tillägget för kontaktformulär för WordPress på marknaden, och används av över 6 miljoner websites.

WPForms levereras med en dra-och-släpp-byggare som gör det superenkelt att skapa alla typer av formulär. Det har till och med ett bibliotek med färdiga teman och inbyggda anpassningsalternativ för ditt formulär som inte kräver någon kodning.

För att lära dig mer, se vår detaljerade WPForms review.

Först måste du installera och aktivera WPForms plugin. Detaljerade instruktioner finns i vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

Efter aktivering, besök WPForms ” Settings page från WordPress admin sidebar för att enter din license key.

You can find this information in your account on the WPForms website.

När du har gjort det, head över till WPForms ” Add New vy från WordPress dashboard.

Detta tar dig till sidan ”Select a Template”, där du kan börja med att skriva in ett namn för ditt formulär. Efter det kan du välja vilken template du vill och klicka på knappen ”Use Template” under den.

I den här tutorialen kommer vi att skapa och lägga till ett enkelt kontaktformulär på vår website.

Detta kommer att starta mallen i WPForms form builder, där du kommer att se en form preview till höger och formulärfält i den vänstra colonnen.

Härifrån kan du drag and drop vilket formulärfält du vill till formuläret enligt vad du gillar. Du kan också ordna om eller ta bort fält.

Detaljerade anvisningar finns i vår tutorial om hur du skapar ett kontaktformulär i WordPress.

När du är klar med ditt formulär klickar du bara på knappen ”Save” högst upp för att lämna form buildern.

Efter det måste du besökasidan WPForms Settings från WordPress instrumentpanel och klicka på kryssrutan ”Use 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 ”Save Changes” för att spara dina inställningar.

Öppna sedan sidan eller posten där du vill lägga till formuläret som du just skapade.

Härifrån måste du klicka på knappen add 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 som du vill lägga till på din webbplats från dropdown-menyn i själva blocket.

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

För att göra detta måste du öppna panelen Block på höger sida av vyn och rulla ner till sektionen ”Themes”. Härifrån kan du välja från ett bibliotek med 40+ fördesignade teman för att omedelbart ge ditt formulär ett beautiful utseende.

Därefter kan du rulla ner till avsnittet ”Field Styles” för att anpassa ditt formulär ytterligare.

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

Därefter kan du ändra bakgrundsfärg, text och kantfärg för formulärfälten med hjälp av färgväljarverktyget.

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 rullar du ner till sektionen ”Label Styles”, där du kan välja storleken på etikettens font från dropdown-menyn.

Efter det kan du också ändra färgen på fonten för fältetiketter, underetiketter och error-meddelanden som kommer att visas i ditt formulär.

Om du vill anpassa knappen i formuläret bläddrar du ner till avsnittet ”Button Styles” och väljer storlek i rullgardinsmenyn.

Du kan också ställa in en radius för kanten och ändra bakgrundsfärg och textfärg för formulärets knapp Submit.

När du är klar med att customize formuläret klickar du bara på knappen ’Update’ eller ’Publicera’ högst upp för att lagra dina inställningar.

Nu kan du besöka din site för att view det stylade WordPress-formuläret i action.

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

Om du inte vill använda alternativen för customize som erbjuds av WPForms eller om du vill tillämpa olika anpassningar med CSS, kan du också använda ett anpassat CSS-snippet.

För att göra detta måste du först skapa ett formulär med WPForms, som är #1 form builder på marknaden.

Det är en drag and drop builder som levereras med många templates som du kan använda för att skapa kontaktformulär, formulär för filuppladdning, registreringsformulär, RSVP-formulär och mycket mer.

Detaljerade instruktioner hittar du i vår tutorial om hur du skapar ett kontaktformulär i WordPress eller i metod 1.

När du har skapat ett formulär är det dags att customize det med hjälp av WPCode, som är det bästa WordPress code snippets plugin på marknaden.

Det är det enklaste och säkraste sättet att add to CSS-kod för Styling av ditt WordPress-formulär.

Först måste du installera och aktivera WPCode plugin. För detaljerade instruktioner kan du läsa vår guide för nybörjare om hur du installerar ett plugin för WordPress.

Efter aktivering, besök Code Snippets ” + Add Snippet page från WordPress dashboard.

När du är där klickar du bara på knappen ”Use Snippet” under alternativet ”Add Your Custom Code (New Snippet)”.

Detta tar dig till sidan ”Create Custom Snippet”, där du kan börja med att skriva ett namn för ditt code snippet.

Därefter väljer du alternativet ’CSS Snippet’ från dropdown-menyn i det högra hörnet av vyn.

Därefter kopierar du och klistrar in följande kod i boxen ”Code Preview”:

#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 standard shortcode högst upp med shortcode för det formulär som du vill customize.

För att göra detta, besök WPForms ” All Forms page från WordPress dashboard och kopiera WPForms ID:n för det formulär som du vill styla.

Därefter klistrar du in ID:n för formuläret bredvid raden wpforms- i koden. Nu kommer all kod att exekveras endast i detta specifika formulär.

Därefter kan du enkelt ändra hexkoden för bakgrundsfärgen, add to en fontfamilj efter eget val och konfigurera formulärets padding och border radius genom att ändra code snippet.

När du har gjort det rullar du ner till sectionen ”Insertion” och väljer läget ”Auto Insert”.

Koden kommer automatiskt att aktiveras på din site vid aktivering.

Slutligen rullar du tillbaka högst upp på sidan och togglar omkopplaren till ”Active”.

Därefter klickar du på knappen ”Save Snippet” för att lagra dina settings

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

Men om du inte har lagt till formuläret på din website ännu, öppna bara en page eller post i block editor.

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

Därefter väljer du formuläret som du stylade med hjälp av CSS-snippet från dropdown-menyn i själva blocket.

Slutligen klickar du på knappen ”Update” eller ”Publicera” för att lagra dina settings.

Nu kan du besöka din WordPress site för att se det customize formuläret i action.

Bonus: Hur man skapar Customize Website Pages

Styling WordPress formulär är bara ett sätt att göra din site mer attraktiv och visuellt intressant. Du kan också designa dina egna helt customize website pages med SeedProd.

Det är det bästa WordPress sidbyggarpluginet på marknaden. Det gör att du kan skapa attraktiva sidor utan att använda någon kod.

SeedProd levereras med en drag and drop builder, färdiga mallar och site kits, enkla customize alternativ, färgpaletter och avancerade page blocks. Dessutom kan du enkelt embeda dina WPForms-formulär i SeedProd editor.

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 snart-sida och så mycket mer.

För mer details, you can see our tutorial on how to create a landing page in WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du customize och stylar dina WordPress-formulär. Du kanske också vill se vår tutorial om hur du addar ett fält för kupongkod till WordPress-formulär och vår jämförelse av WPForms vs. Gravity Forms vs. Formidable Forms.

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.