Se ti sei mai iscritto per un abbonamento via email dovresti sapere di MailChimp. È un'azienda che aiuta i webmaster e gli operatori di marketing a fornire newsletter e altre campagne simili. Forniscono alcuni modelli HTML da utilizzare per i moduli di registrazione e le pagine di conferma, ma sono così generici che la maggior parte degli abbonati è annoiata dalla stessa interfaccia.
Mi piacerebbe dimostrare come personalizzare il modulo di iscrizione MailChimp in qualcosa di più unico. Tutto è basato sul codice HTML / CSS originale MailChimp e l'invio del modulo utilizzerà Ajax. Sembra complicato ma l'intero processo è più semplice di quanto ci si potrebbe aspettare. Dai un'occhiata alla mia demo di esempio per avere un'idea del tutorial completo.
Demo dal vivo - Scarica il codice sorgente
Iniziare
Per prima cosa dobbiamo accedere al dashboard di MailChimp per raccogliere il loro codice HTML. Accedi al tuo account o crea un nuovo account gratuito. Clicca? Elenchi? dal menu principale e otterrai una tabella di tutti i tuoi elenchi di abbonamenti. Potresti voler utilizzare un elenco esistente o creare un nuovo elenco per questo tutorial. In entrambi i casi fare clic sul nome della lista e otteniamo un'altra tabella che organizza tutti gli abbonati tramite l'indirizzo e-mail.
Ogni nuovo elenco inizierà vuoto ma non importa quanti abbonati hai. In questa pagina fai clic su? Form di iscrizione? e ci verranno presentate alcune opzioni. Le forme generali sono troppo semplici e non abbiamo il controllo sul codice. Selezionare? Moduli incorporati? e avrai un'interfaccia elegante per copiare / incollare l'HTML.
Ho scelto Super Slim per Classic perché ci sono meno CSS che impediscono il tuo design, tuttavia è ancora migliore di Naked senza alcun tipo di stile.
Il blocco sopra è il mio codice predefinito da MailChimp. C'è un sacco di organizzazione da fare, ovvero rimuovere tutti i commenti a meno che non ne abbiate veramente bisogno. Inoltre ho creato un nuovo foglio di stile styles.css e ho intenzione di combinare tutto insieme. Il inline #mc_embed_signup dovrebbe essere unito a un file CSS unificato insieme al codice sottile MailChimp. Questa è la mia strategia per personalizzare il design originale e perfezionare il layout del tutto.
Modifiche in HTML
Sarà più facile spiegare questo processo mostrando il blocco di codice aggiornato in modo da avere la possibilità di confrontare. Tutte le classi e ID e nomi sono stati lasciati in pace. È più saggio personalizzare il CSS utilizzando le classi / ID esistenti per garantire la compatibilità.
Il cambiamento più importante è l'attributo dell'azione del mio modulo. Tutto nell'URL è identico fino al post-JSON, che era in origine inviare nel modello MC. L'azione post restituisce una tipica pagina di completamento che tutti conosciamo. post-json restituirà una risposta JSON in base al successo o al fallimento della sottoscrizione e-mail. Si prega di notare che ho anche aggiunto & C =? alla fine di questo URL.
Lo scopo sarebbe delegare un metodo di callback che sia anche nelle risposte JSON. Non ne ho trovato un uso personale, ma ci sono molti post e discussioni sul tema delle funzioni di callback. Ricorda solo che dovrebbe far parte dell'URL dell'azione.
Inoltre potresti notare un div extra nella parte inferiore del contenitore del modulo. Sto usando l'ID #notification_container in una sintassi familiare come i nomi degli ID MailChimp. Una volta che JSON restituisce un valore, controlliamo in JavaScript e poi viene aggiunto alla pagina all'interno di questo div.
Aggiornamento CSS
A parte il tipico reset delle pagine, ho anche scritto i miei stili per i contenitori dei messaggi di avviso / successo. Le proprietà sono abbastanza tipiche quindi non entrerò nei dettagli, ma puoi trovarli all'interno del mio file styles.css consolidato.
Il modo migliore per personalizzare gli stili di moduli MC è riconoscere come vuoi che appaia. Il modulo è un sacchetto misto di percentuali e pixel, quindi è davvero a te che il designer fa ciò che vuoi. Elementi reattivi o fissi, in linea o in blocco. eccetera.
Ho aggiunto qualche spaziatura aggiuntiva al mio codice in modo che ci siano selettori a livello di blocco e stili in linea.
Questa è solo una piccola parte e si concentra sugli input e sul pulsante di invio. Sto usando un bordo inferiore per far apparire il pulsante 3D che poi si appiattisce quando si fa clic.È tutto abbastanza semplice e nessuno dei miei codici CSS dovrebbe essere confuso. Ho appena riposizionato il contenitore del modulo a una larghezza di 350 px, quindi tutto appare centrato sulla pagina.
Il tuo posizionamento cambierà se ne avrai bisogno all'interno della barra laterale, o l'intestazione o forse anche il piè di pagina. In questi casi è possibile spostare il contenitore delle notifiche sopra il modulo, o qualsiasi altra cosa abbia più senso. Sentiti libero di iniziare con il mio codice, ma iniziare con le impostazioni predefinite di MailChimp sono probabilmente altrettanto buone.
Se usassimo l'URL di azione originale, potremmo fermarci a questo punto e farlo. Il modulo è in gran parte ridisegnato e una volta che un utente fa clic su Invia, si apre una nuova scheda chiedendo loro di confermare l'abbonamento via e-mail. Ma per semplificare questo processo esamineremo un'alternativa jQuery per gestire l'invio.
MailChimp Signup e jQuery
Se non si dispone già di una copia di jQuery, scaricarne una e includerla nell'intestazione della pagina. Tutto il mio codice è scritto nei tag script in fondo alla pagina. In realtà mi sono imbattuto in questa soluzione in Stack Overflow che ha delineato gran parte del processo.
Proprio quando il documento è caricato sto configurando una variabile di riferimento jQuery modulo $. Ogni volta che si fa clic sul pulsante di invio, si impedisce l'invio predefinito (che aprirebbe una pagina dei risultati JSON) e si chiama invece una funzione definita dall'utente chiamata Registrare(). Il modulo $ stesso viene passato alla funzione come parametro.
Potrebbe sembrare confuso, ma questa funzione è in realtà un metodo lungo .ajax (). Si noti che è possibile estrarre l'attributo GET / POST dal modulo stesso, insieme all'URL dell'azione aggiornato. Tutti i valori di input sono serializzati e trasmessi proprio come PHP. Questo è il motivo principale per lasciare solo i nomi dei moduli di input e mantenere il modello originale.
Infine ci sono due callback di risposta Ajax su successo o errore. Se otteniamo un errore, MailChimp non può accettare la nostra richiesta e viene visualizzato il messaggio di avviso. Altrimenti hanno accettato la richiesta, ma non sappiamo se ha funzionato.
Se Ajax ha avuto successo, otteniamo un nuovo parametro che viene restituito in jQuery. In questo caso è chiamato dati che dovrebbe apparire come un oggetto JSON. Se i dati dei risultati dicono che non ha funzionato, sappiamo che c'è un problema con l'indirizzo e-mail, non valido o semplicemente non una stringa di posta elettronica. In entrambi i casi il messaggio di errore viene emesso nella pagina. Sto usando substr () per rimuovere la prima parte del codice del messaggio di errore.
O se il messaggio di dati ha esito positivo, dovremmo ottenere una stringa di restituzione che dichiari che l'utente deve controllare la posta in arrivo e confermare questo nuovo abbonamento. In entrambi i casi il messaggio di ritorno viene emesso nel contenitore delle notifiche usando il metodo .html () di jQuery.
Si prega di notare che anche se si registra con una e-mail casuale, questo non lo farò compaiono nell'elenco finché non è stato confermato. Per verificare se questo script funziona, è necessario utilizzare un indirizzo reale e fare clic sull'e-mail di conferma.
Demo dal vivo - Scarica il codice sorgente
Chiusura
Sono sempre stato leggermente infastidito dal modulo di opt-in predefinito di MailChimp. Spero che questo tutorial possa offrire un approccio leggermente diverso agli sviluppatori web e ai marketer di Internet. Ricorda inoltre che è possibile aggiornare il design dell'interfaccia per le pagine di conferma e le e-mail inviate a ciascun utente. Sentiti libero di scaricare il mio codice sorgente e includi questo modulo MailChimp aggiornato all'interno dei tuoi progetti.