Adatta i tuoi moduli: opt-in design

Home » Supporto » Supporto WebApp » Adatta i tuoi moduli: opt-in design
WebSMS - Form Styling

Abbiamo buone notizie per la tua registrazione contatti! I moduli opt-in di websms per raccogliere contatti per i tuoi canali di informazioni (SMS, WhatsApp) saranno stati migliorati. Adesso potrai scegliere un modello preferito e adattare i moduli al tuo stile. Utilizzi questa nuova funzione per rafforzare la tua raccolta contatti – con un modulo che è perfettamente integrato nel design del tuo sito web.

DOVE posso adattare lo stile dei miei moduli?

Potrai definire un formato personale nel portale online:
WebApp > Moduli opt-in/opt-out > Modulo XY > Formato CSS

WebSMS - Form Styling

Creazione della regola CSS

Gli elementi visibili sui moduli opt-in/opt-out hanno un parametro che dispone di caratteristiche e valori che possono essere adattati visualmente.

WebSMS - Form Styling

Colore di sfondo

body,
html {
background-color: #FEE600;
}

Nota: Per creare uno sfondo giallo, copia questa regola CSS nella casella “Formato CSS” (codice: #FEE600)

Scegli un codice per il tuo colore preferito

Quadro del modulo

.optin-wrapper {
background-color: #FFFFFF; }

Nota: Per creare un quadro bianco per il tuo modulo, copia questa regola CSS nella casella “Formato CSS” (codice #FFFFFF).

Scegli un codice per il tuo colore preferito

WebSMS - Form Styling
WebSMS - Form Styling

Caselle del modulo

.country-msisdn input,
.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;
}

Bottoni “Invia” e “Continua”

.button-green {
color: #FFF;
background-color: #4800FF;
}

.button-green:hover {
color: #FFF;
background-color: #3A01CB;
}

button-green:active,
.button-green:focus {
color: #FFF;
background-color: #6C33FF;
}
WebSMS - Form Styling

Prefissi del Paese

WebSMS - Form Styling
tel-country-dropdown .dropdown-list li {
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;
}
WebSMS - Form Styling

Intestazioni e testi di introduzione

h1.title {
color: #4800FF;
}

p.intro {
color: #999;
}
Siti che ti potrebbero aiutare: