Frontend für Powermail Formulare

Hier finden Sie einige Beispiele, wie Sie die Eingabefelder der beliebten Extension Powermail gestalten können. Es gibt zudem noch die Möglichkeit, für das Backend von Powermail Konstanten zu überschreiben, um Formulare als Standard einspaltig zu machen.

Powermail generiert Formulare mit HTML-Standards, die man recht einfach konfigurieren kann.

Überschrift mit eigener Farbe und Font

.powermail_legend {
  color: #478FAD;
  font-family:  'Arvo', Verdana, Geneva, Arial;
}

Überschrift abschalten

Je nach Vorlage kann es sinnvoll sein, die Überschrift eines Eingabefeldes abzuschalten. Dies kann z. B. geschehen, wenn man die Erklärung des Inhalts in einem Feld in den Placeholder verlagert.

.powermail_legend {
  display: none;
}

Abstand des gesamten Containers anpassen

.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

Überschrift eines Eingabefeldes mit Farben versehen und ausrichten

.form-horizontal .control-label {
  text-align: left;
  color: #478FAD;
}

Eingabefelder formatieren

Die Eingabefelder wie Input, Drop Down Menu und Textfeld kann man mit eigenem Layout versehen, um die Standards von Bootstrap zu überschreiben.

.powermail_fieldwrap select,
.powermail_fieldwrap input,
.powermail_fieldwrap textarea {
  border: 1px #F4E6F4 solid;
  border-radius: 0px;
}

Formular Felder mit eigenem Layout

Rahmen der Felder mit eigener Farbe

.form-control {
  background-color: #fefef7;
  background-image: none;
}

Aktiver Zustand eines Feldes

.form-control:focus {
  border-color: #F4E6F4;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(144,5,145,.1), 0 0 8px rgba(195,29,196, .6);
          box-shadow: inset 0 1px 1px rgba(144,5,145,.1), 0 0 8px rgba(195,29,196, .6);
}

Placeholder mit eigener Farbe

.form-control::-moz-placeholder {
  color: #900591;
  opacity: 0.5;
}
.form-control:-ms-input-placeholder {
  color: #900591;
  opacity: 0.5;
}
.form-control::-webkit-input-placeholder {
  color: #900591;
  opacity: 0.5;
}  

Fehlermeldungen formatieren

.tx-powermail .powermail_fieldset .powermail_field_error,

.tx-powermail .powermail_fieldset .parsley-error, 
.tx-powermail .powermail_fieldset .powermail_form .parsley-error:focus, 
.tx-powermail .powermail_fieldset div.error {
  background-color: #F4E6F4;
  color: #900591;
}
.tx-powermail .powermail_fieldset .parsley-errors-list>li {
  background-color: #900591;
  color: #F4E6F4;
}  

Button zum Abschicken (Submit)

Wählt man den Button zum Abschicken, also Submit, aus, so kommt dieser mit einem Standard Layout für Bootstrap. Dieses CSS kann mann überschreiben - in diesem Fall nimmt der Button die gesamte zur Verfügung stehende Breite ein, ändert seine Farbe, hat eckige Ecken und ändert das Aussehen beim Hover-Effekt.

input.btn.btn-primary {
  width: 100%;
  background-color: #900591;
  border: none;
  border-radius: 0px;
  transition: all ease 0.5s;
}
input.btn.btn-primary:hover {
  background-color: #C31DC4;
  transition: all ease 0.8s;
}

Buttons zum Weiterschalten

Wenn man das mehrseitige Menu von Powermail auswählt, bekommt man die Möglichkeit zum Weiterschalten zwischen den Seiten mit den Feldern Formulare. Hier ein CSS zum Ändern der Farben.

a.btn.btn-default.btn-read-more,
.btn.btn-default.btn-login {
  border: 1px #4B778A solid;
  background-color: #efefe7;
  width: 100%;
  color: #4B778A;
  margin-bottom: 15px;
  font-weight: bold;
}
a.btn.btn-default.btn-read-more:hover,
.btn.btn-default.btn-login:hover {
  border: 1px #fff solid;
  color: #ddd;
  background-color: #4B778A;
}
a.btn.btn-default.btn-read-more { transition: all ease 1.5s; }
.btn.btn-default.btn-login { transition: all ease 0.8s; }
Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
  • powermail_formulare_frontend.txt
  • Zuletzt geändert: 27/09/2019 20:15
  • von Thomas Berscheid