10.2.18

Personalizzare il gadget del form contatti di Blogger e inserirlo in una pagina

10.2.18



Non ricordo neanche più quando è stata l'ultima volta che ho pubblicato un tutorial per migliorare la grafica dei templates di Blogger. Di certo è passato molto tempo, e visto che la causa è stato il lavoro, beh direi che non è stato per niente un male.

Oggi voglio farti un regalino: il codice per inserire nella pagina del tuo blog il gadget form contatti di Blogger.
Il risulato sarà quello che vedi qui in basso.



Per inserire il codice:
  • vai nella tua pagina contatti
  • scrivi in modalità HTML
  • copia e incolla il codice che trovi nel file di testo

Ricordati che puoi inserire gli stili così come sono nel file, oppure puoi incollarli nel tuo CSS, ma senza il tag "style" (se non sai come fare leggi come inserire i codici nel tuo CSS)

Per cambiare il colore del tasto 'invia' ricordati di modificare il codice del background, inserendo quello del tuo colore del brand o quello che preferisci.
#ContactForm1 #contact-form-submit {
...
background: #000;
...
}

Se invece preferisci cambiare la scritta all'interno del campo 'input', devi modificare nell'HTML ciò che si trova fra virgolette alla voce placeholder.
placeholder="DEVI MODIFICARE QUI"


Se dovessi avere problemi di inserimento o di visualizzazione scrivilo pure nei commenti.
Se ti va, lasciami il tuo link alla pagina se usi questo breve tutorial, così potremo tutti venire a sbirciare e magari condividi il post :)

scarica qui il codice del gadget form contatti


