Formulare

Design
Entwicklung
Standard
<input type="email" placeholder="E-Mail-Adresse">
input,
select {
    font-family: 'franklin_gothic_fs', sans-serif;
    border: 1px solid #DBDBDB;
    border-radius: .5px;
    width: 265px;
    height: 48px;
    box-sizing: border-box;
    padding: 0 34px 0 15px;
    margin: 40px 0;
    outline: none;
    color: #4B4B4D;
    font-size: 1em;
    font-weight: 500;
}
 
textarea {
    width: 100%;
    max-width: 550px;
    box-sizing: border-box;
    padding: 10px 15px;
    resize: vertical;
    border: 1px solid #DBDBDB;
    overflow: hidden;
    height: 86px;
    outline: none;
}
 
.field-label {
    margin: 5px 0;
    display: block;
    text-align: left;
    text-transform: uppercase;
    font-size: 16px;
}

input:focus {
    box-shadow: 0 0 6px 0 rgba(0,0,0,0.26);
}
Reset der Default-Werte

Achtung! mit input als Selector werden alle Input-Typen per CSS überschrieben. Es sollte im Regelfalle darauf geachtet werden, dass lediglich die benötigen Typen neu gesetzt werden.

input, select {
    outline: 0px;
    -webkit-appearance: none;
}
::-ms-clear {
    display: none;
}
select::-ms-expand {
    display: none;
}
Placeholder
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #878787;
    font-size: 1em;
    font-weight: 300;
    opacity: 1;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #878787;
    font-size: 1em;
    font-weight: 300;
    opacity: 1;
}
:-ms-input-placeholder { /* IE 10+ */
    color: #878787;
    font-size: 1em;
    opacity: 1;
}
:-moz-placeholder { /* Firefox 18- */
    color: #878787;
    font-size: 1em;
    opacity: 1;
}
Validierung

Die Icons sind hierbei per background-image mit inline svgs umgesetzt. Wichtig ist dabei zubeachten, dass der svg Code mit base64 kodiert sein muss damit diese im Internet Explorer dargestellt werden können. Alternativ können die Icons auch per Dateipfad eingebunden werden.

<input type="text" id="vorname" class="field-check" placeholder="Vorname">
.field-true {
    /* SVG IN BASE64 ENCODE */
    background:#f7f7f7 url("data:image/svg+xml;charset=utf8;base64,PHN2ZyBjbGFzcz0ibmMtaWNvbi
    BvdXRsaW5lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd
    3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIg
    dmlld0JveD0iMCAwIDI0IDI0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+IDxwb2x5bGluZSBmaWx
    sPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3
    Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjIsMTIgOSwxOSAyMiw2ICIgc3Ryb2tlLWxpbmVqb2luPSJyb
    3VuZCI+PC9wb2x5bGluZT4gPC9nPjwvc3ZnPg==") no-repeat right 10px center;
    /* DEFAULT AS SVG FILE */
    /* background-image:url('[PATH]'); */
    background-size:16px 16px;
    z-index:10000;
    font-weight:500
}
 
.field-false {
    /* SVG IN BASE64 ENCODE */
    background: #fff url("data:image/svg+xml;charset=utf8;base64,PHN2ZyBjbGFzcz0ibmMtaWNvb
    iBvdXRsaW5lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8
    vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRwe
    CIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+IDxwb2x5Z29uIGZ
    pbGw9Im5vbmUiIHN0cm9rZT0iI2ZlOTI5MyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91b
    mQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIyLDIyIDEyLDMgMjIsMjIgIiBzdHJva2UtbGluZWp
    vaW49InJvdW5kIj48L3BvbHlnb24+IDxsaW5lIGRhdGEtY29sb3I9ImNvbG9yLTIiIGZpbGw9Im5vbmUiIHN0c
    m9rZT0iI2ZmOTM5MyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXR
    lcmxpbWl0PSIxMCIgeDE9IjEyIiB5MT0iMTEiIHgyPSIxMiIgeTI9IjE1IiBzdHJva2UtbGluZWpvaW49InJv
    dW5kIj48L2xpbmU+IDxjaXJjbGUgZGF0YS1jb2xvcj0iY29sb3ItMiIgZGF0YS1zdHJva2U9Im5vbmUiIGZpbG
    w9IiNmZjkzOTMiIGN4PSIxMiIgY3k9IjE4IiByPSIxIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Ut
    bGluZWNhcD0icm91bmQiPjwvY2lyY2xlPiA8L2c+PC9zdmc+Cg==") no-repeat right 6px center;
    /* DEFAULT AS SVG FILE */
    /* background-image:url('[PATH]'); */
    background-size:16px 16px;
    z-index:10000;
    border: 1px solid red;
}
var strings = new RegExp("^.{2,50}$");
//jQuery("#vorname").keyup(function () { -- Ebenfalls möglich
jQuery(this).blur(function () {
    var element = jQuery(this)
    if(element.val().match(strings) != null) {
        element.addClass("field-true").removeClass("field-false");
    } else {
        element.addClass("field-false").removeClass("field-true");
    }
});
Pulsierender Effekt
.pulsate {
-webkit-animation:pulsate 1s infinite alternate;
-moz-animation:pulsate 1s infinite alternate;
-animation:pulsate 1s infinite alternate
}
 
