contactform 7 wordpress

[Henk Schepers]

Hallo, ik zoek een oplossing om de labels van keuzeboxen de kleur te veranderen.
Als ik een formulier maak met een checkbox met 2 mogelijkheden dan worden de labels daarvan in zwart neergezet.
dit moet wit worden omdat de achtergrond van de site rood is en daarom slecht leesbaar.

iemand een idee

 

[Aar]

Heb je een link naar een voorbeeld. Dit lijk je in CSS te moeten oplossen.

 

[Henk Schepers]

Dank voor het antwoord

Ik heb overal in de instellingen gezocht en heb ook een code geprobeerd in css. Heb gezocht via ChatGPT en die geven een oplossing in css maar kan dat bij mijn instellingen niet vinden

https://amsterdamsvolkskoor.nl/kaartverkoop-meervaart-2023/

 

[Aar]

ChatGPT is ook geen magisch orakel die overal het juiste antwoord op weet, hé? Die is ook maar afhankelijk van een grote bron aan bij elkaar geraapte kennis.
Ik zal eens kijken naar je CSS-code.

 

[Aar]

wpcf7-list-item-label is verantwoordelijk voor het label van je lijst van je checkboxes of radiobuttons.
Als je hier een color:#FFFFFFF; aan toevoegt, is deze ook netjes wit.

Als je de Inspector van je browser gebruikt kan je naar alle hartelust spelen met je CSS-instellingen. Niet alleen Firefox kan dit, maar ook Chrome en menig andere browser.

 

[femke98]

Er bestaat een plug-in die je contactform 7 kan veranderen in kleuren als je dat wilt. Weet alleen even niet meer hoe die heet. Ik zal het opzoeken.

Let wel, een contactform (is mijn persoonlijke mening) moet clean zijn, niet te veel poespas en niet te veel invulvakjes. Als je een heftige kleur neemt dan haken mensen af. Geloof mij.

https://nl.wordpress.org/plugins/cf7-grid-layout/ of deze https://wordpress.org/plugins/cf7-styler/

handmatig https://www.dubbelendwarsonline.nl/...m-7-aanpassen-zodat-deze-past-bij-je-website/

https://contactform7.com/styling-contact-form/

 

[Henk Schepers]

femke

op de deze pagina zie je wat ik bedoel.
https://amsterdamsvolkskoor.nl/kaartverkoop-meervaart-2023/
onderaan bij "welke datum"en "voorkeur"
is de labeltekst zwart. dit moet wit worden voor de leesbaarheid.
dit moet blijkbaar in css worden aangepast

 

[Aar]

Klopt, daarvoor kan je dit gebruiken. Dan wordt het wit.

color:#FFFFFFF;

Zie ook mijn bericht van gisteren om 17:38.

 

[damnsharp]

Zo wordt het dan

span.wpcf7-list-item-label {
    color: #FFFFFF;
}

Wat code (willekeurig) voor Contact Form 7 opmaak, je kan de meeste vinden met de inspector tool wat @Aar al aangaf.

Diverse velden achtergrondkleur wijzigen

input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
    background: #DFDFDF;
}
input.wpcf7-form-control.wpcf7-text {
    background: #DFDFDF;
}
textarea.wpcf7-form-control.wpcf7-textarea {
    background: #DFDFDF;
}

De focus of "klik op het textveld" achtergrondkleur wijzigen

.wpcf7-form-control.wpcf7-text:focus {
background: #fffcb2;
}

of

.wpcf7 textarea:focus {
    background: #fffcb2;
}

Verzonden mail gekleurde rand opmaken

div.wpcf7-mail-sent-ok {
    border: 2px solid #32CD32;
}

Verzendknop opmaak

.wpcf7-form input[type="submit"] {
background: #FFD62F !important;
color: #000000 !important;
padding: 8px 15px !important;
}
 
.wpcf7-form input[type="submit"]:hover {
background: #D18AB6 !important;
color: #000000 !important;
padding: 8px 15px !important;
}

Hoogte berichtveld aanpassen

#primary textarea.wpcf7-form-control {
    min-height: 100px !important;
}

of

textarea.wpcf7-form-control {
    height: 10em;
}

Invulvelden ronde rand geven

.wpcf7-form-control {
	border-radius: 10px;
}

Nou zo kan ik nog wel even doorgaan ;-)

 

[Aar]

Jep, wat de Damnsharp hier boven zegt.
Met CSS kan je echt van alles aan je elementen stijlen. En de Inspector is zo handig om droog mee te oefenen en te proberen.
Dagelijks gebruik hier bijna.

 

[damnsharp]

Ideaal soms is het even gepuzzel maar dat is juist leuk.

 

[Henk Schepers]

Dank

Dank jullie wel voor de tips. Ik heb inspector geïnstalleerd en kan veel zien. Er zijn verschillende tabbladen en moet ik dan bij kleur zijn of moet het ergens anders invoegen. Heeft dit invloed op de uiteindelijk website. Dan zou iedereen je site kunnen veranderen. Of is het op dat moment en maak je het definitief na te zijn ingelogd op je site.
Klinkt misschien vreemd maar ik heb al aangegeven dat ik er niet veel ervaring mee heb maar kan het wel een beetje lezen

 

[Aar]

Uiteraard is alles wat je wijzigt lokaal.

 

[Henk Schepers]

Ok

Ok ga het weer bekijken

 

[Henk Schepers]

Het is gelukt met
span.wpcf7-list-item-label {
color: #FFFFFF;}

Het probleem was dat ik wel die suggesties kreeg, maar niet naar voren kwam waar ik dat moest invullen in wordpress
Dat heb ik nu gevonden onder thema customizer extra CSS.
en nu is het wit
Dank jullie wel en ga de vraag sluiten

 

[Aar]

Fijn dat het gelukt is!