Ik ga deze blogpost kort en krachtig houden. Veel mensen – waaronder ikzelf – gebruiken het contactformulier van Jetpack op hun WordPress website, wat een prima keuze is als je geen extra plugins wilt installeren en geen complexe functies nodig hebt. Jetpack is zelf natuurlijk ook een plugin, maar wel een die op veel websites sowieso al is geïnstalleerd, los van het contactformulier. Jetpack werkt als een alles-in-eenplugin die een website verrijkt met een hoop extra functies, waardoor je minder verschillende plugins nodig hebt.
Iets wat je in Jetpacks contactformulierbouwer niet kunt kiezen is de opmaak van verplichte velden. Standaard verschijnt het label ‘(verplicht)’, maar vind je ook niet dat dat een beetje onvriendelijk klinkt? Om een minimalistische look te creëren kun je het best sterretjes gebruiken. Iedereen is immers bekend met de betekenis, en het ziet er gewoonweg beter uit dan ‘(verplicht)’ her en der in het formulier.
Gelukkig is dit vrij makkelijk te veranderen, en je hebt alleen CSS nodig! Ga in je WordPress Dashboard naar Weergave (Engels: Appearance) > CSS bewerken (Engels: Edit CSS) (of, als je ervaren bent, bewerk het bestand style.css in je FTP-client – zorg ervoor dat je een child theme gebruikt). Plak daarna de onderstaande code in z’n geheel op een nieuwe regel en sla je stylesheet op:
1 2 3 4 5 6 7 8 9 10 11 12 13 | /* ## Jetpack Contact Form --------------------------------------------- */ .contact-form label span { color: #990000 !important; margin-left: 1px !important; font-weight: inherit !important; visibility: hidden !important; } .contact-form label span:before { content: "*" !important; visibility: visible !important; } |
Voor beginners: we hebben de declaratie !important
nodig om de standaard CSS van Jetpack te overschrijven.
Je kunt de hexcode in de lijn color: #990000 !important;
veranderen om de gewenste kleur te gebruiken (met deze hexcode is de kleur crimson red). Gebruik color: inherit !important;
als je de sterretjes dezelfde kleur wilt geven als de tekst in de labels.
Dat is alles! Je Jetpack contactformulier zou nu met sterretjes weergeven moeten worden – dat wil zeggen, als het überhaupt verplichte velden heeft. ;-)
Ik hoop dat je deze post nuttig vond! Je zou me helpen door ‘m te delen op social media.
Geef een reactie