Contact Form 7 individuelle ID

Individuelle ID oder Klasse für ein Kontaktformular

Möchte man seine Kontaktformulare optisch anpassen, verwendet man CSS dafür. Damit die Anpassungen nicht auf alle Kontaktformulare angewendet werden, muss man das gewünschte Formular mit einer ID oder eigenen Klasse ansprechen. Contact Form 7 bietet die Angabe beider Informationen.

Normalerweise werden IDs oder Klassen für die Elemente des Contact Form 7 Kontaktformulars direkt beim Eingabefeld festgelegt:

[text text-45 id:text-001 class:text-class]

Möchte mein nun das ganze Formular mit einer ID oder Klasse angeben, so erweitert man dafür den Shortcode um die gewünschten Elemente.

Man kann die ID oder die Klasse jeweils einzeln angeben:

[ contact-form-7 id="1" title="Kontaktformular" html_id="meine-id"]
[ contact-form-7 id="1" title="Kontaktformular" html_class="meine-klasse"]

Oder auch in Kombination wenn man beides verwenden möchte:

Kontaktformular im Widget
Der Shortcode eines Kontaktformulars lässt sich mit Eigenschaften erweitern.

Das Ergebnis ist dann im Quelltext zu sehen:

Individuelle ID und Klasse
Für jedes Kontaktformular kann man individuelle Eigenschaften zuweisen.

Somit hat man eine saubere Möglichkeit individuelle Kontaktformulare mit sinnvollen CSS Selektoren anzusprechen.

Zum Beispiel lässt sich das Formular nun über folgenden CSS Selektor auswählen:

/*Hintergrundfarbe des Formulars mit der ID "newsletter-form-001" anpassen.*/
#newsletter-form-001
{
    background-color: #22313f;
}

Quellen:
https://contactform7.com/faq/can-i-add-id-and-class-attributes-to-a-form-element/

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.