Pubblicato il 27/05/13e aggiornato il

Come inserire il modulo di contatto di Blogger in una pagina statica.

Come personalizzare il modulo di contatto di Blogger e inserirlo in una pagina statica.
Dopo una lunga attesa è finalmente stato rilasciato dal Team di Blogger il modulo di contatto ufficiale sotto forma di widget da inserire in una sidebar. Tale gadget può in qualche misura essere personalizzato andando a analizzare quali siano le classi di stile del widget con uno strumento come Firebug. In questo articolo vediamo come si possa inserire tale modulo di contatto in una pagina statica in modo da rendere più agevole per i lettori digitare il messaggio a fronte dello spazio più ampio a disposizione.

Si procede come già descritto andando su Layout > Aggiungi un gadget e scegliendo la scheda Altri gadget quindi Modulo di Contatto. Si salva e si visualizzerà il modulo di contatto nella posizione in cui abbiamo scelto Aggiungi un gadget.

modulo-contatto-blogger

Si va adesso su Modello > Modifica HTML e si cerca il codice ]]></b:skin>. Subito sopra a questa riga si incolla quest'altro codice

#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;
}

Si salva il modello. Il gadget che avevamo inserito nella sidebar non sarà più visibile visto che abbiamo usato il tag display:none nel suo CSS. Andiamo adesso su Pagine > Nuova Pagina > Pagina Vuota e su Impostazioni pagina > Opzioni mettiamo la spunta su Interruzioni di riga > Utilizza il tag <br>. Sulla sinistra selezioniamo HTML alla destra di Scrivi  

pagina-statica-blogger






Nell'Editor incolliamo questo nuovo 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>

Ora dobbiamo pubblicare la pagina statica senza andare su Scrivi ma direttamente da HTML. Se non facessimo così potrebbero modificarsi le posizioni dei vari campi. Ovviamente dobbiamo dare alla pagina un titolo tipo Contattami o qualcosa di simile. Il modulo di contatto avrà questo aspetto

modulo-contatto-blogger[5]

Il pulsante Invia muterà colore se verrà puntato con il mouse, i campi Email e Messaggio sono obbligatori mentre Nome è facoltativo. Dopo che verrà inviato un messaggio il mittente visualizzerà la scritta che è stato correttamente spedito mentre il proprietario del blog se lo vedrà arrivare nella casella di posta elettronica. In linea di massima è consigliabile usare il servizio di Blogger rispetto a altri pur gratuiti che esistono come 123Contact Form perché non richiede nessun link. Il primo codice si può ulteriormente personalizzare modificando i codici dei colori, le larghezze e i margini. Non ho pubblicato una demo online per non ricevere i messaggi di test che molti di voi sono sicuro mi avrebbero inviato.




