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

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

Blogger offre agli utenti un modulo di contatto ufficiale da quasi due anni. Per installarlo si va su Layout > Aggiungi un gadget > Altri gadget > Modulo di contatto. Nella finestra che si apre non esiste una configurazione e il modulo così come è potrà essere inserito in una sidebar o nel footer. In entrambi i casi non è molto soddisfacente vuoi perché comunque occupa dello spazio e soprattutto perché l'area per digitare il messaggio è molto piccola. 

Ho già presentato dei trucchi per inserire il modulo in una pagina statica e per crearlo con Google Drive per poi poterlo utilizzare anche con i modelli Dynamic Views. In questo post vedremo come mostrare il modulo di contatto in un post o in una pagina statica, come personalizzarlo nei colori e nella dimensione e come verificarne il suo funzionamento.

Questo modulo potrà essere utilizzato anche nei modelli a Visualizzazione Dinamica dove però ha delle difficoltà di digitazione quindi prima di utilizzarlo fate una verifica di funzionamento.

Per la sua realizzazione si va su Pagine > Nuova pagina, se si vuole pubblicare in una pagina statica, oppure su Bacheca > Nuovo Post se si vuole pubblicare in un articolo. In ogni caso dopo l'apertura dell'Editor si deve cliccare su HTML che si trova sulla sinistra accanto a Scrivi 

Nel corpo della pagina o del post si incolla questo codice

<style>
#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;
}
</style>
<form name='contact-form'>
<p>
</p>
Nome
<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>
<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>
<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 pubblica direttamente da HTML senza tornare su Scrivi. Per verificare il funzionamento basta compilare i moduli inserendo un nostro indirizzo email valido e andare su Invia. Il campo della Email è obbligatorio e se si tenta di inviare un messaggio senza compilarlo visualizzeremo una notifica in tal senso. Però non partirà comunque anche con questo campo perfettamente compilato senza un passaggio ulteriore.

Andiamo quindi su Layout > Aggiungi un gadget > Altri gadget > Modulo di contatto e in seguito clicchiamo su Salva e posizioniamo il widget nella Sidebar con il drag & drop.

Adesso il modulo funzionerà, come mostrato nel seguente screenshot, a meno che voi non abbiate lasciato in bianco il campo della email che è come detto obbligatorio



 L'amministratore del blog riceverà una email simile a questa

in cui alla fine del messaggio verranno visualizzati il nome e l'indirizzo email, che sono state digitate nel modulo, subito dopo alla espressione Cordiali saluti.

Dopo aver salvato il widget nella sidebar vedremo però ben due moduli di contatto. Il primo nel post o nella pagina statica in cui lo abbiamo posizionato e l'altro appunto nella sidebar che avrà visibile anche il titolo. Per nascondere il widget e il suo dovremo andare su Modello > Modifica HTML, cercare la riga ]]></b:skin> e subito sopra incollare questo codice

div.contact-form-widget {display:none;}

Si salva il modello. Il widget non si vedrà più ma il titolo sarà però ancora visibile. Dovremo quindi andare su Layout e cliccare su Modifica sul widget del Modulo di contatto. Il titolo non può essere cancellato però basterà sostituirlo con <span></span> e salvare per non vedere più nulla. Questo può essere fatto anche all'inizio. Concludo osservando come si possano personalizzare i codici dei colori e la larghezza del modulo settata al 90% dell'area del post.