Tutti coloro che gestiscono un sito o un blog devono inserire un recapito per poter essere rintracciati. La maggior parte delle persone preferisce inserisce il proprio indirizzo email, ma questo non fa altro che aumentare lo spam nella posta elettronica. Si può però nascondere l'email personale dai bot dello spam, ma rimane ugualmente una soluzione poco professionale. L'ideale sarebbe utilizzare i cosiddetti moduli di contatto con appositi campi da compilare. Per quanto riguarda la piattaforma Blogger/Blogspot, il più utilizzato è quello fornito da 123Contact Form ma essendo gratuito chiedono giustamente che alla fine del modulo di contatto appaiano i crediti (ovvero un link che rimanda al loro sito).
Fortunatamente su Blogger hanno di recente inserito un modulo di contatto che può essere inserito come widget, nelle sidebar o nel footer del blog. Per aggiungerlo bisogna andare su Layout > Aggiungi un Gadget > Altri Gadget > Modulo di contatto.
Fortunatamente su Blogger hanno di recente inserito un modulo di contatto che può essere inserito come widget, nelle sidebar o nel footer del blog. Per aggiungerlo bisogna andare su Layout > Aggiungi un Gadget > Altri Gadget > Modulo di contatto.
Date un titolo al widget del Modulo di Contatto, oppure lasciatelo così, con la scritta di default per farlo sembrare più carino e di facile interpretazione, non tutti sanno che serve per essere contattati.
La grafica è più o meno simile a quella sottostante:
Come potete notare bisogna inserire il nome, ma questo non è obbligatorio a differenza dell'email e del testo del messaggio. Ovviamente l'email alla quale deve arrivare il messaggio deve essere per forza quella collegata al vostro account di Blogger.
Qualcuno mi ha fatto notare che le email non arrivano. In realtà arrivano tutte, solo che Gmail suddivide le email in più sezioni a seconda del grado di importanza. Ad esempio ho notato che quelle che ricevo io vengono messe nella sezione "Social", ovvero nella stessa sezione dove ricevo le inutili notifiche di Google+ o di altri social network. Se provate ad inviarvi una email, vi apparirà il seguente messaggio:
Nota. Questa email è stata inviata mediante il gadget Modulo di contatto all'indirizzo http://www.scuolissima.com
ciò vuol dire che se disponete di più di un blog su Blogger vi verrà semplice capire da quale blog vi arrivano le email.
Il seguente modulo di contatto si può mostrare o nascondere in pagine specifiche come la Homepage le etichette, gli articoli ecc. Oppure si può anche integrarlo dentro un post o una pagina statica (scelta consigliata).
Come inserire il modulo contatti dentro un post o pagina
Per mostrare questo utile widget dentro un articolo o una pagina, dovrete prima di tutto aggiungere il css sottostante prima del tag ]]></b:skin> che servirà a rimuoverlo come widget laterale:
#ContactForm1{
display:none !important;
}
.contact-form-widget {
max-width: 90%;
margin: 2 auto;
padding: 20px;
background: #eee;
color: #191919;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 90%;
margin-bottom: 20px;
}
.contact-form-button-submit {
width:100px;
background: #0e50bc;
font-size:14px;
font-weight:bold;
color: #fff;
}
Dopodiché dovrete creare un articolo o pagina e, direttamente dalla modalità HTML e, senza mai andare nella modalità Scrivi, dovrete incollare il codice sottostante:
<form name='contact-form'>
<p></p>
Nome<br />
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='50' value='' type='text' />
<p></p>
<span style='font-weight: bolder;'>*</span><br />
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='50' value='' type='text' />
<p></p>
Messaggio<span style='font-weight: bolder;'>*</span><br />
<textarea class='contact-form-email-message' cols='50' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' value='Invia' type='button' />
<p></p>
<div style='text-align: center; max-width: 500px; width: 90%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