35 commenti :

  1. Caro Ernesto, da buon allievo ho sempre fatto quello che faceva il maestro. Ho sempre usato 123contact form seguendo i tuoi post. Domanda: tu utilizzerai il servizio di blogger o, visto che ti trovi bene, terrai 123contact form?

    RispondiElimina
    Risposte
    1. @# Per adesso continuo a tenere 123Contact Form perché con il modulo di Blogger riceverei i messaggi nell'account GMail collegato invece che nell'account di posta elettronica personalizzato per il blog.

      Elimina
  2. Io mi son mantenuta sul semplice: ho inserito il modulo di Blogger nell'area sotto il post e con i tag condizionali ho fatto in modo che si veda solo in una determinata pagina.

    RispondiElimina
    Risposte
    1. @# Può essere una soluzione. Potresti anche utilizzare una parte dei CSS di questo post per aumentare la larghezza del modulo se lo ritenessi troppo stretto.

      Elimina
    2. Sì, fatto. Grazie mille. :)

      Elimina
  3. Ciao Ernesto leggo sempre i tuoi ottimi post, anche se off topic ti volevo chiedere un consiglio parto con un nuovo blog, è vorrei di nuovo utilizzare blogger perchè mi trovo bene, ma molti mi dicono che ormai blogger è obsoleto rispetto a wordpress, sia come indicizzazione dove wordpress con i suoi plugin è anni avanti sia come plugin per migliorarlo . Cosa ne pensi è così penalizzato blogger rispetto a wordpress come indicizzazione e quindi lato SEO.

    Grazie

    RispondiElimina
    Risposte
    1. @# Dipende da quali siano i tuoi obiettivi. Forse ti può aiutare questo post
      http://www.ideepercomputeredinternet.com/2012/07/blogger-wordpress-cms-migliore.html

      Elimina
  4. Ma vedo che questo blog è fatto blogspot e credo abbia moltissime visite , quindi presumo che si possano avere moltissime visite anche con blog di blogger. Giusto?

    RispondiElimina
    Risposte
    1. @# Purtroppo questo sito non ha moltissimi visitatori :(
      Per avere molte visite bisogna affermarsi scrivendo su siti di cucina, moda, gossip, ecc. C'è però molta concorrenza...
      L'informatica soprattutto se affrontata in modo tecnico ha solo una modesta fetta di mercato :)
      Secondo te saranno di più le persone che su internet cercano la ricetta per fare la pasta alla carbonara o il codice per il widget degli ultimi articoli?

      Detto questo con Blogger si possono ottenere gli stessi risultati di Wordpress a parità di altre condizioni.

      Elimina
  5. Grazie quello che mi aspettavo che mi dicessi era proprio """"Detto questo con Blogger si possono ottenere gli stessi risultati di Wordpress a parità di altre condizioni.""""

    Qualche post che non può mancare per iniziare con blogger nel mio nuovo sito con la marcia giusta

    RispondiElimina
  6. Ciao ho inserito come tua procedura il form contatti di blogger in una pagina statica , funziona ho provato a compilare e mi arriva la mail di chi ha fatto la richiesta , il problema è che non visualizzo la sua mail è quindi non posso rispondergli , come fare?

    RispondiElimina
    Risposte
    1. @# Questa è la ragione per cui io continuo a tenere il modulo di 123Contact Form :)

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

    RispondiElimina
  8. ho fatto una prova dopo avere inserito nel sito il modulo di contatto, ma non mi arriva nessuna mail. Come mai?

    RispondiElimina
    Risposte
    1. Si tratta del modulo ufficiale di Blogger quindi dovrebbe funzionare. Prova ad aspettare o fai un'altra prova.
      @#

      Elimina
  9. Salve Ernesto, volevo chiedere se, con il modulo di contatto di Blogger, si può decidere su quale mail far arrivare il messaggio... per esempio nel caso ci siano due amministratori dello stesso blog... Grazie!

    RispondiElimina
  10. Ciao Ernesto! A me servirebbe poterlo inserire in un post come html direttamente nella pagina di testo.. se inserissi questi codici li non funzionerebbero? Come potrei fare diversamente? Grazie!

    RispondiElimina
    Risposte
    1. Apri l'Editor di un post come al solito andando su Nuovo Post in alto a destra nella Navbar o direttamente dalla Bacheca. Sulla sinistra clicca su HTML accanto a Scrivi e 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>

      Pubblica il post direttamente da HTML senza tornare su Scrivi. Se poi lo modifichi ricordati sempre di pubblicare da HTML

      @#

      Elimina
    2. Meglio ancora segui questo post
      http://www.ideepercomputeredinternet.com/2015/03/blogger-modulo-contatto-post-pagina-statica.html
      @#

      Elimina
    3. Ciao Ernesto! Grazie! L'ho provato e a funzionare funziona, però ho qualche problemino con la ricezione e non c'è nulla neanche nella cartella spam. Una domanda: ma se qualcuno volesse inviare nel campo di testo un'immagine per esempio caricata su tinypic è possibile? Oppure inserire direttamente il campo scegli file.. Grazie, ciao!

      Elimina
    4. Come ricezione? Metti un indirizzo giusto e verrà inviato a quello. Non è possibile inviare cose diverse dal testo, almeno credo, non ho mai provato :)
      @#

      Elimina
  11. Ciao, grazie per le tue dritte sempre utili.
    Ho seguito le istruzioni per inserire il modulo in una pagina e tutto funziona a dovere, tranne che il modulo mail mi compare anche a piè di pagina in tutte le pagine del blog (quindi suppongo che il comando per rendere invisibile il widget non funzioni). Esteticamente il risultato è piuttosto sciatto. Come posso fare? Grazie!

    RispondiElimina
    Risposte
    1. Per prima cosa rimuovi il widget che hai nel piè di pagina del modulo di contatto di Blogger e poi segui quest'altro post
      http://www.ideepercomputeredinternet.com/2015/03/blogger-modulo-contatto-post-pagina-statica.html
      sullo stesso tema che è più recente e che quindi ha un codice migliore. Segui anche la parte finale che serve per nascondere il widget nella sidebar
      @#

      Elimina
  12. Ciao Ernesto! Sempre rimanendo in argomento di moduli, è possibile costruire form personalizzati, come quelli per prenotazioni online? Se sì, come li creo e come li inserisco nel mio blog (magari in una pagina statica).
    Grazie mille!

    RispondiElimina
    Risposte
    1. Sì è possibile con Google Drive
      http://www.ideepercomputeredinternet.com/2013/10/sondaggio-modulo-google-drive.html
      Il post illustra come creare un sondaggio ma si possono modificare i campi come si vuole per adattarli a qualsiasi cosa. Si può anche tenere conto delle risposte che possono considerate anche come registrazioni
      @#

      Elimina
    2. Perfetto, ho già provato e funziona!!!!
      Grazie mille Ernesto, sei un mito!

      Elimina
  13. bene grazie ernesto.C'è modo di modificare la mail prestabilita nel classico form di blogger ed inserirne un'altra scelta dall'amministratore? Grazie

    RispondiElimina
    Risposte
    1. Credo di no. Puoi però usare un altro servizio come 123ContactForms
      http://www.ideepercomputeredinternet.com/2010/08/come-creare-una-pagina-di-contatto-un.html
      @#

      Elimina
  14. Grazie per la risposta.Ti chiedo un off topic apporfittando della tua gentilezza. I tag h2 quando li inserisco nel titolo di ogni post una volta che avvicino il mouse all'icona g+1 si vede oltre al titolo del post anche propiro il codice del tag.C'è un altro modo per inserirli?
    Credimi non ho trovato alcuna guida on line........hai dritte?

    RispondiElimina
    Risposte
    1. I tag h2 li inserisci tramite Editor scegliendo Intestazione immagino. Non vedo il rapporto con l'icona di g+. Probabilmente è un problema del tuo modello. In ogni caso mi sembra di scarso rilievo
      @#

      Elimina
  15. Buonasera gentilissimo signor Ernesto. Ho seguito la sua guida ed ha funzionato alla perfezione. La ringrazio tanto. L'unica cosa che però vorrei riuscire a cambiare è la presenza della barra di condivisione di Blogger sotto al pulsante Invia, quella con i pulsanti di Email, Blogger, Twitter, ecc... In questa pagina, quella dei contatti, sinceramente non gradisco la presenza di questa barra là sotto. C'è modo di levarla solo da questa pagina? La ringrazio intanto per l'ascolto.

    RispondiElimina
    Risposte
    1. Ho salvato il tuo commento. Non ti posso spiegare come procedere in poche righe. Seguimi i prossimi giorni che ci farò un post, potrebbe essere utile anche ad altri
      @#

      Elimina
  16. Certamente, grazie mille per ora signor Ernesto.

    RispondiElimina

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.