Slik utformer du kontaktskjema 7-skjemaer i WordPress

Med over 1 million aktive brukere er Contact Form 7 en av de mest populære kontaktskjema-pluginsene for WordPress. Deres største ulempe er at utsiden av boksen du legger til er veldig ren. Heldigvis kan kontaktskjema 7 enkelt utformes ved hjelp av CSS i WordPress-temaet. I denne artikkelen vil vi vise deg hvordan du styler kontaktskjema 7-skjemaer i WordPress.


Merk: Vi anbefaler ikke kontaktformular 7-plugin lenger. I stedet anbefaler vi WPForms, som er den nybegynnervennlige kontaktskjema-plugin. Du kan også laste ned WPForms Lite gratis.

Vi har en trinnvis guide for hvordan du oppretter kontaktskjema i WordPress.

Videoopplæring

Abonner på WPBeginner

Hvis du ikke liker videoen eller trenger flere instruksjoner, kan du fortsette å lese.

Starter

Vi antar at du allerede har installert Plugin 7-plugin og har opprettet ditt første kontaktskjema. Neste trinn er å kopiere kortkoden for kontaktskjemaet ditt og lime det inn i et WordPress-innlegg eller på en side der du ønsker at skjemaet ditt skal vises.

Av hensyn til denne artikkelen har vi brukt standard kontaktskjema og lagt det til på en WordPress-side. Slik så kontaktskjemaet ut på testsiden vår.

Standard kontaktskjema 7-skjema på et WordPress-nettsted ved å bruke standard WordPress-tema

Som du kan se at kontaktskjemaet arver noen formstiler fra WordPress-temaet ditt. Bortsett fra at det er veldig grunnleggende.

Vi vil style kontaktskjema 7-skjemaer ved hjelp av CSS. All CSS går inn på stilbladet ditt eller temaet ditt.

Styling Kontaktformular 7 skjemaer i WordPress

Kontaktformular 7 genererer en veldig nyttig og standard kompatibel kode for skjemaene. Hvert element i skjemaet har en riktig ID- og CSS-klasse tilknyttet.

Hvert kontaktskjema bruker CSS-klassen .wpcf7 som du kan bruke til å style skjemaet ditt.

I dette eksemplet bruker vi en Google-font Lora i inputfeltene våre. Se hvordan du legger til Google-skrifter i WordPress.

div.wpcf7 {
bakgrunnsfarge: #fbefde;
kant: 1px solid # f28f27;
padding: 20 piksler;
}
.wpcf7 input [type ="tekst"],
.wpcf7 input [type ="e-post"],
.wpcf7 textarea {
bakgrunn: # 725f4c;
farge: #fff;
font-family: lora, sans-serif;
font-style: italic;
}
.wpcf7 input [type ="sende inn"],
.wpcf7 input [type ="knapp"] {
background-color: # 725f4c;
bredde: 100%;
tekst-Justering: center;
text-transform: store bokstaver;
}

Slik så kontaktskjemaet vårt ut etter bruk av denne CSS.

Styling Kontaktformular 7-skjemaer med CSS i WordPress

Styling Flere kontaktskjema 7 skjemaer

Problemet med CSS vi brukte ovenfor er at det vil bli brukt på alle kontaktskjema 7-skjemaer på nettstedet ditt. Hvis du bruker flere kontaktskjemaer og ønsker å style dem annerledes, må du bruke ID-en generert av kontaktskjema 7 for hvert skjema.

Bare åpne en side som inneholder skjemaet du vil endre. Ta musen til det første feltet i skjemaet, høyreklikk og velg Kontroller element. Nettleserskjermen deler seg, og du vil se kildekoden til siden. I kildekoden må du finne startlinjen til skjemakoden.

Finne element-ID for kontaktskjemaet ditt

Som du kan se på skjermdumpen over, starter kontaktskjema-koden vår med linjen:

ID-attributtet er en unik identifikator generert av kontaktskjema 7 for dette skjemaet. Det er en kombinasjon av form-id og post-id der dette skjemaet legges til.

Vi vil bruke denne IDen i CSS-en vår for å utforme kontaktskjemaet vårt. Vi erstatter .wpcf7 i vår første CSS-kodebit med # wpcf7-f201-p203-o1.

div # wpcf7-F201-P203-o1 {
bakgrunnsfarge: #fbefde;
kant: 1px solid # f28f27;
padding: 20 piksler;
}
# wpcf7-f201-p203-o1 input [type ="tekst"],
# wpcf7-f201-p203-o1 input [type ="e-post"],
# wpcf7-f201-p203-o1 tekstområde {
bakgrunn: # 725f4c;
farge: #fff;
font-family: lora, "Åpne Sans", sans serif;
font-style: italic;
}
# wpcf7-f201-p203-o1 input [type ="sende inn"],
# wpcf7-f201-p203-o1 input [type ="knapp"] {
background-color: # 725f4c;
bredde: 100%;
tekst-Justering: center;
text-transform: store bokstaver;
}

Styling Kontaktformular 7 skjemaer med CSS Hero

Mange WordPress nybegynnere har ingen erfaring med å skrive CSS, og de ønsker ikke å bruke tid på å lære det. Heldigvis er det en fantastisk løsning for nybegynnere som lar deg ikke bare utforme kontaktskjemaet ditt, men nesten alle aspekter av WordPress-nettstedet ditt.

Bare installer og aktiver CSS Hero-plugin og gå til siden som inneholder skjemaet. Klikk på CSS Hero-verktøylinjen, og klikk deretter på elementet du vil style. CSS Hero vil gi deg et enkelt brukergrensesnitt for å redigere CSS uten å skrive noen kode.

Styling Kontaktformular 7 skjema ved hjelp av CSS Hero

Se vår komplette gjennomgang av CSS Hero og hvordan du bruker den til å style noe på ditt WordPress-nettsted. Du kan bruke CSS Hero-kupongkode WPBeginner for å få eksklusiv 34% rabatt.

Det er alt vi håper denne artikkelen hjalp deg med å lære hvordan du styler kontaktskjema 7-skjemaer i WordPress. Det kan også være lurt å se guiden vår om hvordan du legger til en kontaktskjema popup 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