Lesefortschritt:

Contact Form 7-Formulare zum Webdesign passend stylen

1. Mai 2022 | CSS-Stylesheet, Divi-Theme, Plugins

Dieser Beitrag beinhaltet 739 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.

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

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This