Viele wundern sich, warum Contact Form 7 so beliebt ist, aber die Nutzung für Unwissende so grauenvoll schwer. Das liegt daran, dass das Formular über kein Design verfügt, aber diese nachträglich und schnell editieren lässt. Doch bevor die Erklärung anfängt, ist natürlich wichtig, wie es am Ende aussehen könnte!
Falls dir das schlichte Design des WPCF7 gefällt, kannst du den gesamten folgenden CSS Code kopieren und bei WordPress > Customizer > CSS einfügen. Alle Felder, die zwischen den Zeichen /* und */ stehen, sind Kommentare und Erläuterungen, wofür die CSS Codes stehen. Wer mutig ist, kann kleine Veränderungen gerne darin vornehmen.
/* LAYOUT */
/* In diesem Abschnitt werden die Eigenschaften des gesamten Layouts und der Schriften konfiguriert. In diesem Fall wurde die Hintergrundfarbe weiß, die Schriftfarbe in dunkelgrau mit eine Farbstärke von 500 ausgewählt. Das gesamte Layout erhält mit Box-Shadow eine kleine Schattierung. */
.wpcf7 {
background: rgba(255,255,255);
padding: 25px 25px 25px 25px !important;
color: #3c3c3c;
font-weight: 500;
box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.2);
}
/* FELDER FÜR KUNDEN */
/* In diesem Abschnitt werden die vorgegebenen Textfelder, E-Mailfelder, Textbereiche, Telefonfelder optisch angepasst. Aktuell sind breitere Felder sehr beliebt und erhalten deswegen Padding und die im Web beliebte Schriftart Roboto und der Schriftstärke 400. Alle Felder sind aktuell mit einem Border, können aber natürlich auf none gesetzt werden */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="textarea"],
.wpcf7 input[type="submit"],
.wpcf7 input[type="tel"],
textarea {
margin-top: 5px;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 10px;
font-size: 15px;
font-family: Roboto;
font-weight: 400;
background-color: none;
border: 1px solid #3c3c3c;
}
/* BUTTON */
/* In diesem Bereich wird der Button schwarz mit weißer Schriftfarbe erstellt. Anpassungen sind mit den vorgetragenen Stats ganz einfach möglich.*/
.wpcf7 input[type="submit"] {
color: #ffffff;
font-size: 16px;
font-weight: 400;
background: #3c3c3c;
padding: 15px 20px 15px 20px;
border: none;
border-radius: 0px;
text-transform: none;
letter-spacing: 2px;
}
.wpcf7 input:hover[type="submit"] {
background: #0A9E1C;
transition: all 2.0s;
}
.wpcf7 input:active[type="submit"] {
background: #092AE4;
}
Es hat eine einfaches und kostenloses System zur Erstellung von Kontaktformularen. Das Gute an dem Ganzen ist die Möglichkeiten der kostenlosen Anpassung des Formulars. Dieser ist in den meisten Fällen nicht mit ausgelegt.
Ja natürlich. Dafür braucht man nur ein wenig Englisch und allgemein gutes technisches Verständnis. Denn die Liste ist fast schon selbsterklärend. Die CSS Befehle sind alle gleich. Außerdem lässt sich im Internet Einiges zu diesem Thema finden.
Ja sehr gerne. Sende mir einfach dein Anliegen zu, oder schreib hier drunter ein Kommentar. Ich werde mich schnellstmöglich melden und dir dabei aushelfen.
Hier die gekürzte Form des Codes. Diesen einfach kopieren und wie oben beschrieben unter Customizer > CSS einfügen
.wpcf7 {
background: rgba(255,255,255);
padding: 25px 25px 25px 25px !important;
color: #3c3c3c;
font-weight: 500;
box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.2);
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="textarea"],
.wpcf7 input[type="submit"],
.wpcf7 input[type="tel"],
textarea {
margin-top: 5px;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 10px;
font-size: 15px;
font-family: Roboto;
font-weight: 400;
background-color: none;
border: 1px solid #3c3c3c;
}
.wpcf7 input[type="submit"] {
color: #ffffff;
font-size: 16px;
font-weight: 400;
background: #3c3c3c;
padding: 15px 20px 15px 20px;
border: none;
border-radius: 0px;
text-transform: none;
letter-spacing: 2px;
}
.wpcf7 input:hover[type="submit"] {
background: #0A9E1C;
transition: all 2.0s;
}
.wpcf7 input:active[type="submit"] {
background: #092AE4;
}