Lesefortschritt:

Contact Form 7-Formulare zum Webdesign passend stylen

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

Trick # 148 | 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 Word­Press-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

Links auf der Divi-Website stylen

Im Divi-Theme lässt sich von Haus aus die Farbe der dargestellten Links definieren - jedoch ist damit mit Customizing auch schon Schluss. Beim Webdesign werden damit Links ab und an zu diskret dargestellt. Das lässt sich mit minimalem Aufwand ändern.

Werbung

 

Pin It on Pinterest

Share This