@-webkit-keyframes pulsate {
    from {
        box-shadow:0 0 0 #dbdbdb
    }
 
    to {
        box-shadow:0 0 25px #006ab2
    }
}
 
@-moz-keyframes pulsate {
    from {
        box-shadow:0 0 0 #dbdbdb
    }
 
    to {
        box-shadow:0 0 25px #006ab2
    }
}
 
@keyframes pulsate {
    from {
        box-shadow:0 0 0 #dbdbdb
    }
 
    to {
        box-shadow:0 0 25px #006ab2
    }
}
/* Stop Pulse on Focus */
jQuery(".pulsate").focus(function () {
    jQuery(".pulsate").removeClass("pulsate");
});
Dropdown
select {
    cursor: pointer;
    background: url("data:image/svg+xml;charset=utf8;base64,PHN2ZyBjbGFzcz0ibmMtaWNvbiBnbHlwaCIgeG1sbn
    M9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIg
    eD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCI+DQo8cGF0aCBmaW
    xsPSIjNDQ0NDQ0IiBkPSJNMTcsN0g3QzYuNjM3LDcsNi4zMDIsNy4xOTcsNi4xMjUsNy41MTVDNS45NDksNy44MzMsNS45NTks
    OC4yMjIsNi4xNTIsOC41M2w1LDgNCglDMTEuMzM1LDE2LjgyMiwxMS42NTUsMTcsMTIsMTdzMC42NjUtMC4xNzgsMC44NDgtMC
    40N2w1LThjMC4xOTMtMC4zMDgsMC4yMDMtMC42OTcsMC4wMjctMS4wMTVDMTcuNjk4LDcuMTk3LDE3LjM2Myw3LDE3LDd6Ij48
    L3BhdGg+DQo8L3N2Zz4=") #FFF no-repeat right 10px center !important
    -webkit-appearance: none;
    -moz-appearance: none;
}
Formular-Typen

Eine einheitliche und hochwertige Umsetzung von Formularen – ob Newsletter-Anmeldung oder mehrstufiger Sales-Prozess – ist essentiell für unsere Bemühungen, Abonnenten, Käufer und Opt-Ins zu generieren.

  • Standard Formularfeld

    Die Feldbeschriftung befindet sich stets innerhalb des Feldes, da dies mobile viel Platz spart und die Beschriftung stehen bleibt, bis der Nutzer eine Eingabe macht. Zudem sollte aus Gründen der besseren Erkennung des Formulars das weiße Feld auf grauem Hintergrund zu verwenden. Das Formular fällt somit besser ins Auge.

  • Dropdown

    Zur Einfachauswahl von verschiedenen Optionen ist ein Dropdown häufig die beste Lösung, da weit verbreitet. Die Dropdowns sind bei uns immer nativ umgesetzt - die Darstellung des Dropdowns ist also abhängig vom jeweiligen Browser/Endgerät. Damit hat der Nutzer die gewohnte Ansicht aus seinem Browser/von seinem Endgerät und findet sich schneller zurecht.

Größen & Abstände

Unsere Formularfelder haben eine feste Höhe von 48px und eine variable Breite, die je nach Inhaltstyp variiert. Die Schrift ist immer 18px groß und mittig zentriert.

sg_formulare_groessen_abstaende
Input-States

Unsere Formularfelder besitzen vier verschiedene states. Diese sind wichtig, um den Nutzer bei der Interaktion zu unterstützen und ihm visuelles Feedback zu geben. Für den Error-State gibt es zwei Varianten, einen mit und einen ohne Text.

sg_formulare_input-types
Pulsierender Effekt

Manchmal möchte oder muss man dem Nutzer einen Hinweis geben, wo die nächste Eingabe erfolgen soll. Unser Effekt kann auf Inputs und Checkboxen angewendet werden und verschwindet, sobald das Feld aktiv wird.

Verwendung von Formularen

Einen typischen Einsatz unserer Button-Hierarchie ist die Eingabe von Adressdaten. Generell sollte sich die Breite eines Formularfeldes am Inhalt orientieren. Nutzer erwarten zum Beispiel für die PLZ ein kleineres Feld als für die E-Mail-Adresse.

sg_formulare_beispiele_breiter