Fertiges Design für Contact Form 7 mit CSS Code für Copy & Paste

Januar 26, 2022

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!

Screenshot des fertigen Formulars mit Contact Form 7

kontaktformular screenshot
Kontaktformular Screenshot

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;
 }


Fragen & Antworten bezüglich Contact Form 7

Warum ist Contact Form 7 beliebt?

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.

Kann ich selbst auch ohne Kodier Kenntnisse WPCF7 anpassen?

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.

Ich habe offene Fragen bei der Gestaltung. Kannst du mir kostenlos helfen?

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.

AUTOR DES BEITRAGS

Caglar Tural

Hallo, ich bin ein leidenschaftlicher Leser und Schnüffler in der unbegrenzten und transparenten Welt des Internets. Dabei liegt mein Fokus größtenteils auf die Digitalisierung und Marketing Konzepte für kleine und mittelständische Unternehmen. Vielleicht ist das alles auch nur verlockend wegen meiner Selbstständigkeit als Webdesigner.

One comment on “Fertiges Design für Contact Form 7 mit CSS Code für Copy & Paste”

  1. 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;
    }

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Über uns

Inspiriert von der Digitalisierung und Internet of Things, engagieren wir uns für Projekte, die Prozesse vereinfachen, Kosten einsparen oder potenzielle Kunden erreichen.
01723153425
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram