Personalizzazione dei moduli avanzati
Gli utenti di account a pagamento possono sfruttare una modalità avanzata per modificare i moduli di iscrizione su Mailchimp. Scopri come passare a questa modalità avanzata e cosa puoi modificare.
Rivolgiti a un professionista
Dalla formazione a un marketing completo, la nostra community di partner può aiutarti a realizzare i tuoi progetti.
Hook CSS per la personalizzazione dei moduli
Copia URL articolo
Copiato
Ogni pubblico Mailchimp è dotato di un modulo di iscrizione ospitato che può essere personalizzato utilizzando Form Builder. Per gli utenti con piano a pagamento che desiderano un maggiore controllo sull’aspetto del modulo di iscrizione ospitato, Mailchimp dispone di una modalità avanzata che offre l’accesso al codice del modulo. Utilizza gli hook CSS nel codice del modulo per modificare gli elementi front-end del modulo di iscrizione utilizzando codice da origini lato server.
In questo articolo definiremo il CSS e gli hook CSS, condivideremo gli strumenti di sviluppo più diffusi e forniremo tabelle di riferimento con gli hook CSS da utilizzare su un modulo di iscrizione Mailchimp.
Cose che devi sapere
Ecco alcune cose da sapere prima di iniziare.
- Si tratta di una funzionalità avanzata consigliata agli utenti che hanno familiarità con la scrittura di codice personalizzato. Se hai bisogno di assistenza, contatta il tuo sviluppatore o un esperto Mailchimp.
- Se hai poca o nessuna esperienza di codifica personalizzata, puoi utilizzare Form Builder per creare, progettare e tradurre il modulo di iscrizione ospitato.
- I moduli di iscrizione di Mailchimp possono contenere fino a 30 campi pubblico personalizzabili. Il piano Premium include fino a 80 campi del pubblico personalizzati.
Definizioni
Elementi (HTML)
Gli elementi in HTML sono tutti i componenti che costituiscono una pagina web. Possono contenere dati, testo, immagini o nulla in base alle proprietà e agli attributi in essi contenuti.
CSS
CSS (Cascading Style Sheets) è un linguaggio usato per la formattazione che controlla il modo in cui gli elementi vengono presentati su una pagina web. Può essere utilizzato per formattare il testo, assegnare elementi a parti specifiche di una pagina, creare animazioni e altro ancora. Dai un’occhiata alla presentazione CSS di W3Schools.
Selettore CSS
I selettori CSS vengono utilizzati per identificare gli elementi da personalizzare. Esistono cinque categorie di selettori che di solito si basano sul nome di un elemento, su una classe o su un ID.
Hook CSS
Un hook CSS collega le librerie di contenuti lato server agli elementi HTML su una pagina web tramite CSS.
Strumenti di sviluppo
La maggior parte dei moderni browser web è dotata di una console per sviluppatori che può aiutare a eseguire il debug, a segnalare gli errori e a supportare il test del codice. Dopo aver aggiunto gli hook CSS al codice del modulo, utilizza una delle seguenti estensioni per sviluppatori al fine di visualizzare le modifiche in tempo reale.
Firefox Developer Tools è una potente estensione di sviluppo web per Firefox.
DevTools è una suite di sviluppo basata su browser disponibile su Microsoft Edge. Per gli utenti di Internet Explorer, F12 Developer Tools è un prodotto analogo che funziona con tutte le versioni di questo browser.
Chrome DevTools fa parte degli strumenti per sviluppatori di Google Chrome.
Tabelle di riferimento
Le seguenti tabelle contengono hook CSS che puoi utilizzare per personalizzare i tuoi moduli di iscrizione.
Forma stili globali
| Selettore CSS | Nome/Tipo | Descrizione |
|---|---|---|
| #mc_embed_signup | Elemento DIV | Questo elemento DIV incapsula il modulo. Utilizza questo selettore davanti ai successivi per assicurarti che vengano applicati. (ad es. #mc_embed_signup .mc-field-group) |
| #mc-embedded-subscribe-form | Elemento MODULO | Utilizza questo selettore per impostare i design nell’elemento principale del modulo. È utile per aumentare il padding intorno agli elementi del modulo. |
| div.mc-field-group | Campo Gruppo | Wrapper per ogni etichetta e combinazione di input nei moduli con più di un campo. Usalo per controllare la spaziatura orizzontale e verticale (padding) tra input. Alcuni elementi “.mc-field-group” dispongono anche di una classe “.size1of2” che ne dimezza la dimensione consentendo due campi per riga. |
| div.mc-field-group label | Etichette | Selettore di etichetta per impostazione predefinita. Usalo per modificare gran parte delle etichette dei moduli. |
| div.mc-field-group input | Input | Selettore di input per impostazione predefinita. Usalo per modificare gran parte degli input dei moduli. |
| div.mc-field-group select | Menu a tendina | Selettore di selezione (a tendina) per impostazione predefinita. Usalo per modificare tutti i menu a tendina. |
| input.button | Pulsante Invia | Usa questo selettore per modificare il pulsante Invia. |
Caselle di controllo e radio button
| Selettore CSS | Nome/Tipo | Descrizione |
|---|---|---|
| div.mc-field-group.input-group | Elemento DIV | Contenitore DIV principale per caselle di controllo/gruppi radio. |
| div.mc-field-group.input-group strong | Tag Grassetto | Utilizzato per modificare l’etichetta esterna del campo di una casella di controllo/gruppo radio. |
| div.mc-field-group.input-group ul | Elemento UL | Contenitori di liste non ordinate per caselle di controllo/gruppi radio. |
| div.mc-field-group.input-group ul li | Elemento LI | Elemento lista contenente l’etichetta e l’input. (casella di controllo/gruppi radio) |
| div.mc-field-group.input-group label | Casella di controllo/Etichette radio | Selettore di etichette per caselle di controllo/gruppi radio per impostazione predefinita. Nota: L’etichetta segue l’input nella casella di controllo/gruppi radio. |
| div.mc-field-group.input-group input | Input casella di controllo/radio | Selettore input casella di controllo/gruppi radio per impostazione predefinita. |
Campi obbligatori
| Selettore CSS | Nome/Tipo | Descrizione |
|---|---|---|
| .indicates-required | Elemento DIV | Contenitore per il messaggio “*campo obbligatorio” nella parte superiore del modulo. |
| .mc-field-group .asterisk | Elemento SPAN | Contenitore per “*” (asterisco) su etichette obbligatorie. |
Messaggi di risposta (Ajax)
| Selettore CSS | Nome/Tipo | Descrizione |
|---|---|---|
| #mce-responses | Elemento DIV | Contenitore per errori di risposta. |
| div.response | Elemento DIV | Contenitore di messaggi di risposta per impostazione predefinita. Dovrà essere impostato su “display:none;” per impostazione predefinita in modo che i messaggi di risposta non vengano visualizzati come caselle vuote. JavaScript scriverà in display:block inline per mostrare i messaggi quando necessario. |
| div.mce_inline_error | Elemento DIV | DIV con messaggio di errore posizionato sotto gli input che presentano un problema. |
| input.mce_inline_error | Input | Anche la classe “.mce_inline_error” viene inclusa negli input per aggiungere un bordo rosso. |
| #mce-error-response | Messaggio di errore | Container di messaggi di errore di input non specifici. |
| #mce-success-response | Messaggio di successo | Contenitore di messaggi di successo. |
Campi della data
| Selettore CSS | Nome/Tipo | Descrizione |
|---|---|---|
| .datefield | Elemento DIV | Contenitore di campi data. |
| .datefield input | Input | Input di data per impostazione predefinita. |
| .datefield .monthfield input | Input di testo | Input di testo per il mese |
| .datefield .dayfield input | Input di testo | Input di testo per il giorno |
| .datefield .yearfield input | Input di testo | Input di testo per l’anno |
| .datefield .small-meta | Elemento SPAN | Suggerimento di testo per il formato della data (gg/mm/aaaa) |
Campi dell’indirizzo
| Selettore CSS | Nome/Tipo | Descrizione |
|---|---|---|
| .mc-address-group | Elemento DIV | Gruppo di indirizzi contenente l’elemento. I singoli elementi del modulo di indirizzo sono modificati come gli elementi generali del modulo sopra elencati. |
Campi del telefono USA
| Selettore CSS | Nome/Tipo | Descrizione |
|---|---|---|
| .phonefield-us | Elemento DIV | Elemento contenitore di input campo telefono. |
| Input .phonefield-us .phonearea | Input di testo | Input prefisso telefonico. |
| .phonefield-us .phonedetail1 input | Input di testo | Input per le prime tre cifre dei numeri di telefono statunitensi. |
| .phonefield-us .phonedetail2 input | Input di testo | Input per le prime quattro cifre dei numeri di telefono statunitensi. |
| .phonefield-us .small-meta | Elemento SPAN | Suggerimento di testo per l’input del formato telefonico (###) ###-#### |
Assistenza tecnica
Hai una domanda?
Gli utenti a pagamento possono effettuare il login per accedere al supporto via email e chat.
Correlati
Determina la posizione di iscrizione alla pagina web
Imposta il tuo modulo Mailchimp per monitorare la pagina web su cui gli abbonati si iscrivono. Scopri di più sul codice HTML e sugli altri passaggi necessari per iniziare.