Vor einer Weile hat sich Dr. Code nach einem neuen Formularplugin umgesehen. «Back to the roots» war am Schluss die Devise. Denn zurückgekehrt sind wir zum Formular-Plugin, das wir ganz am Anfang unserer WordPress-Zeit genutzt haben: Zu Contact Form 7. Damit das auch anständig ausschaut, haben wir einen CSS-Bausatz angefertigt, der vielleicht auch Ihnen hilft.
Nach dem «Aus» unseres präferierten Formular-Plugins Caldera Forms vor knapp einem Monat wurde es Zeit, nach einer anderen Lösung Ausschau zu halten. Wegen der wirklich stolzen Kosten der grossen Anbieter sind wir am Schluss wieder (wie auch schon früher mal) bei Contact Form 7 gelandet.
Bloss sehen diese Formulare wirklich übel aus, wenn man nix dran macht. Das ist aber auch bei anderen Formular-Plugins der Fall.
Wir haben darum einen CSS-Block für Contact Form 7 zusammengestellt, welcher die Formularfelder weitestgehend abdeckt und der zu unserem Layout passt.
Sie finden den Code nachfolgend und können ihn problemlos in Ihr Stylesheet (unter Design/Customizer/Zusätzliches CSS) einfügen und dort nach Ihren Bedürfnissen anpassen:
.wpcf7-form {
margin-left: 25px;
margin-right: 25px;
margin-top: 25px;
}
.wpcf7-text, .wpcf7-textarea, .wpcf7-date, .wpcf7-number, .wpcf7-captchar {
background-color: #59b14b33 !important;
border: 1px solid #293280 !important;
width: 100% !important;
border-radius: 5px !important;
font-size: 16px;
color: #343434 !important;
padding: 10px !important;
box-sizing: border-box;
}
.wpcf7-submit {
color: #ffffff !important;
margin: 10px auto 0;
cursor: pointer;
font-size: 16px;
font-weight: 500;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 10px;
line-height: 1.7em;
background: #293280;
border: 1px solid #293280;
-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;
}
.wpcf7-form label {
font-size: 16px;
}Voilà. Sieht doch gleich viel besser aus.
Den Senden-Button in Contact-Form-7-Formularen können Sie übrigens im Divi-Theme ganz einfach mit dem stylishen Divi-Button ersetzen. Wie das geht erfahren Sie im Beitrag «Formular-Button mit dem Divi-Button ersetzen».
Werbung
Werbung
