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

Undrar du hur du ska utforma dina WordPress-formulär?

Du kan customize dina formulär för att matcha designen på din website. Detta kan skapa ett mer visuellt tilltalande och professionellt utseende för din site och förbättra användarupplevelsen.

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 addar ett formulär till din WordPress website med hjälp av ett plugin, kommer du att notera att layouten 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 customize dina formulär kan du matcha dem med ditt WordPress theme och din branding för att göra dem mer attraktiva.

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 kommer med en drag and drop builder som gör det superenkelt att skapa alla typer av formulär du vill ha. Dessutom har det till och med ett bibliotek med pre-built teman och built-in customize alternativ 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öka WPForms ” Settings page från WordPress dashboard och klicka på ”Use Modern Markup” checkboxen. Om du Misslyckas med att göra detta, kommer WPForms customomize-inställningar inte att vara available i block editor.

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 ”Field Styles” section för att ytterligare customize ditt formulär.

You can select a size for your form fields from the dropdown menu and even set a border size and radius for them.

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.

För att customize knappen i ditt formulär måste du rulla ner till sektionen ”Button Styles” och välja storlek från dropdown-menyn.

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 den bästa WordPress page builder plugin på marknaden som tillåter dig att skapa attraktiva pages 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.