Mailchimp è probabilmente uno dei più usati e conosciuti servizi di newsletter esistenti, sia grazie alle sue funzionalità evolute e alla semplicità di utilizzo, sia grazie ad un piano gratuito che permette la sottoscrizione di utenti sino ad un massimo di 2000 persone.
Come molti altri servizi simili, anche Mailchimp, offre un comodo sistema di creazione di “sign up forms”, cioè i form di iscrizione alla vostra newsletter che potete andare ad inserire sul vostro sito semplicemente copiando il codice che vi viene fornito.
Il tool per creare i form è potente, semplice da usare e permette una discreta personalizzazione sia per quanto riguarda i contenuti sia per quanto riguarda lo stile associato ai vari campi e bottoni (colore, bordo, sfondo ecc…), ma è piuttosto carente quando si tratta di creare un form di iscrizione che si sviluppa in orizzontale e non in verticale.
Esiste in realtà un’opzione dedicata ai form orizzontali ma di default recepisce solamente due bottoni: “Nome” e “Email” andando quindi a limitare il tipo di informazioni che è possibile recuperare; analogamente non recepisce eventuali aggiunte di campi inseriti mediante al creazione del form standard.
Ecco quindi che in questa brevissima guida vi mostro come creare un form orizzontale di iscrizione ad una newsletter andando ad agire direttamente sul css del vostro sito; con poche righe di codice aggiuntive lo renderemo anche responsivo in modo da adattarlo a tutte le risoluzioni.
Creare un form standard con tutti i campi necessari
Per prima cosa è necessario accedere a Mailchimp con il proprio account e andare nella sezione “Lists” dove dovete creare una lista che volete riempire di contatti ognuno definito da un certo numero di campi (es. Nome, email, sito web).
Create una lista e al suo interno troverete, man mano che gli utenti si iscrivono, l’elenco dei contatti.
In questa schermata vedrete in alto il bottone “Signup Forms” che vi permette di creare il vostro modulo di iscrizione personalizzato da inserire all’interno del vostro sito. Cliccateci sopra e vedrete le possibilità standard inserite da Mailchimp.
Cliccando sul primo bottone “General Forms” andrete a definire i campi presenti sui sul form di iscrizione e il loro comportamento, per esempio potete definire quali campi sono necessari e quali no; in questo esempio ho creato un form contenete Nome, Email e un campo testo dove fare inserire il nome dell’azienda o il sito web.
Create quindi il vostro modulo di iscrizione inserendo le informazioni che ritenete necessarie per la vostra attività di newsletter, tenendo presente che per un modulo orizzontale sarebbe meglio non superare i 3 campi, per una questione di layout generale del sito.
Una volta fatto questo passaggio tornate nella schermata precedente e cliccate sul bottone “Embedded Forms” dove potrete vedere i classici modi in cui Mailchimp vi propone di inserire il form appena creato sul vostro sito.
Vi invito per scrupolo ad andare a cliccare sulla voce “Horizontal” e vedrete che il form che comparirà nella preview non ha nulla a che vedere con quello che avete creato in precedenza, in quanto mostrerà solamente il campo mail e il bottone iscriviti (questo per me rimane un mistero).
Per ottenere il risultato voluto scegliamo invece la voce “Naked” che contiene tutti i campi che avrete inserito nelle creazione del form standard e , soprattutto, viene fornito privo di qualsiasi codice Css (da qui il termine nudo) per la formattazione dei campi.
In basso troverete il codice Html/js da copiare e incollare sul vostro sito e su cui lavoreremo per ottenere un risultato apprezzabile.
Aggiungere il codice CSS per il vostro form
Dopo che avrete inserito il vostro codice provate a visualizzare il risultato: piuttosto scadente vero?
Vediamo come migliorarlo aggiungendo alcuni semplici righe di Css.
Il codice originale dovrebbe essere qualcosa del genere:
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="QUI C'E' IL CODICE ID LEGATO AL VOSTRO ACCOUNT MAILCHIMP" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-FNAME">Nome </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Indirizzo Email <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-MMERGE3">Sito web o nome azienda </label>
<input type="text" value="" name="MMERGE3" class="" id="mce-MMERGE3">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="QUI C'E' IL CODICE ID LEGATO AL VOSTRO ACCOUNT MAILCHIMP" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!–End mc_embed_signup–>
Come prima cosa vi consiglio di racchiudere questo codice in una <section> e di fornire a quest’ultima una classe/id specifico (a seconda della struttura del vostro sito ovviamente). Questo faciliterà e velocizzerà eventuali modifiche future senza dover toccare le classi specifiche fornite da Mailchimp.
Supponiamo che abbiate scelto come nome della classe del contenitore del form il termine “form-newsletter“, andate quindi ad aggiungere al vostro file Css quanto segue avendo cura di eliminare i commenti:
.form-newsletter{background: #222;
padding: 25px;
color: #ccc;} -----> Modificate il colore di sfondo di tutto il form, la spaziatura interna e il colore del font
.form-newsletter h3{color: #ccc;} --->scegliete il colore del titolo del form
.mc-field-group{display: inline-block;
width:25%} --> disponete in linea, per una larghezza del 25% ogni campo del vostro form
.clear {display: inline-block;
color: white;
font-weight: 300;}
.input-invio{width: 15%} ----> disponete il linea per una larghezza del 15% il bottone "Sottoscrivi"
.input-invio input{width: 100%; background: #ff7f00;
border: 3px solid #ff7f00;
font-weight: bold;} ---->scegliete l'aspetto che deve avere il vostro bottone "Sottoscrivi"
.mc-field-group input{width:100%;
color:black}
.form-newsletter label{display: none;
visibility: hidden} ---> rendete invisibili le label dei singoli campi perchè occupano inutilmente spazio, non vi preoccupate andremo ad inserirle dopo come placeholder
ora è necessario andare a modificare leggermente il codice fornito da Mailchimp in modo che recepisca le nostre modifiche.
In particolare dovete cercare tutti i campi input che presentano una label e che rappresentano le informazioni che raccogliete da vostri sottoscrittori; per esempio il campo nome si presenta in questo modo originariamente
<input type=”text” value=”” name=”FNAME” class=”” id=”mce-FNAME”>
e lo dovete modificare n questo modo
<input type=”text” value=”” name=”FNAME” class=”” id=”mce-FNAME” placeholder=”Nome”>
andando quindi ad aggiungere il placeholder, cioè il testo che compare di default all’interno dei campi del modulo prima che un utente inizi a scrivere e che di fatto sostituiscono le label che abbiamo nascosto via css.
Analogamente, seguendo l’esempio riportato sopra, dovrete modificare anche i campi email e sito web/nome azienda come segue
<input type=”email” value=”” name=”EMAIL” class=”required email” id=”mce-EMAIL” placeholder=”Email”>
<input type=”text” value=”” name=”MMERGE3″ class=”” id=”mce-MMERGE3″ placeholder=”Sito o Nome Azienda”>
Abbiamo quasi finito!
Ora, al fine di rendere presentabile anche il bottone di sottoscrizione è necessario inserire la classe “input-invio” all’interno del codice.
Cercate questa linea di codice
<div class=”clear”><input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe” class=”button”></div>
e modificatela in questo modo
<div class=”clear input-invio”><input type=”submit” value=”Iscriviti” name=”subscribe” id=”mc-embedded-subscribe” class=”button”></div>
Se avete seguito esattamente questa guida e non avete commesso errori il risultato che vi dovrebbe apparire è il seguente
Rendere il form responsivo
Per concludere questa guida bisogna ancora rendere responsivo il vostro form, in modo che anche sui cellulari i campi compilabili siano bene visibili.
Per fare questo andiamo ad utilizzare delle banalissime regole css inserite in una media query che si attiveranno solamente quando la risoluzione del dispositivo, con cui si sta guardando il sito, sarà inferiore ai 768px.
Vi basterà copiare quanto segue al fondo del vostro foglio di stile:
@media screen and (max-width:767px){
.form .mc-field-group{
width: 100%;
padding: 10px;
margin:10px 0px;
}
.input-invio{width: 100%}
Add Comment