Contact Form 7 im Aussehen von DIVI

Das DIVI-Form-Module hat seit Juni 2017 enorm an Möglichkeiten gewonnen. War es bisher nur als sehr einfaches Kontaktformular zu gebrauchen, so ist es jetzt mittlerweile ein fast vollständiger Form-Builder: Verschiedene Feldtypen, Bedingungen, variable Möglichkeiten – der Einsatz eines weiteren Form-Plugins ist so oftmals überflüssig.

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 Möglichkeiten bietet.

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.

Um ein Formular von Contact Form 7 das Aussehen eines DIVI-Formulars zu geben gibt es jedoch Abhilfe:

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:

.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; 
  -moz-border-radius: 0 !important; 
  -webkit-border-radius: 0 !important; 
  border-radius: 0 !important; 
  font-size: 14px; 
  color: #999 !important; 
  padding: 16px !important; 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  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).

Übrigens: Laut deutschem Recht benötigt man die Einwilligung des Absenders,  dies lässt sich leicht über

[acceptance bestaetigung]

realisieren: Eine Checkbox, die das abschicken des Formulars erst erlaubt, wenn sie bestätigt wurde.