Vill du ändra utseendet på dina formulär? Ur lådan kan dina formulär se ganska enkla ut på din webbplats. Lyckligtvis kan WPForms enkelt anpassas med CSS i ditt WordPress-tema. I den här artikeln kommer vi att visa dig hur du designar kontaktformulär i WordPress.
Om du inte vet hur man skriver CSS-kod, oroa dig inte. Vi kan fortfarande guida dig genom att anpassa dina formulärstilar. Följ bara vår handledning om hur man designar WPForms utan att känna till någon kod.
Startande
Det första du behöver göra är att installera och aktivera WPForms plugin. Här är en steg-för-steg-guide för hur du installerar ett WordPress-plugin.
Dessutom måste du skapa ett formulär. Se vår handledning om hur du skapar ett enkelt kontaktformulär som ett exempel för att komma igång. Här är vårt formulär:
Ditt formulär kan se något annorlunda ut eftersom det kommer att ärva en del av dess stil från ditt WordPress-tema. Förutom det är det väldigt grundläggande.
WPForms genererar kod för varje formulär för att ge det dess grundläggande stil. För många användare kommer detta att räcka, eftersom standardstilen kommer att vara diskret och inte distrahera från designen på din webbplats.
Men om du vill skapa ett unikt utseende för dina formulär måste du lägga till din egen CSS-kod för att anpassa stilen.
Det finns 2 sätt att göra detta:
- Designa alla WPForms med samma kod
- Style en enda form individuellt
Vi visar dig hur du gör båda och delar sedan några exempel för din inspiration.
1. Designa kontaktformulär i WordPress
Varje formulär som skapas med WPForms använder .wpforms-form CSS-klassen i formulärets HTML-tagg. Du kan använda den klassen för att utforma WPForms utan att påverka andra formulär på din webbplats, till exempel din kommentarsformulär under varje inlägg.
Varje enskilt formulärelement (fält, knappar, etc.) har också ett korrekt ID och CSS-klass kopplat till sig, som du kan använda för mer exakt inriktning.
I det här exemplet har vi formaterat våra formuläretiketter och textområdesbakgrund med följande kod:
/** WPFORMS WPFORMSLABEL **/
.wpforms-form label{
color:rgb(8, 152, 166)!important;
}
/** WPFORMS Input Textarea **/
.wpforms-form input, .wpforms-form textarea{
background-color:rgba(8, 152, 166, 0.39)!important;
}
/** WPFORMS BUTTON COLOR **/
.wpforms-form button{
background-color:rgb(8, 152, 166)!important;
}
/** WPFORMS SUBMIT BUTTON **/
button.wpforms-submit{
color:#FFFFFF!important;
background-color:rgb(242, 163, 8)!important;
}
/** WPFORMS SUBMIT BUTTON Hover **/
button.wpforms-submit:hover{
color:rgb(255, 255, 255)!important;
background-color:rgb(8, 168, 191)!important;
}
Slutresultatet skulle se ut så här:
Du har flera alternativ för hur du inkluderar CSS-koden som nämns ovan. Först kan du lägga till det i WordPress genom att gå till Utseende »Anpassa» Ytterligare CSS. Lägg till din CSS-kod på den här platsen och spara dina ändringar.
Om du föredrar det kan du placera den här koden i ditt barntemas stilmall. Du kan också lägga till den här koden på din webbplats med ett plugin som Simple CSS.
2. Designa individuella kontaktformulär
En sak att tänka på med CSS vi använde ovan är att den kommer att tillämpas på alla formulär skapade med WPForms på din webbplats. Om du använder flera kontaktformulär och vill utforma var och en av dem på olika sätt, måste du använda det unika ID som genereras av WPForms för varje formulär.
Öppna bara en sida som innehåller formuläret du vill ändra. Flytta musen till det första fältet i formuläret, högerklicka » Inspektera element.
Webbläsarens skärm delas och du kommer att se sidans källkod. I källkoden måste du hitta startraden för formulärkoden.
Som du kan se i skärmdumpen ovan börjar vår kontaktformulärkod med raden:
El atributo id es un identificador único generado por WPForms para este formulario en particular.
Usaremos esta ID en nuestro CSS para diseñar nuestro formulario de contacto. Reemplazaremos .wpforms en nuestro primer fragmento de CSS con # wpforms-14.
/**Form Background Color**/ div#wpforms-14 {background-color: rgb(242, 163, 8) !important} /** WPFORMS WPFORMSLABEL **/ .wpforms-form label{ color:rgb(8, 152, 166)!important; } /** WPFORMS Input Textarea **/ .wpforms-form input, .wpforms-form textarea{ background-color:rgba(8, 152, 166, 0.39)!important; } /** WPFORMS BUTTONCOLOR **/ .wpforms-form button{ background-color:rgb(8, 152, 166)!important; } /** WPFORMS SUBMITBUTTON **/ button.wpforms-submit{ color:#FFFFFF!important; background-color:rgb(242, 163, 8)!important; } /** WPFORMS SUBMITBUTTON Hover **/ button.wpforms-submit:hover{ color:rgb(255, 255, 255)!important; background-color:rgb(8, 168, 191)!important; }Det resulterande formuläret skulle visa en orange bakgrund endast på det här formuläret, men inte på andra formulär på resten av din webbplats.
Exempel på kontaktformulär
Du är på väg att ha ett anpassat kontaktformulär. Du kan uppmuntra dina besökare att fylla i ditt kontaktformulär genom att ge det en attraktiv och iögonfallande stil.
Har du fastnat för stilidéer? Se några exempel vi har hittat på webben:
Rent och färgglatt
Neil Patels form är ren och innehåller en knappfärg som matchar webbsidans färger. Varje fält har också tagit bort gränserna runt inmatningsrutan. En layout med 2 kolumner har också implementerats för de flesta frågor på formuläret.
Färgaccenter
Sweet Grace Ministries designade sitt kontaktformulär för att inkludera accentfärg i formulärfälttitlarna såväl som i rullgardinsmenyn.
Typsnitt
GirlBoss ändrade typsnittsstilen på sin skicka-knapp.
Symboler kontra ordetiketter
UnMarketing har inkluderat några iögonfallande symboler som formuläretiketter.
Slutgiltiga tankar
Nu är du redo! Vi hoppas att den här artikeln hjälpte dig att lära dig hur du designar kontaktformulär i WordPress.
Vill du ha ett annat sätt att uppmuntra dina besökare att fylla i ditt kontaktformulär? Kolla in vår guide om hur du skapar popup-formulär i WordPress.
Vad väntar du på? Kom igång idag med det mest kraftfulla WordPress-formulärpluginet.
Har du ett bra kontaktformulärexempel? Dela en länk i kommentarerna nedan.
