Come mostrare il modulo di contatto 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.

Tags:

Add a Comment

X