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::
- 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 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.
