Så utformar du kontaktformulär 7-formulär i WordPress

Med över 1 miljon aktiva användare är Kontaktformulär 7 en av de mest populära pluginprogrammen för kontaktformulär för WordPress. Deras största nackdel är att de ut ur lådan du lägger till är väldigt enkla. Tack och lov kan kontaktformulär 7 enkelt utformas med hjälp av CSS i ditt WordPress-tema. I den här artikeln kommer vi att visa dig hur du formaterar kontaktformulär 7-formulär i WordPress.


Notera: Vi rekommenderar inte kontaktformulär 7-plugin längre. Istället rekommenderar vi WPForms, som är den mest nybörjare vänliga kontaktformuläret plugin. Du kan också ladda ner WPForms Lite gratis.

Vi har en steg för steg-guide för hur du skapar kontaktformulär i WordPress.

Videohandledning

Prenumerera på WPBeginner

Om du inte gillar videon eller behöver fler instruktioner fortsätter du att läsa.

Komma igång

Vi antar att du redan har installerat kontaktformulär 7-plugin och har skapat ditt första kontaktformulär. Nästa steg är att kopiera kortkoden för ditt kontaktformulär och klistra in det i ett WordPress-inlägg eller på en sida där du vill att ditt formulär ska visas.

För den här artikelns skull har vi använt standardkontaktformuläret och lagt till det på en WordPress-sida. Så här såg kontaktformuläret ut på vår testsida.

Standardformulär för kontaktformulär 7 på en WordPress-webbplats med standard WordPress-tema

Som du kan se att kontaktformuläret ärver vissa formstilar från ditt WordPress-tema. Bortsett från att det är mycket grundläggande.

Vi kommer att utforma formulär för kontaktformulär 7 med hjälp av CSS. Allt CSS går in i ditt temat eller ditt barnetemas stilark.

Styling Kontaktformulär 7 formulär i WordPress

Kontaktformulär 7 genererar en mycket användbar och standardkompatibel kod för formulärerna. Varje element i formen har en korrekt ID- och CSS-klass associerad med den.

Varje kontaktformulär använder CSS-klassen .wpcf7 som du kan använda för att utforma ditt formulär.

I det här exemplet använder vi ett Google-teckensnitt Lora i våra inmatningsfält. Se hur du lägger till Google-teckensnitt i WordPress.

div.wpcf7 {
bakgrundsfärg: #fbefde;
kant: 1px fast # f28f27;
padding: 20px;
}
.wpcf7 ingång [typ ="text"],
.wpcf7 ingång [typ ="e-post"],
.wpcf7 textarea {
Bakgrund: # 725f4c;
färg: #fff;
font-family: lora, sans-serif;
font-style: italic;
}
.wpcf7 ingång [typ ="Skicka in"],
.wpcf7 ingång [typ ="knapp"] {
background-color: # 725f4c;
bredd: 100%;
text-align: center;
text-trans: versaler;
}

Så här såg vårt kontaktformulär ut efter att ha använt detta CSS.

Styling Kontaktformulär 7-formulär med CSS i WordPress

Styling flera kontaktformulär 7 formulär

Problemet med CSS som vi använde ovan är att det kommer att tillämpas på alla kontaktformulär 7-formulär på din webbplats. Om du använder flera kontaktformulär och vill utforma dem annorlunda måste du använda ID som genereras av kontaktformulär 7 för varje formulär.

Öppna helt enkelt en sida som innehåller det formulär du vill ändra. Ta musen till det första fältet i formuläret, högerklicka och välj Inspektera element. Webbläsarens skärm kommer att delas och du kommer att se källkoden på sidan. I källkoden måste du hitta startraden för formulärkoden.

Hitta element-ID för ditt kontaktformulär

Som du kan se på skärmdumpen ovan, börjar vår kontaktformulärkod med raden:

ID-attributet är en unik identifierare som genereras av kontaktformulär 7 för den här formen. Det är en kombination av form-id och post-id där denna form läggs till.

Vi kommer att använda detta ID i vår CSS för att utforma vårt kontaktformulär. Vi kommer att ersätta .wpcf7 i vårt första CSS-utdrag med # wpcf7-f201-p203-o1.

div # wpcf7-F201-P203-O1 {
bakgrundsfärg: #fbefde;
kant: 1px fast # f28f27;
padding: 20px;
}
# wpcf7-f201-p203-o1 ingång [typ ="text"],
# wpcf7-f201-p203-o1 ingång [typ ="e-post"],
# wpcf7-f201-p203-o1 textarea {
Bakgrund: # 725f4c;
färg: #fff;
font-family: lora, "Öppna Sans", sans serif;
font-style: italic;
}
# wpcf7-f201-p203-o1 ingång [typ ="Skicka in"],
# wpcf7-f201-p203-o1 ingång [typ ="knapp"] {
background-color: # 725f4c;
bredd: 100%;
text-align: center;
text-trans: versaler;
}

Styling Kontaktformulär 7-formulär med CSS Hero

Många WordPress-nybörjare har ingen erfarenhet av att skriva CSS, och de vill inte spendera tid på att lära sig det. Lyckligtvis finns det en underbar lösning för nybörjare som gör att du inte bara kan utforma ditt kontaktformulär utan nästan alla aspekter av din WordPress-webbplats.

Installera och aktivera CSS Hero-plugin och gå till sidan med ditt formulär. Klicka på CSS Hero-verktygsfältet och klicka sedan på det element du vill utforma. CSS Hero kommer att ge dig ett enkelt användargränssnitt för att redigera CSS utan att skriva någon kod.

Styling Kontaktformulär 7 Form med hjälp av CSS Hero

Se vår fullständiga recension av CSS Hero och hur du använder den för att utforma allt på din WordPress-webbplats. Du kan använda CSS Hero-kupongkod WPBeginner för att få exklusiv 34% rabatt.

Det är allt vi hoppas att den här artikeln hjälpte dig att lära dig att utforma kontaktformulär 7-formulär i WordPress. Du kanske också vill se vår guide om hur du lägger till en popup-kontaktformulär i WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map