Lavoriamo insieme ✨

Sei pronta a diventare la blogger che hai sempre sognato di essere?
Agire facendo il primo passo è un ottimo modo per cominciare ecco chi sono

Blogger in Azione

Blogger in Azione

Primi Passi

Primi Passi

F.A.Q.

F.A.Q.

Come inserire il Modulo Contatti di Blogger in una pagina statica

27.1.14
Simona S.
39 commenti
Questo tutorial lo avevo visto tempo fa su un blog straniero, che purtroppo non riesco più a ricordare dove sta... altrimenti lo avrei anche linkato.

Ecco come inserire il modulo dei contatti che Blogger ci mette a disposizione in una pagina statica.

Anche se il form non deve comparire nella sidebar, dobbiamo comunque inserire il gadget affinché funzioni correttamente.
Quindi andate in Layout e scegliete il gadget Modulo dei contatti da 'altri gadget'

tutorial inserire form contatti pagina blogger - Simona S.

Per rendere invisibile il modulo all'interno della sidebar, aggiungete nel vostro CSS, negli stili del vostro blog questo codice:

#ContactForm1 {display:none;}

Create ora la pagina dei contatti, e nel campo HTML...+
tutorial inserire form contatti pagina blogger - Simona S.

...inserite il codice qui sotto


<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
Nome
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
Email<span style='font-weight: bolder;'>*</span>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
Messaggio<span style='font-weight: bolder;'>*</span>
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Invia'/>

<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>

</form>
</div>
</div>

Semplice, Semplice come sempre, ma se doveste avere problemi lasciate pure un commento!!!!

update 10/02/2018



Ho scritto un nuovo tutorial su come inserire e personalizzare il forma contatti nelle pagine di Blogger. Leggilo!


