Pubblicato il 28/03/15 - aggiornato il  | 39 commenti :

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.


39 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
  10. Ciao Ernesto grazie ancora per tutto.
    Voglio precisare che da me non c'è bisogno di mettere il {display:none;}, perché anche se ho selezionato il Modulo Contatti dalla Bakeca e messo nella sidebar, NON si vede lo stesso.
    Adesso seguo le tue istruzioni, optando per il post.

    RispondiElimina
    Risposte
    1. Come immaginavo: non funziona!
      In effetti nella sidebar il gadget modulo contatti non si vede, anche se è inserito dal layout... così non funzione neanche nella pagina statica???
      Il modulo appare, ma non INVIA.
      C'è pura un'altra anomalia nel box messaggio quello che si scrive non segna lo spazio, cioè non puoi staccare le parole.

      Elimina
  11. È vero. Ho testato. Per lo spazio si può risolvere digitando nel Blocco Note e poi incollando. Però il bottone Bper una ragione che non conosco non invia. Quando ho scritto il post funzionava. Peccato.
    @#

    RispondiElimina
    Risposte
    1. Pazienza... ma a Francesco (quellichelinter) funziona!
      Forse perché è con Google drive?

      Elimina
  12. Domande:
    Si potrebbero indirizzare i msg ad altre email e, nel caso, in che modo?
    Non c'è un css semplice da aggiungere per far apparire tipo una conferma del messaggio inviato senza usare google drive? Grazie in anticipo.

    RispondiElimina
    Risposte
    1. ah, non so perché ora mi compare il msg è stato inviato. Resta il problema dell'email a cui inviarli.

      Elimina
  13. Io da sempre uso 123ContactForm per il modulo di contatto
    https://www.ideepercomputeredinternet.com/2017/03/modulo-contatti-123contactform.html
    I messaggi arrivano all'indirizzo email con cui ti iscrivi. Ci sono molte personalizzazioni, alcune a pagamento. Con la versione gratuita devi lasciare il link al sito nella pagina statica in cui metti il modulo
    @#

    RispondiElimina
    Risposte
    1. Sì anche io l'ho usato seguendo il tuo esempio. Solo che ha messo un limite di 100 msg al giorno mi sembra e non vorrei lo abbassasse all'improvviso. Magari lo terrò sotto controllo, grazie come sempre.

      Elimina
  14. 100 messaggi al mese significa piu di 3 messaggi al giorno. Sei sicura di riceverne di più? Se ne ricevessi cosi tanti toglierei il modulo di contatto perché non avrei tempo di rispondere a tutti. Ci sono sempre le pagine Facebook e altri social per l'ordinaria interazione con i lettori. L'invio di email deve essere una eccezione e non la regola
    @#

    RispondiElimina
    Risposte
    1. Sì infatti.
      Figurati, riceverei poche email, temevo solo che abbassassero la soglia dei 100 nel tempo.
      Alla fine mi sono decisa per il modulo contatti di blogger. Quello di 123contact non è più personalizzabile e il vecchio codice che ho non ha la captcha di google che vorrei, oltre al fatto che non è responsive. p.s. Avevo dimenticato quanto tu fossi prezioso, ora che sto lavorando sul nuovo tema, è incredibile come ogni mio dubbio sia risolto dai tuoi post. Grazie ancora. :)

      Elimina
    2. Salve Ernesto, ho inserito nell html del mio sito una frase il problema è che questa frase mi spunta anche in Home page io voglio che sia visibile solo all'interno dell'articolo come si posso fare se è possibile farlo Grazie anticipazioni per la risposta

      Elimina
    3. Devi usare i tag condizionali seguendo queste istruzioni
      https://www.ideepercomputeredinternet.com/2016/08/blogger-conditional-tags.html
      Nella fattispecie devi inserire il contenuto da mostrare solo nei post e non in home tra i due tag il cui secondo è sempre lo stesso e il primo lo trovi nella riga della tabella con l'indicazione Elemento solo nei post
      @#

      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