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; 
  -moz-border-radius: 3px; 
  -webkit-border-radius: 3px; 
  border-radius: 3px; 
  padding: 6px 20px; 
  line-height: 1.7em; 
  background: transparent; 
  border: 2px solid; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
  -moz-transition: all 0.2s; 
  -webkit-transition: all 0.2s; 
  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.

Schreibe einen Kommentar