Pubblicato il 31/05/17 - aggiornato il  | 15 commenti :

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

modulo-contatto-blogger

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

invire-messaggio-modulo-blogger

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.


15 commenti :

  1. E se si volesse aggiungere anche il campo "telefono"? Esiste un modo per farlo?

    RispondiElimina
  2. Non con questo modulo. Per aggiungere tutti i campi che si vuole e anche un controllo visivo si può creare un modulo di contatto con Google Gruppi
    http://www.ideepercomputeredinternet.com/2015/10/google-drive-modulo-contatto-captcha-controllo-visivo.html
    @#

    RispondiElimina
  3. Domanda da un milione di dollari: considerato il temutissimo GDPR, si può aggiungere la casella per la spunta della privacy?

    RispondiElimina
    Risposte
    1. Dove? Nel modulo? Al momento no. O almeno a me non riesce 🤨
      @#

      Elimina
  4. Grazie infinite! Ho notate però che da smartphone non funziona (non invia il messaggio, cliccando sul bottone non accade nulla). Come si può ovviare a questo problema?

    RispondiElimina
    Risposte
    1. Anzi, adesso non va nemmeno da desktop. Può essere perché sono passato da http a https?

      Elimina
    2. Mi sa che Blogger non preveda più questa possibilità
      @#

      Elimina
  5. Ciao Ernesto: io vorrei fare questo: mettere il modulo contatti in una pagina statica, ma non riesco a trovare la riga ]] trovo solo b:widget poi b:includable poi b:section, b:message, b:param, b:if, b:include e b:else. Uso un tema contempo. A quale riga devo cercare questo ]] ? Grazie se puoi rispondermi.

    RispondiElimina
  6. Ciao Ernesto, mi aggrappo a questo tuo vecchio post. Sono riuscito a creare il modulo di contatto in pagina statica ma ho un problema , che tra l'altro si presenta solo dal browser web del pc (su tablet e smartphone tutto ok). Praticamente la scritta email* non va a capo, ma appare contigua al form dove inserire nome. Soluzioni?
    Grazie mille

    RispondiElimina
    Risposte
    1. @# Inserisci un tag <br/> nel secondo codice tra gli elementi che vuoi dividere, Se non funzionasse metti due tag così <p></p>

      Elimina
    2. Questo commento è stato eliminato dall'autore.

      Elimina
    3. Tutto risolto, grazie al tag
      . Grazie mille, gentilissimo.

      Elimina
  7. Risposte
    1. Vedere si dovrebbe vedere ma il pulsante potrebbe non funzionare perché il codice per creare il bottone potrebbe non essere supportato dagli smartphone.
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy