[Anleitung] Ändern der Textfarbe für den Platzhalter für das Kontaktformular 7

Wussten Sie, dass Sie mit Contact Form 7 die Farbe des Platzhaltertextes ändern können?

Wenn Sie Contact Form 7 schon einmal verwendet haben, ist Ihnen vielleicht aufgefallen, dass es eine Standardtextfarbe für Platzhalter hat. Sie können den Platzhaltertext mit den integrierten Optionen von Contact Form 7 anpassen – oder sogar mit CSS anpassen!

In diesem Artikel wird gezeigt, wie Sie die Platzhaltertextfarbe von Kontaktformular 7 ändern und Codebeispiele für beide Methoden bereitstellen.

Wir haben festgestellt, dass viele Kunden in unserem Support-Forum Probleme beim Festlegen oder Ändern der Schriftfarbe des Platzhaltertexts in Kontaktformular 7 haben.

Kontaktformular 7 ist heute eines der beliebtesten WordPress-Plugins, mit dem Sie einfache oder komplexe Kontaktformulare auf Ihrer WordPress-Site erstellen können. Wir haben schon geschrieben So beheben Sie Fehler beim Senden von Contact Form 7-Nachrichten.

Wir zeigen Ihnen, wie Sie die Textfarbe mit benutzerdefiniertem Code anpassen: Wenn Sie mit der Codierung nicht vertraut sind, aber ein einfacheres und benutzerfreundlicheres Formularerstellungs-Plugin benötigen, probieren Sie WPForms aus.

CSS für CF7-Platzhaltertext

::-webkit-input-placeholder { /* WebKit browsers */
    color: #000 !important;
    opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #000 !important;
    opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #000 !important;
    opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #000 !important;
    opacity: 1;
}

Verwenden Sie !wichtiges Tag

Das Tag "!important" wird verwendet, um sicherzustellen, dass keine anderen Stile auf diese CSS-Selektoren angewendet werden. Dadurch wird sichergestellt, dass der Stil funktioniert. Wenn Sie möchten, dass der Stil nur in den Feldern des Kontaktformulars 7 verwendet wird, können Sie dies verwenden:

.wpcf7::-webkit-input-placeholder { /* WebKit-Browser */ color: #000 !important; Opazität: 1; }

Wenn Sie ein bestimmtes Kontaktformular auf Ihrer Website verfügbar machen müssen, ohne andere Kontaktformulare zu ändern 7, suchen Sie wie folgt nach der Formularkennung:

Klicken Sie mit der rechten Maustaste auf das betreffende Element und wählen Sie Element prüfen. Tastenkombinationen: F11 (Windows) oder CMD + SHIFT + C (MAC) Suchen Sie die ID und ersetzen Sie 'wpcf_id' durch sie in diesem Code:

#wpcf_id::placeholder { color: #000 !important; Opazität: 1; }

Fühlen Sie sich frei, unten eine Bemerkung zu hinterlassen oder eine Frage zu stellen!

Über den Autor

Autor: David AttardWebsite: https://www.linkedin.com/in/dattard/E-Mail: David@collectiveray.com €XNUMX

David ist seit 21 Jahren in der Online- und Digitalbranche tätig. Er verfügt über umfangreiche Erfahrung in der Software- und Webdesignbranche mit WordPress, Joomla und den damit verbundenen Nischen. Er hat mit Softwareentwicklungsagenturen, internationalen Softwareunternehmen und lokalen Marketingagenturen zusammengearbeitet und ist jetzt Head of Marketing Operations bei Aphex Media – einer SEO-Agentur. Als digitaler Berater liegt sein Fokus darauf, Unternehmen dabei zu helfen, sich durch die Kombination ihrer Website und der heute verfügbaren digitalen Plattformen einen Wettbewerbsvorteil zu verschaffen. Seine Mischung aus Technologieexpertise gepaart mit ausgeprägtem Geschäftssinn verschafft seinen Schriften einen Wettbewerbsvorteil.