Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.


powermail_formulare_frontend [2023.12.12 16:02] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1
Zeile 1: Zeile 1:
 +====== 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 [[typoscript_constants#powermail_formular_einspaltig|Formulare als Standard einspaltig]] zu machen.
 +
 +===== Powermail Standards formatieren =====
 +
 +
 +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; }