39 commenti in "Come inserire il Modulo Contatti di Blogger in una pagina statica"

  1. Oh grazie! Questa sera ci darò senz'altro un'occhiata con calma!!

    RispondiElimina
  2. Molto interessante...intanto me lo pinno ;D!

    RispondiElimina
  3. Grazie Simona, ma a cosa serve esattamente?
    Emanuela

    RispondiElimina
    Risposte
    1. Ciao Emanuela!
      Questo modulo dei contatti ti può servire se hai necessità di farti contattare direttamente dal tuo blog, in caso qualcuno voglia informazioni su creazioni o quant'altro presente nel tuo blog :)

      Elimina
  4. Ciao Simona... Congratulazioni per i 200 follower... anzi, ne vedo 201! :)

    Anch'io avevo visto il tutorial per mettere questo form di Blogger sulla pagina statica, ma chi si ricorda più dove... perciò stavolta mi pinno il tuo tutorial e ti ringrazio :D

    C'è solo un "ma": l'ultima volta avevo lasciato perdere l'idea del form sul mio blog perché mi risulta che in Italia per legge è necessario mettere una spunta per permettere all'utente di acconsentire al trattamento dei dati, secondo l'articolo 13 del Decreto Legislativo n.196/2003. Infatti quand'ho messo il form nell'ultimo sito che ho realizzato ho cercato in lungo e in largo istruzioni per come fare, prima d'implementarlo.
    Temo che sul form che ci propone Blogger questa opzione non ci sia: a te risulta? Magari si può anche dire "chissenefrega", ma personalmente su queste cose ho sempre una certa riserva...

    Ad ogni modo, ancora congratulazioni e buon inizio settimana!

    RispondiElimina
    Risposte
    1. Grazie Silvia!!!
      Hai ragione! Non tutti l'utilizzano, ma per legge ora si deve fare... Io suggerirei di inserire semplicemente questa riga sotto:
      Con l'invio del presente modulo acconsento al trattamento dei dati unicamente per la richiesta in oggetto. Consenso esplicito secondo il D.Lgs 196/2003.
      e così tagliamo la testa al toro :D

      Elimina
    2. Ecco, perfetto :D Meglio essere previdenti...

      Elimina
  5. Ciaooo ti ho scoperta in un tag sul blog di Elisha e visto che io sono imbranata con widget e grafiche erc posso solo che migliorare grazie al tuo blog. un bacino Eli

    RispondiElimina
    Risposte
    1. Grazie mille Elisa per i tuoi complimenti e benvenuta ^_^

      Elimina
  6. Oh! Simona, grazie, grazie, grazie di vero cuore!
    Ci sono riuscita ed è bellissimo!
    Un grosso bacio!

    RispondiElimina
  7. Grazie mille Silvia per l'informazione di cui non ero a conoscenza.
    Ho effettuato una riccerca in internet ed a quanto pare è propro così.
    Ho provveduto ad aggiungere nella pagina dedicata la nota relativa al trattamento dei Dati personali.
    Ho inserito anche nella pagina del form la modalità per acquisire tale nota e darne il consenso.

    Un grazie a tutte voi!

    RispondiElimina
  8. Interessante!!!! Grazie Simona per il post e grazie per le notizie importanti inserite nei commenti che è sempre bene leggerli tutti.

    RispondiElimina
  9. ciaoo,mi sn permessa di metterti fra i miei blog preferiti e di prendere uno widget per i commenti,grazie in anticipo!

    RispondiElimina
  10. Interessante questo post! Io ho inserito il mio modulo contatti attraverso un modulo di Google Drive creando una sorta di database dei messaggi che mi arrivano...
    Ho provato ad utilizzare il tuo metodo che mi sembra molto più semplice, solo che non riesco a modificare la larghezza delle aree di immissione testo: se modifico i parametri non mi cambia la dimensione... dove sbaglio?!?

    RispondiElimina
    Risposte
    1. Ciao Ottavia, perdonami se rispondo solo ora!!!
      Per allungare lo spazio in cui inserire il testo ti basta aumentare il numero che trovi in 'input', ora settato a '30', per il corpo del messaggio devi aumentare il numero delle colonne definite come 'cols', ora settato a '25'.
      Spero di essere stata chiara ^_^

      Elimina
    2. Il problema è proprio quello... l'ho già fatto ma non succede niente! Mi cambia solo il numero delle 'rows' nel corpo del messaggio, il resto invece non cambia... :(

      Elimina
    3. Ho visto che sul tuo blog c'è il form contatti di Drive, vuoi modificare quello? Vorresti allargare lo spazio del nome e dell'email?

      Elimina
    4. Mantengo ancora il form di Drive perché ancora non riesco a risolvere...
      In realtà volevo utilizzare il tuo metodo, perché mi pare meno complicato e alla fine anche più personalizzabile a livello di impaginazione e di formattazione (ho la fissa per la personalizzazione xD ), l'unico problema è che mi piacerebbe allargare la zona del corpo del messaggio per adattarla meglio alla dimensione della pagina... ma non me lo fa!
      In effetti non mi allarga neanche i campi di input, ma per quello pazienza...
      Non mi va di farti perdere ancora tempo su questa cosa, anche perché tu sei gentilissima e mi dispiace assillarti più del dovuto, quindi se riesci a trovare il problema è fantastico, altrimenti non preoccuparti e lascia pure perdere, ti ringrazio comunque tantissimo per l'aiuto. ^_^

      Elimina
    5. Non preoccuparti, non mi assilli :D
      Ho visto la larghezza, ti basta aggiungere questo codice infondo alla pagina dei contatti:
      <style>
      .contact-form-name, .contact-form-email, .contact-form-email-message {min-width:630px !important;}
      </style>

      Elimina
    6. FUNZIONAAAA!!!!!!
      Sei grande!!! Grazie mille! ^_^

      Elimina
  11. fatto! in un attimo ho risolto mille dubbi, grazie!

    RispondiElimina
  12. Ciao, ho trovato molto utile il tuo articolo, e ho subito messo in pratica, volevo chiederti, è possibile fare uno sscambio link?
    Puoi trovare il nostro antipixel sulla nostra pagina scambio link , e noi metteremo il tuo oppure ti linkeremo, come prefersicei, volevo chiederti questo ecco. Grazie per l'articolo.

    RispondiElimina
  13. Ciao! Grazie per il supporto :)
    puoi dirmi o darmi il modo per centrarlo nella pagina e rendere bianche le stringhe?

    Anna ^_^

    RispondiElimina
    Risposte
    1. Ciao Anna!
      Prova ad inserire, sia prima che dopo del codice del form, il tag center:
      < center > ...codice forma... < /center >
      Attenta però a scriverlo senza spazi nelle virgolette!!!
      Io ho dovuto inserirli perché altrimenti non mi faceva pubblicare il commento ;)
      Fammi sapere se ha funzionato.
      A presto! :)

      Elimina
    2. Ottimo! grazie funziona :)

      invece per rendere lo sfondo bianco come potrei fare?

      Elimina
    3. Potresti lasciare il link alla tua pagina? Così mi verrà più facile aiutarti ;)

      Elimina
    4. Sì eccola!
      https://misskdicinema.blogspot.com/p/blog-page_19.html

      Elimina
    5. Ok, ho visto che prende il codice degli stili dal form del tema che hai installato, quindi per cambiare lo sfondo devi inserire questo codice qui sotto:

      .entry-content .form input, .entry-content .form textarea {
      background: #fff !important;
      border: 1px solid #bbb;
      }
      .entry-content #ContactForm1_contact-form-submit {
      background: #111 !important;
      border: none;
      }


      Fammi sapere se funziona ;)

      Elimina
  14. In questo non funzionava, ma ho risolto inserendo questa sezione di codice all'interno di questo: https://www.lacreativeroom.com/2018/02/personalizzare-e-inserire-gadget-form-contatti-in-una-pagina.html

    Grazie del tuo velocissimo aiuto :)))

    RispondiElimina

Grazie di aver commentato!
Solitamente rispondo ai commenti nelle prime 24 ore, se hai richieste urgenti puoi scrivermi usando il modulo dei contatti :)

Per favore NON lasciare link, a meno che non siano richiesti espressamente nel post stesso.
I commenti con link non richiesti o con link affiliati verranno considerati come SPAM e quindi subito cancellati.
So che capirai ;)