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

Come spostare il modulo di contatto di Blogger dalla sidebar a una pagina statica e come personalizzarlo nella forma e nei colori.

A seguito di un commento ricevuto qualche giorno fa riprendo un widget per Blogger che avevo già proposto diversi anni fa. Si tratta del modulo di un modulo di contatto da mostrare in una pagina statica di Blogger.

Nella piattaforma di blogging di Google c'è già un widget nativo per questa funzionalità che però può solo essere incollato nel layout del sito ovvero nella sidebar o nel footer occupando dello spazio che può essere usato in modo più oculato.

In questo post vedremo come spostare il widget di Blogger dalla sidebar a una pagina statica. Testerò il procedimento nei Nuovi Temi di Blogger ma il modulo funzionerà anche nei modelli precedenti.

Si va su Layout -> Aggiungi un gadget -> Altri gadget -> Modulo di Contatto. Si va su Salva e si posiziona il widget nella Sidebar. Adesso dobbiamo creare dei CSS cioè delle regole per nascondere il modulo nella sidebar e per personalizzarlo.

Dopo aver salvato il modello per un eventuale ripristino si va su Tema -> Modifica HTML, si cerca la riga ]]></b:skin> quindi, subito sopra a questa, si incolla questo codice

/* Modulo Contatto Stile */
#ContactForm1{
display:none !important;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
width: 90%;
height:50px;
margin-bottom: 20px;
}
#ContactForm1_contact-form-email-message {
width: 90%;
height:200px;
margin-bottom: 20px;
}
#ContactForm1_contact-form-submit {
width:150px;
height:40px;
background: #036;
font-size:22px;
font-weight:bold;
color: #fff;
}

Si salva il Tema. In questo modo verrà nascosto il Modulo di Contatto nella Sidebar.

Adesso dovremo inserire il modulo di contatto in una pagina statica. Si va quindi su Pagine -> Nuova Pagina e si dà un titolo alla pagina come Contattami o simile. Si clicca su HTML accanto a Scrivi per applicare tale modalità nell'Editor. Si va sulla destra su Impostazioni -> Pagina -> Opzioni e si mette la spunta a Commenti dei lettori -> Non consentire, nascondi quelli esistenti.

Nell'area della pagina si incolla questo 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>

Si va su Pubblica e si apre la pagina per visualizzare il modulo di contatto che avrà questo aspetto

Nel primo codice si può personalizzare l'aspetto del modulo di contatto nelle dimensioni dei campi e dei bottoni e nella larghezza degli stessi (90% del layout fino a un massimo di 500 pixel). È anche possibile personalizzare i colori di sfondo e di testo del bottone Invia.

L'utente che manderà il messaggio visualizzerà in basso la notifica che questo è stato inviato

Nella casella di posta elettronica dell'account Gmail collegato a Blogger riceveremo una notifica del messaggio ricevuto a cui potremo eventualmente rispondere. Moduli di contatto più sofisticati con fogli di lavoro creati automaticamente con tutti i dati dei messaggi possono essere creati con Google Drive.