Come inserire il modulo di contatto di Blogger in una pagina statica.

Come personalizzare il modulo di contatto di Blogger e inserirlo in una pagina statica.

Dopo una lunga attesa è finalmente stato rilasciato dal Team di Blogger il modulo di contatto ufficiale sotto forma di widget da inserire in una sidebar. Tale gadget può in qualche misura essere personalizzato andando a analizzare quali siano le classi di stile del widget con uno strumento come Firebug. In questo articolo vediamo come si possa inserire tale modulo di contatto in una pagina statica in modo da rendere più agevole per i lettori digitare il messaggio a fronte dello spazio più ampio a disposizione.

Si procede come già descritto andando su Layout > Aggiungi un gadget e scegliendo la scheda Altri gadget quindi Modulo di Contatto. Si salva e si visualizzerà il modulo di contatto nella posizione in cui abbiamo scelto Aggiungi un gadget.

Si va adesso su Modello > Modifica HTML e si cerca il codice ]]></b:skin>. Subito sopra a questa riga si incolla quest'altro codice

#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;
}

Si salva il modello. Il gadget che avevamo inserito nella sidebar non sarà più visibile visto che abbiamo usato il tag display:none nel suo CSS. Andiamo adesso su Pagine > Nuova Pagina > Pagina Vuota e su Impostazioni pagina > Opzioni mettiamo la spunta su Interruzioni di riga > Utilizza il tag <br>. Sulla sinistra selezioniamo HTML alla destra di Scrivi  

Nell'Editor incolliamo questo nuovo codice

<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>
Email
<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>

Ora dobbiamo pubblicare la pagina statica senza andare su Scrivi ma direttamente da HTML. Se non facessimo così potrebbero modificarsi le posizioni dei vari campi. Ovviamente dobbiamo dare alla pagina un titolo tipo Contattami o qualcosa di simile. Il modulo di contatto avrà questo aspetto

Il pulsante Invia muterà colore se verrà puntato con il mouse, i campi Email e Messaggio sono obbligatori mentre Nome è facoltativo. Dopo che verrà inviato un messaggio il mittente visualizzerà la scritta che è stato correttamente spedito mentre il proprietario del blog se lo vedrà arrivare nella casella di posta elettronica. In linea di massima è consigliabile usare il servizio di Blogger rispetto a altri pur gratuiti che esistono come 123Contact Form perché non richiede nessun link. Il primo codice si può ulteriormente personalizzare modificando i codici dei colori, le larghezze e i margini. Non ho pubblicato una demo online per non ricevere i messaggi di test che molti di voi sono sicuro mi avrebbero inviato.