Personalizzare il codice di incorporamento del modulo opt-in

Quando si incorpora un modulo opt-in Flexmail nel sito web, viene fornito con uno stile predefinito. Se quello stile non corrisponde al design del sito web, è possibile sovrascriverlo usando CSS. Questo articolo spiega come funziona il codice di incorporamento e come applicare stili personalizzati in modo sicuro.

Come funziona il codice di incorporamento

Quando si genera il codice di incorporamento per un modulo opt-in in Flexmail, si ricevono tre parti:

Uno snippet JavaScript che passa gli stili personalizzati al modulo una volta caricato.
Un iframe che carica il modulo stesso da https://return.flexmail.eu.
Un blocco **<style id="flx-styles">** vuoto dove è possibile aggiungere il proprio CSS.

Si incollano tutte e tre le parti nell'HTML del sito web dove si desidera che appaia il modulo. Quando la pagina si carica, l'iframe recupera il modulo e il JavaScript aggiunge il contenuto del blocco di stile nel modulo in modo che lo stile venga applicato.

Per ottenere il codice di incorporamento:

Andare su Moduli > Moduli opt-in.
Aprire il modulo che si desidera incorporare.
Cliccare sul pulsante Incorpora il tuo modulo.
Copiare il codice di incorporamento dal pop-up.

Consiglio del supporto Copiare il codice di incorporamento ogni volta che si apportano modifiche strutturali al modulo in Flexmail (come l'aggiunta o la rimozione di campi). Lo stile può rimanere lo stesso finché si mantengono gli stessi selettori.

Aggiungere CSS personalizzato al sito web

Gli stili personalizzati vanno all'interno del blocco <style id="flx-styles">. Il blocco è vuoto per impostazione predefinita e contiene segnaposto commentati per i selettori più comuni:

#flxml_frm > table > tbody > tr > td:nth-child(1) — le etichette dei campi.
#flxml_frm input[type="text"] — i campi di testo.
#flxml_frm button[type="submit"] — il pulsante di invio.

È possibile estendere questo con selettori per altri elementi, come #flxml_frm select per i menu a tendina, #flxml_frm input[type="checkbox"] per le caselle di spunta, o #flxml_frm input[type="number"] per i campi numerici. Anteporre sempre i selettori con #flxml_frm in modo che gli stili si applichino solo al modulo.

Ecco un piccolo esempio che rende il modulo trasparente, responsivo su mobile e dà al pulsante di invio un aspetto personalizzato:

Il flag !important è talvolta necessario perché gli stili predefiniti del modulo utilizzano valori di larghezza inline. Da qui è possibile costruire il resto: regolare caratteri, colori, stile delle etichette e così via aggiungendo altre regole con lo stesso prefisso #flxml_frm.

Attenzione Il modulo viene caricato all'interno di un iframe, il che significa che il CSS del sito web principale non si applica automaticamente ad esso. Ecco perché gli stili devono essere passati tramite il blocco <style id="flx-styles"> — lo snippet JavaScript gestisce quella parte automaticamente.

Consiglio del supporto Utilizzare gli strumenti di sviluppo del browser (tasto destro > Ispeziona) per identificare i nomi esatti delle classi nel modulo live prima di scrivere il CSS. I nomi delle classi possono variare leggermente a seconda della configurazione del modulo e della versione di Flexmail.

Cosa è possibile modificare

È possibile stilizzare in modo sicuro qualsiasi proprietà visiva degli elementi del modulo: colori, caratteri, spaziatura, bordi, border-radius, larghezza e sfondo.

Cosa non si deve modificare

Non modificare né rimuovere i seguenti elementi dal codice di incorporamento:

L'URL src dell'iframe. Questo carica il modulo dai server Flexmail. Modificarlo romperà il modulo.
L'id dell'iframe (iframe_flxml_form) e l'id del blocco