Hoe Contactformulier formulier 7 Formulieren in WordPress

3 min


114

Laat, E.W.M. de (Erwin)

all rights reserved

Delaatbusiness

Hoe Contactformulier formulier 7 Formulieren in WordPress

Hoe Contactformulier formulier 7 Formulieren in WordPress

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

Opmerking: we raden de plug-in Contact Form 7 niet meer aan. In plaats daarvan raden we WPForms aan , de meest gebruiksvriendelijke invoegtoepassing voor contactformulieren. U kunt WPForms Lite ook gratis downloaden .

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

Ermee beginnen

We nemen aan dat u de plug-in Contact Form 7 al hebt geïnstalleerd en dat u uw eerste contactformulier hebt gemaakt. De volgende stap is het kopiëren van de shortcode voor uw contactformulier en deze in een WordPress-bericht of een pagina te plakken waarop u uw formulier wilt laten verschijnen.

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

Standaardformulier Contactformulier 7 op een WordPress-site met behulp van het standaard WordPress-thema

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

We zullen Contact Form 7-formulieren stylen met behulp van CSS . Alle CSS gaat in uw thema of kind thema stylesheet ‘s.

Styling Contact Form 7 Forms in WordPress

Contactformulier 7 genereert een zeer nuttige en standaard compliant code voor de formulieren. Elk element in het formulier heeft een juiste ID en CSS-klasse eraan gekoppeld.

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

In dit voorbeeld gebruiken we een Google-lettertype Lora in onze invoervelden. Zie hoe u Google-lettertypen kunt toevoegen in WordPress .

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

div.wpcf7 {

background-color: #fbefde;

border: 1px solid #f28f27;

padding:20px;

}

.wpcf7 input[type=”text”],

.wpcf7 input[type=”email”],

.wpcf7 textarea {

background:#725f4c;

color:#FFF;

font-family:lora, sans-serif;

font-style:italic;   

}

.wpcf7 input[type=”submit”],

.wpcf7 input[type=”button”] {

background-color:#725f4c;

width:100%;

text-align:center;

text-transform:uppercase;

}

Dit is hoe ons contactformulier zorgde voor de toepassing van deze CSS.

Styling Contactformulier 7 formulieren met CSS in WordPress

Styling Multiple Contact Form 7 Forms

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

Open eenvoudigweg 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 zal splitsen en u zult de broncode van de pagina zien. In de broncode moet u de startlijn van de formuliercode vinden.

De element-ID vinden voor uw contactformulier

Zoals u kunt zien in de bovenstaande schermafbeelding, begint onze code voor het contactformulier met de regel:

<div role=”form” class=”wpcf7″ id=”wpcf7-f201-p203-o1″ lang=”en-US” dir=”ltr”>

Het id-attribuut is een unieke identificatiecode gegenereerd door contactformulier 7 voor dit specifieke formulier. Het is een combinatie van formulier-ID en het bericht-ID waar dit formulier aan is toegevoegd.

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

div#wpcf7-f201-p203-o1{

background-color: #fbefde;

border: 1px solid #f28f27;

padding:20px;

}

#wpcf7-f201-p203-o1 input[type=”text”],

#wpcf7-f201-p203-o1 input[type=”email”],

#wpcf7-f201-p203-o1 textarea {

background:#725f4c;

color:#FFF;

font-family:lora, “Open Sans”, sans-serif;

font-style:italic;   

}

#wpcf7-f201-p203-o1 input[type=”submit”],

#wpcf7-f201-p203-o1 input[type=”button”] {

background-color:#725f4c;

width:100%;

text-align:center;

text-transform:uppercase;

}

Styling Contactformulier 7 Formulieren met CSS-held

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, maar bijna elk aspect van je WordPress-site kunt stylen.

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

Styling Contactformulier 7 Formulier CSS-held gebruiken

Bekijk onze volledige beoordeling van CSS Hero en hoe je het kunt gebruiken om alles op je WordPress-site te stylen. U kunt gebruik maken van CSS Hero coupon code WPBeginner exclusieve 34% korting op korting te krijgen.

Dat is alles wat we hopen dat dit artikel u heeft geholpen om Contact Form 7-formulieren in WordPress te stijlen. U kunt ook onze handleiding bekijken over het toevoegen van een pop-upvenster met contactformulieren in WordPress .


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format