Die Divi WordPress Theme von Elegant Themes bietet eine Menge Flexibilität bei der Erstellung jeder Art von Website mit WordPress. Der Divi Builder macht es einfach, die Seiten ohne Code zu entwerfen und zu bearbeiten. Divi Theme entwickelt sich auch jeden Tag weiter, da in jeder Version neue Funktionen hinzugefügt werden.

Eines der am meisten nachgefragten Features im Divi-Thema ist der Kontaktformular-Builder wie das Contact Form 7 Plugin. Das Divi-Kontaktformularmodul ist großartig, aber es ist nicht einfach, es anzupassen, und Sie bleiben bei den Formularfeldern, die es standardmäßig hat. Bis ein Form Builder zu Divi hinzugefügt wird, ist die einfachste Lösung, das Contact Form 7 Plugin zu verwenden.

Das Standard-Look eines Kontaktformulars, das mit dem Contact Form 7 Plugin erstellt wurde, ist nicht sehr gut.

Um ein mit dem Kontaktformular 7 erstelltes Formular wie ein Divi-Kontaktformularmodul aussehen zu lassen, kopieren Sie den folgenden Code und fügen Sie ihn in das benutzerdefinierte CSS-Feld in den Divi-Themenoptionen (Epanel) oder in Ihren benutzerdefinierten CSS-Bereich ein.

.wpcf7-text, .wpcf7-textarea, .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-submit:hover {
background-color: #eee;
border-color:#eee;
padding: 6px 20px !important;
}

Nachdem Sie dies getan haben, wird Ihr Contact Form 7 Forumlar neben dem DIVI-Kontaktformular zum Vergleich wie folgt aussehen.

Das war’s!

Wir sind fertig für heute. Wenn Sie Fragen oder Anmerkungen haben, können Sie diese gerne im Kommentarfeld unten hinterlassen.

Frohes WordPressing!