Contactformulier 7-formulieren opmaken in WordPress

Met meer dan 1 miljoen actieve gebruikers is Contact Form 7 een van de meest populaire contactformulier-plug-ins voor WordPress. Hun grootste nadeel is dat de kant-en-klare vormen die u toevoegt er heel eenvoudig uitzien. Gelukkig kan Contactformulier 7 eenvoudig worden opgemaakt met CSS in uw WordPress-thema. In dit artikel laten we u zien hoe u contactformulier 7-formulieren in WordPress opmaakt.


Notitie: We raden de contactformulier 7-plug-in niet meer aan. In plaats daarvan raden we WPForms aan, de meest beginnersvriendelijke plug-in voor contactformulieren. U kunt WPForms Lite ook gratis downloaden.

We hebben een stapsgewijze handleiding voor het maken van een contactformulier in WordPress.

Video-instructies

Abonneer u op WPBeginner

Als je de video niet leuk vindt of meer instructies nodig hebt, lees dan verder.

Ermee beginnen

We gaan ervan uit dat je de Contact Form 7-plug-in al hebt geïnstalleerd en je eerste contactformulier hebt gemaakt. De volgende stap is om de shortcode voor uw contactformulier te kopiëren en deze in een WordPress-bericht of een pagina te plakken waar u uw formulier wilt laten verschijnen.

Omwille van dit artikel hebben we het standaard contactformulier gebruikt en dit toegevoegd aan een WordPress-pagina. Zo zag het contactformulier eruit op onze testsite.

Standaard contactformulier 7-formulier op een WordPress-site met standaard WordPress-thema

Zoals u kunt zien, neemt het contactformulier enkele formulierstijlen over van uw WordPress-thema. Afgezien daarvan is het erg eenvoudig.

We zullen Contact Form 7-formulieren stylen met behulp van CSS. Alle CSS gaat in het stijlblad van uw thema of kindthema.

Styling Contactformulier 7 Formulieren in WordPress

Contactformulier 7 genereert een zeer nuttige en standaard conforme code voor de formulieren. Elk element in het formulier heeft een bijbehorende ID en CSS-klasse.

Elk contactformulier gebruikt de CSS-klasse .wpcf7 die u kunt gebruiken om uw formulier op te maken.

In dit voorbeeld gebruiken we een Google-lettertype Lora in onze invoervelden. Bekijk hoe u Google-lettertypen toevoegt in WordPress.

div.wpcf7 {
achtergrondkleur: #fbefde;
border: 1px solid # f28f27;
opvulling: 20px;
}
.wpcf7 invoer [type ="tekst"],
.wpcf7 invoer [type ="e-mail"],
.wpcf7 textarea {
achtergrond: # 725f4c;
kleur: #FFF;
font-family: lora, sans-serif;
lettertype: cursief;
}
.wpcf7 invoer [type ="indienen"],
.wpcf7 invoer [type ="knop"] {
achtergrondkleur: # 725f4c;
breedte: 100%;
text-align: center;
text-transform: hoofdletters;
}

Zo zag ons contactformulier eruit na het toepassen van deze CSS.

Styling Contactformulier 7 formulieren met CSS in WordPress

Meervoudig contactformulier opmaken 7 formulieren

Het probleem met de CSS die we hierboven hebben gebruikt, is dat deze wordt toegepast op alle contactformulier 7-formulieren op uw website. Als u meerdere contactformulieren gebruikt en deze anders wilt vormgeven, moet u voor elk formulier de ID gebruiken die is gegenereerd door contactformulier 7.

Open gewoon een pagina met het formulier dat u wilt wijzigen. Ga met je muis naar het eerste veld in het formulier, klik met de rechtermuisknop en selecteer Inspect Element. Het browserscherm wordt gesplitst en u ziet de broncode van de pagina. In de broncode moet u de startregel van de formuliercode vinden.

Het vinden van de element-ID voor uw contactformulier

Zoals je in de bovenstaande schermafbeelding kunt zien, begint onze contactformuliercode met de regel:

Het id-kenmerk is een unieke identificatie die door contactformulier 7 voor dit specifieke formulier wordt gegenereerd. Het is een combinatie van formulier-ID en de bericht-ID waar dit formulier wordt toegevoegd.

We zullen deze ID gebruiken in onze CSS om ons contactformulier te stylen. We zullen .wpcf7 in ons eerste CSS-fragment vervangen door # wpcf7-f201-p203-o1.

div # wpcf7-f201-p203-o1 {
achtergrondkleur: #fbefde;
border: 1px solid # f28f27;
opvulling: 20px;
}
# wpcf7-f201-p203-o1 ingang [type ="tekst"],
# wpcf7-f201-p203-o1 ingang [type ="e-mail"],
# wpcf7-f201-p203-o1 textarea {
achtergrond: # 725f4c;
kleur: #FFF;
font-family: lora, "Open zonder", schreefloos;
lettertype: cursief;
}
# wpcf7-f201-p203-o1 ingang [type ="indienen"],
# wpcf7-f201-p203-o1 ingang [type ="knop"] {
achtergrondkleur: # 725f4c;
breedte: 100%;
text-align: center;
text-transform: hoofdletters;
}

Styling Contactformulier 7 Formulieren met CSS Hero

Veel WordPress-beginners hebben geen ervaring met het schrijven van CSS en willen geen tijd besteden aan het leren ervan. Gelukkig is er een geweldige oplossing voor beginners waarmee je niet alleen je contactformulier kunt vormgeven, maar bijna elk aspect van je WordPress-site.

Installeer en activeer eenvoudig de CSS Hero-plug-in en ga naar de pagina met uw formulier. Klik op de CSS Hero-werkbalk en klik vervolgens op het element dat je wilt stylen. CSS Hero biedt u een eenvoudige gebruikersinterface om de CSS te bewerken zonder ooit code te schrijven.

Contactformulier opmaken 7 Formulier met CSS Hero

Bekijk onze volledige recensie van CSS Hero en hoe u deze kunt gebruiken om alles op uw WordPress-site te stylen. U kunt de couponcode van CSS Hero gebruiken WPBeginner om exclusieve korting van 34% te krijgen.

Dat is alles wat we hopen dat dit artikel u heeft geleerd hoe u contactformulier 7-formulieren in WordPress kunt opmaken. Misschien wilt u ook onze gids zien over het toevoegen van een pop-up voor een contactformulier in 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