Per far sì che funzioni nella pagina, devi inserire il gadget del modulo contatti da LAYOUT (la posizione è indifferente, nel mio caso comunque l'ho inserita nella sidebar, in fondo), vai poi in MODIFICA HTML, cerca il codice del gadget e inserisci cond='data:view.isPage' , così come vedi nell'immagine sottostante. In questo modo gli imporrai la condizione di essere visualizzato, e utilizzato in modo corretto, solo nella pagina.




27 commenti:

  1. Grazie Simona, ho scaricato e creato "Contatti", ora l'ho nascosto in quanto mi ha dato tutte le barre nere...cmq l'ho nascosto in attesa di risolvere un problema sorto con Blogger; non riesco a venirne a capo, il mio blog "Colazione da Jo" va e viene dando pagina di errore...se ricarico la pagina torna, ma spesso fa crash, sono disperata, non so più a chi rivolgermi per risolvere questo dilemma!

    RispondiElimina
    Risposte
    1. Ciao Jolanda!
      Allora ho visto il tuo codice e ti dà errore perchè entra in conflitto con un codice già esistente.
      Se hai incollato il codice direttamente nella pagina contatti, per risolvere il problema ti mostrerò come fare in una breve diretta sul mio account ig @lacreativeroom.
      Così mi sarà più facile aiutarti, ma ho bisogno che tu mi dia il permesso di mostrare il tuo blog :)

      Elimina
  2. Ciao Simona, io sono pronta, so che tu lavori... possiamo fare domani pomeriggio per risolvere quel problema.
    Per il permesso che mi chiedi ok!

    RispondiElimina
    Risposte
    1. Ciao Jolanda, certo! Domani ci sentiamo su direct di instagram prima ;)

      Elimina
  3. Ciao, molto carino questo tutorial! L'ho provato in un blog ma vedo che il modulo contatti viene visualizzato anche nella sidebar, oltre che nelle pagine: è normale? C'è un modo per nasconderlo dalla sidebar? grazie ^_^

    RispondiElimina
    Risposte
    1. Ciao! Grazie Sara! Hai scritto bene la condizione cond='data:view.isPage' come nella foto?
      Fammi sapere :)

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

      Elimina
    3. Mi pare di sì: scrivo qui la stringa eliminando la chiusura finale, altrimenti vedo che non me la pubblica:
      <b:widget cond='data:view.isPage' id='ContactForm1' locked='false' title='Modulo di contatto' type='ContactForm'

      Elimina
    4. È strano perché non dovrebbe comparire... Aspetta... Ma tu lo vedi nel pannello Layout? Perchè lì è normale che si veda!
      Nel tuo blog infatti non vedo il gagdet!

      Elimina
    5. Il form non è nel mio blog personale ma in questo: www. mentaeliquirizia .com
      Il widget si vede in tutte le pagine tranne che nella home (e nei post, ma perché quelli non hanno la sidebar)

      Elimina
    6. Ho fatto la prova su un altro blog e non mi da problemi. Probabilmente c'è qualcosa che non va nella scrittura del codice.
      Riesci a copiare e incollare qui tutta la riga del widget ContactForm1?

      Elimina
    7. Ti ho inviato una mail :)

      Elimina
    8. Hai fatto benissimo! Ti ho già risposto :*

      Elimina
  4. Ciao Simona,
    ho inserito il codice del form contatti nella barra laterale, il modulo si vede però non invia niente.
    Mi potresti dire qualcosa in merito?
    Questo è il blog: https://incontraregesu.blogspot.com/
    Grazie e tanti saluti.
    Giuseppe

    RispondiElimina
    Risposte
    1. Ciao Giuseppe, intanto benvenuto nel blog, e grazie per aver lasciato un commento :)
      Ho dato uno sguardo al tuo blog e, dato che probabilmente hai tolto il gadget, non riesco a vedere quale potrebbe essere il problema.
      Parto intanto dalle domande di base:
      - hai modificato il codice del widget nell'HTML?
      - hai creato la pagina dei contatti e inserito lì il codice per visualizzare il form contatti?

      Elimina
  5. Gent.ma Simona,
    grazie per la tua risposta.
    Ho reinserito la pagina con il tuo codice.
    Lo puoi vedere qui: https://incontraregesu.blogspot.com/p/contatti.html
    Il codice è copiato dal link che hai segnato.
    Dai un'occhiata tu.
    Grazie per la tua disponibilità.
    Tanti saluti.

    RispondiElimina
    Risposte
    1. Ok, a me sembra perfetto! Hai fatto una prova ad inviarti un messaggio?

      Anche se non vedi un messaggio di conferma, il sistema di Blogger invia ugualmente il messaggio verso l'email di iscrizione a Blogger.

      Elimina
  6. Grazie Simona per la risposta.
    Ho provato è non arriva niente.
    Puoi provare tu ad inviarmi un messaggio?

    RispondiElimina
  7. Scusa Simona sono stato sbadato: non ho completato le tue istruzioni.
    Devo modificare nel HTML.
    Grazie lo stesso.

    RispondiElimina
  8. Niente da fare, non esiste nel HTML il gadget FormContact1.
    Sembra che con questo template non si può istallare il form, neanche dai gadget.
    Ho provato ad inserirlo nella barra laterale, si vede, però non arriva niente lo stesso.
    La cosa strana è che il modulo c'è come gadget da poter inserire, ma non esiste nel HTML.

    RispondiElimina
    Risposte
    1. Dunque il widget esiste, e lo trovi come ContactForm1, cercalo e inserisci cond='data:view.isPage' come da ultima immagine nel post.

      Inoltre ti consiglio di spostare (dal pannello Layout) il widget in fondo a tutti gli altri :)

      Vedrai che così funzionerà!

      Elimina
  9. Gent.ma Simona,
    scusa se ti disturbo ancora.
    E' qualcosa di strano: ho provato dal mio cellulare ed ho ricevuto il messaggio, mentre usando il mio computer non ricevo niente.
    Potresti provare ad inviare tu un messaggio, così vedo se è qualcosa che ha a che fare forse con il browser?

    RispondiElimina
    Risposte
    1. Guarda, se da cellulare funziona sicuramente avrai un problema dal tuo browser...
      Comunque ora provo ad inviarti un messaggio.

      Elimina
  10. Grazie Simona,
    ho ricevuto il tuo messaggio.
    Non so veramente da cosa dipende, ho provato anche da un altro pc e non ricevo niente lo stesso.
    Può essere che è il browser Crome.
    Tu che browser hai usato?

    RispondiElimina
    Risposte
    1. Io ho utilizzato Firefox, ma è la prima volta che sento di problemi così, anche perché da mobile ti funziona correttamente.

      Elimina

Lasciando un commento dichiari di aver letto la mia Privacy Policy