Contact Form 7 im Aussehen von DIVI

Das DIVI-Kontaktformular-Modul ist schon längst viel mehr als nur ein einfaches Formular für Kontakte. Vielmehr handelt es sich um einen fast vollständiger Form-Builder: Verschiedene Feldtypen, Bedingungen, variable Möglichkeiten – der Einsatz eines weiteren Formular-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:

• kein Datei-Upload möglich
• keine automatische Antwort-Mail an den Nutzer des Formulars möglich
• keine Möglichkeit, die Eingaben des Formulars in einer Datenbank zu speichern

Wenn solche Möglichkeiten benötigt werden, ist meiner Meinung nach Contact Form 7 empfehlenswert, da es viele weitere Features bietet. Sollten sie weitere Funktionen benötigen, so gibt es viele Dutzende weitere kostenlose Plugins, die die Möglichkeiten von Contact Form 7 erweitern.

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 Seitengröße etwas 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::

• Unter www.agentwp.com/contact-form-7-like-divi findet sich ein CSS-Anpassung, der leider einige Felder wie Datum oder Zahlenfeld fehlen.
• Und der Hersteller von DIVI, Elegant Themes, hat sich auch seine Gedanken dazu gemacht: www.elegantthemes.com/blog/tips-tricks/how-to-customize-the-style-of-contact-form-7-to-match-your-website

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

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

span.wpcf7-list-item {
  display: block}

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
• bei DIVI 5 einzeln für Seiten in der Seitenansicht von WordPress in den DIVI-Seiteneinstellungen -> Erweitert -> Benutzerdefiniertes CSS

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.

Spamschutz für Contact Form 7

Im Gegensatz zum DIVI-Kontaktformular bietet Contactform 7 keinen Spamschutz. Hilfreich ist hier das kostenlose Plugin CF7 Apps . Mit diesem kann man ein unsichtbares Feld einfügen, welches Bots dann ausfüllen und so als Spam erkannt werden.

Dazu im Formular einfach das Feld

[honeypot honigtopf]

einfügen, das war es schon.