Pubblicato il 28/03/15e aggiornato il

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.

modulo-contatto

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 

codice-modulo

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.

modulo-contatto-blogger

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

modulo-contatto[5]

 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.




25 commenti :

  1. Buona domenica Ernesto,
    ho incontrato un piccolo intoppo con l'ultima parte del procedimento. Il modulo funziona correttamente, ma resta visibile solo il titolo del gadget nella sidebar nonostante abbia inserito il codice da te indicato per nasconderlo. Specifico che uso un modello base di blogger.
    Grazie per l'attenzione.

    RispondiElimina
    Risposte
    1. Ho aggiornato l'ultima parte del post. Per non visualizzare neppure il titolo lo devi sostituire con
      <span></span>
      e quindi salvare l'elemento
      @#

      Elimina
    2. Grazie per la pronta risposta, ora è tutto nascosto!

      Elimina
  2. Funziona, ma il widget email a piè di pagina è scomparso solo nella pagina dove è pubblicato il modulo mail, mentre rimane visibile nelle altre.
    se vuoi dare un'occhiata:
    http://thebluecover.blogspot.it/p/contatti.html
    http://thebluecover.blogspot.it/

    RispondiElimina
    Risposte
    1. @# Forse mi sono spiegato male. Lo devi pubblicare in una pagina statica e non nella sidebar. Inoltre devi togliere quello che sta nel footer. Forse hai un modello scaricato da internet con il modulo di contatto già incorporato nel footer. Per nascondere quello del footer se non riesci a toglierlo prova a incollare sempre sopra a /b:skin questo codice
      div#ContactForm1 {display:none;}

      Elimina
    2. Non capisco. Il widget nel footer c'è perchè le tue istruzioni dicono di metterlo dopo aver pubblicato il modulo email nella pagina statica. Ho anche inserito la stringa nel codice del modello per rendere invisibile il widget nel footer, ma rimane visibile. Posso togliere il modulo mail dal footer, ma poi non mi funziona più quello pubblicato nella pagina. In sostanza tutto va come descritto nelle tue istruzioni, ma non riesco a rendere invisibile il modulo mail nel footer. Dove sbaglio?

      Elimina
    3. Se lo vuoi mettere nel footer invece che nella sidebar va bene. Nella pagina statica però non lo hai messo. In questa pagina
      http://thebluecover.blogspot.it/p/contatti.html
      lo vedo tutto a destra. Non so perché. Non ti funziona il codice del commento 3.a? eppure dovrebbe funzionare per nasconderlo
      @#

      Elimina
    4. tento di chiarire: ho messo il modulo mail nella pagina contatti che dovrebbe essere una pagina statica (o no?). L'ho spostato a destra io per ragioni grafiche. Il problema è che lo vorrei solo in quella pagina, ma nonostante abbia inserito la stringa per nasconderlo dal footer me lo ritrovo lo stesso a piè di pagina.

      Elimina
    5. Tutto a posto!
      Ho tolto il codice per nascondere il widget e ho salvato il modello, poi l'ho riaperto e ho reinserito il codice nello stesso posto e ora il widget è sparito. Non so perché adesso funziona e prima no, ma va bene! :)

      Elimina
  3. ciao Ernesto , anche io ho lo stesso problema di perrymason , potresti darmi una mano?

    RispondiElimina
    Risposte
    1. Perry Mason ha detto che era andato tutto a posto. Se segui le istruzioni non ci sono problemi. Ricordati di pubblicare da HTML la pagina statica senza tornare su Scrivi altrimenti non funziona.
      @#

      Elimina
  4. si , ciao Ernesto , subito dopo la pubblicazione del mio commento ero riuscito a risolvere, grazie mille per le tue guide!

    RispondiElimina
  5. Ciao Ernesto, ho un problema, il modulo di contatto mi funziona come widget, ma non mi funziona nel post in cui l'ho inserito... si vede tutto ma quando vai a cliccare su invio non succede nulla... mi puoi aiutare per risolver questo problema?

    RispondiElimina
    Risposte
    1. Prova a reinstallarlo reincollando tutto il codice del modulo stando bene attenta a pubblicare o meglio aggiornare restando su HTML senza tornare su Scrivi. Statisticamente è questa la causa più comune del mancato funzionamento
      @#

      Elimina
  6. Grazieeee... sei un grande persino una imbranata zuccona come me ce l'ha fatta!!!! Funziona!!!

    RispondiElimina
  7. Sulle visualizzazioni dinamiche non funziona anche se ho seguito tutto alla lettera. Quale può essere la motivazione? Grazie

    RispondiElimina
    Risposte
    1. Dovrebbe funzionare anche sulle Dinamiche. Lo screenshot è stato preso da una pagina statica di un blog Dynamic Views. Poi puoi aprire questa pagina di test
      http://dynamicviewstest.blogspot.it/p/modulo-contatto.html
      Come ti ho già detto in un altro commento devi incollare il codice e pubblicare direttamente da HTML
      @#

      Elimina
    2. Infatti ho fatto come dici...una curiosità forse sciocca fatta da uno come me che non ha la tua conoscenza specifica, ma nel form non vedo l'indirizzo di recapito posta. Come è possibile e dove andrebbero a finire le mail? Mi sono perso qualcosa?
      Grazie ancora ;)

      Elimina
  8. Le email vengono inoltrate all'indirizzo email collegato a Blogger.
    @#

    RispondiElimina
    Risposte
    1. Grazie. Comunque la tua pagina test è identica alla mia, nel senso che dopo aver pigiato "avvio", non si genera: "il messaggio è stato inviato".
      Grazie ancora!

      Elimina
    2. Un sistema molto più sofisticato con Foglio di lavoro per elaborare i messaggi ricevuti lo puoi trovare qui
      http://www.ideepercomputeredinternet.com/2015/10/google-drive-modulo-contatto-captcha-controllo-visivo.html
      e qui c'è la demo per i Dynamic Views
      http://dynamicviewstest.blogspot.it/p/contattami.html
      @#

      Elimina
    3. Si si, è quello che ho nel mio blog, solo che ogni volta devo andare su Google Drive per visualizzare.
      Grazie ;)

      Elimina
  9. Nella mia pagina test lo avevo disabilitato per non ricevere email. Non mi ricordo come :-)
    @#

    RispondiElimina
    Risposte
    1. Ricevere mail anche da un blog test è veramente il massimo...sei proprio importante :)
      Un saluto!

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.