Anmeldeformulare selbst gestalten: Opt-in Design
Die websms Online-Anmelde-Formulare, über die sich Ihre Kunden zu Ihren mobilen Benachrichtigungen (SMS, WhatsApp, Sprachnachrichten) anmelden können, können Sie ab sofort ganz Ihren Wünschen entsprechend stylen! Nutzen Sie diese Möglichkeit und gestalten Sie ein mächtiges Werkzeug zur Sammlung wertvoller Kundendaten – ganz in Ihrem Stil und passend zu Ihrer Website.
WO kann ich das Styling des Formulars definieren?
Das persönliche Styling Ihres Opt-In Formulars können Sie hier einstellen:
WebApp > Kontaktakquise > Formular XY > Formatierung CSS
WAS kann ich selbst gestalten?
1. Hintergrundfarbe
2. Formular-Rahmen
3. Formular-Eingabe-Felder
4. Buttons
5. Länderauswahl-Dropdown
6. Headline und Einleitungstext
7. Footer-Text
8. Links
Aufbau der CSS Regel
Sichtbare Elemente auf der Opt-in- und Opt-out-Seite haben jeweils einen Selektor, der mit Eigenschaften versehen und mit Eigenschaftswerten visuell angepasst werden kann.
Hintergrundfarbe
html {
background-color: #FEE600;
}
Hinweis: Wenn Sie diesen CSS-Befehl 1:1 kopieren und in das Feld „Formatierung CSS“ einfügen, wird die Farbe hinter dem Formular gelb (Farbcode:#FEE600).
Wählen Sie Ihren persönliche Farbcode
Formular-Rahmen
background-color: #FFFFFF; }
Hinweis: Wenn Sie diesen CSS-Befehl 1:1 kopieren und in das Feld „Formatierung CSS“ einfügen, wird Ihr Formular weiß (Farbcode: #FFFFFF).
Wählen Sie Ihren persönliche Farbcode
Formular-Eingabefelder
.input-date,
.input-text {
border: 1px solid #DCDCDC;
background-color: #FFFFFF;
color: #a0a0a0;
}
.country-msisdn input:focus,
.input-date:focus,
.input-text:focus {
border: 1px solid ##4800FF;
background-color: #FFFFFF;
color: #a0a0a0;
}
Buttons „Senden“ und „Weiter“
color: #FFF;
background-color: #4800FF;
}
.button-green:hover {
color: #FFF;
background-color: #3A01CB;
}
button-green:active,
.button-green:focus {
color: #FFF;
background-color: #6C33FF;
}
Länderauswahl Dropdown
color: #707070;
}
tel-country-dropdown .dropdown-list li.selected,
tel-country-dropdown .dropdown-list li.selected.focused {
background-color: #4800FF;
color: #FFF;
}
tel-country-dropdown .dropdown-list li.focused {
background-color: #4800FF;
color: #FFF;
}
tel-country-dropdown .dropdown-list li:hover {
background-color: #EFEFEF;
}
Headline und Einleitungstext
color: #4800FF;
}
p.intro {
color: #999;
}
Footer-Text
color: #888888;
}
Links
color: #4800FF;
}