So passen Sie das CSS-Kontaktformular an 7

Video: Contact Form7 Mega-Tutorial: Styling mit CSS - Autoresponder - Checkboxen - uvm.

Inhalt

Anweisungen
Wie
Hinweis
Was du brauchst

Kontaktformular 7 ist ein WordPress-Veröffentlichungsplattform-Plugin, mit dem Benutzer schnell benutzerdefinierte Kontaktformulare erstellen können. Formulare sind zwar einfach zu erstellen und bereitzustellen, ihre Felder sind jedoch nur minimal angepasst und ermöglichen die Integration in jeden Standort. Erstellen Sie Ihre benutzerdefinierten Stile und implementieren Sie diese in den von diesem Plugin generierten Formularfeldern.

Anweisungen

Passen Sie den Stil der Contact Form 7-Felder mit CSS an (Comstock / Comstock / Getty Images)

Öffnen Sie das Design-Stylesheet von WordPress und scrollen Sie bis zum Ende. Erstellen Sie einen kommentierten Bereich, damit Sie Ihren Code leicht finden können. Beispiel:

/ Hier beginnt mein eigener CF7-Code /
Passen Sie die Stile Ihrer Felder und Textbereiche an. Erstellen Sie dazu einen Eintrag in Ihrem Stylesheet. Beispiel:

.wpcf7 input [type = "text"], .wpcf7 areadotexto {}

Fügen Sie Rahmen, Hintergründe, Füllungen und Größen von Textelementen hinzu. Beispiele:

.wpcf7 input [type = "text"] {Hintergrund: keine Wiederholung Blättern 0 0 # F9F9F9; Grenze: 1px fest # 8E9BA9; Polsterung: 5px; Breite: 200px; }
Passen Sie die Stile der Dropdown- und Auswahlmenüs an.Erstellen Sie dazu einen Eintrag in Ihrem Stylesheet. Beispiel:

.wpcf7 input [type = "select"] {

}

Passen Sie die Auswahlfelder an die Textfelder an. Die Auswahlfelder sind nicht so breit wie die Textfelder. Fügen Sie also einige zusätzliche Pixel hinzu. Beispiel:

.wpcf7 input [type = "selected"] {Hintergrund: keine Wiederholung Blättern 0 0 # F9F9F9; Grenze: 1px fest # 8E9BA9; Polsterung: 5px; Breite: 210px; }
Passen Sie den Stil Ihrer Absenden-Schaltfläche an. Erstellen Sie dazu einen Eintrag in Ihrem Stylesheet. Beispiel:

.wpcf7 input [type = "submission"] {

}

Passen Sie die Schaltfläche "Abschicken" an das Erscheinungsbild Ihrer Website an (sie sollte sich weiterhin vom Hintergrund abheben). Beispiel für einen roten Sendebutton:

.wpcf7 input [type = "submission"] {Hintergrundfarbe: # 990000; Rand: 4px fest # B34040; Farbe: #FFFFFF; }
Speichern Sie die Änderungen in Ihrem Stylesheet und übertragen Sie die Daten in den Designordner.

Wie

Probieren Sie verschiedene Stile und verschiedene Randfarben aus.
Überprüfen Sie die Formulare in Firefox, Safari und Internet Explorer erneut, da jeder Browser etwas andere Eingabefelder enthält.

Hinweis

Fügen Sie dem Stylesheet Ihres Themes benutzerdefiniertes CSS hinzu, nicht jedoch ein Plugin-Stylesheet. Wenn Sie dies tun, wenn das Plugin aktualisiert wird, geht die Anpassung der Dateien in Ihrem Ordner möglicherweise verloren.