Contact Form 7 im Aussehen von DIVI

Beitrag vom 25. Juni 2017 / letzte Aktualisierung am

Das DIVI-Form-Modul hat sich von einem einfachen Kontaktformular zu einem fast vollständiger Form-Builder gewandelt: Verschiedene Feldtypen, Bedingungen, variable Möglichkeiten – der Einsatz eines weiteren Form-Plugins ist so oftmals überflüssig.

Beschränkungen bei DIVI Formularen

Jedoch leider nur fast: Ein paar Einschränkungen fehlen nach wie vor, wie zum Beispiel die Möglichkeit Dateien hochzuladen. Für solche Fälle ist meiner Meinung nach Contact Form 7 empfehlenswert, da es viele weitere Möglichkeiten bietet. Sollten sie weitere Funktionen benötigen, so gibt es viele Dutzende weitere Plugins, die die Möglichkeiten von Contact Form 7 erweitern. Beispielsweise die oft nötige Funktion, eingegebene Formulare nicht nur zu verschicken, sondern auch in einer Datenbank abzulegen. Dies ist leider mit dem DIVI-Formular auch nicht möglich.

Contact Form 7 hat leider auch ein paar Schwachpunkte: Für DIVI-verwöhnte Benutzer ist das Styling mit Mühe verbunden, da Contact Form 7 nur mit puren HTML arbeitet. Zudem bindet es auf jeder Seite seine Dateien ein, auch auf solchen ohne Formular; was die durch DIVI sowieso schon große Seitengröße weiter anschwellen lässt.

Einem Formular von Contact Form 7 das Aussehen eines DIVI-Formulars geben

Natürlich haben sich schon andere Gedanken darüber gemacht, diese beiden Plugins besser zu harmonisieren::

Ausgehend von den beiden Vorschlägen habe ich nun eine erweiterte CSS-Datei erstellt und aktualisiert:

.wpcf7-form {
  margin-left: 25px; margin-right: 25px; margin-top: 25px;
}

.wpcf7-text, .wpcf7-textarea, .wpcf7-date, .wpcf7-number, .wpcf7-captchar {
  background-color: #eee !important; 
  border: none !important; 
  width: 100% !important;
  border-radius: 0 !important; 
  font-size: 14px; 
  color: #999 !important; 
  padding: 16px !important;
  box-sizing: border-box; 
} 

.wpcf7-submit {
  color: #2EA3F2 !important; 
  margin: 8px auto 0; 
  cursor: pointer; 
  font-size: 20px; 
  font-weight: 500; 

  border-radius: 3px; 
  padding: 6px 20px; 
  line-height: 1.7em; 
  background: transparent; 
  border: 2px solid; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
  transition: all 0.2s; 
}

.wpcf7-textarea {
  width: 85% !important;
}

Einfügen lässt sich die CSS-Datei wie üblich unter DIVI mit mehreren Möglichkeiten: Global für die gesamte Homepage im WordPress-Backend unter DIVI -> Themeoptionen -> Benutzerdefinierte CSS; in der style.css eines eigenen Child-Themes oder einzeln für Seiten in der Seitenansicht von WordPress in den DIVI-Seiteneinstellungen (die drei waagrechten Striche in der Kopfzeile vom DIVI-Builder).

Formulare und deutsches Recht

Übrigens: Wenn sie in ihrem Formular persönliche Daten abfragen, dann benötigen sie laut deutschem Recht die Einwilligung des Absenders. Zum Glück gibt es dafür ein eigenes Feldelement: Mit

[acceptance bestaetigung]

erzeugen sie eine Checkbox, die das abschicken des Formulars erst erlaubt, wenn sie bestätigt wurde.

Ein Kommentar

  1. Danke! Mit dem Code konnte ich ganz einfach mein Formular anpassen und auf das Plugin verzichten. Sowas für das Events Plugin wäre noch super. Das Tool aus dem Marketplace ist sehr umfangreich und komplex…. ein bisschen CSS sollte doch für viele Fälle reichen… 🙂

Schreibe einen Kommentar

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