Come aggiungere un modulo di contatto (pagina Contattaci) in Blogger?

Pubblicato: 2020-11-10

Aggiungere un modulo di contatto in Blogger è un'attività noiosa in quanto non supporta plugin come WordPress.

Ciò che fa la maggior parte dei blogger di Blogspot è cercare l'aiuto di siti di terze parti (foxyform, jotform, 123contactform, ecc.).

Pagina del modulo di contatto di Blogger Ma oggi imparerai come aggiungere la pagina di contatto ufficiale in Blogger.

Come ho detto prima, è possibile ottenere codici di terze parti da inserire in nuove pagine come una passeggiata nel parco. Tuttavia, il modulo di contatto ufficiale è di gran lunga migliore di quelli.

I vantaggi del modulo Blogger ufficiale

Riceverai il messaggio non appena verrà inviato. E anche la deliverability è del 100%.
La semplice interfaccia rende facile per i visitatori contattarti.
Se conosci il linguaggio Cascade Style Sheet (CSS), sarà facile personalizzare il modulo secondo i tuoi gusti.
L'intera pagina non verrà ricaricata per l'invio del messaggio.

Ho diviso questo tutorial in tre sezioni, aggiungendo il gadget dei contatti, nascondendolo e implementando il codice ufficiale in una nuova pagina.

Parte 1: aggiunta del gadget di contatto

Segui i passaggi indicati di seguito per aggiungere un gadget Contattaci sul tuo blog.

Passaggio 1 : visita blogger.com e accedi al tuo account. Se gestisci più blog, devi scegliere il blog desiderato dall'elenco.

Passaggio 2 : fare clic su Layout dalla barra laterale sinistra per ottenere un'opzione per aggiungere gadget.

Passaggio 3 : è possibile visualizzare un collegamento Aggiungi un gadget nel pannello principale sul lato destro. Facendo clic su di esso si accederà a un elenco di gadget.

Passaggio 4 : quindi, scegli Altri gadget dal lato sinistro. Ora vedrai il modulo di contatto . Basta aggiungere lo stesso.

Parte 2: nascondere il gadget

Ora imparerai come nascondere il gadget dei contatti.

Passaggio 1 : dobbiamo giocare con la sezione dei modelli qui. Quindi, fai clic su Modelli dal menu a sinistra.

Passaggio 2 : quindi, fai clic su Modifica HTML e ti verrà fornito l'intero codice del tuo blog in un ampio campo.

Passaggio 3 : cerca ]]> </ b: skin> e inserisci il codice seguente appena prima di esso.

div # ContactForm1 {
display: nessuno! importante;
}

Quindi fare clic su Salva per conservare le modifiche.

Dopo il terzo passaggio, non vedrai il widget Contatti sul tuo blog.

Parte - 3: aggiunta di un modulo di contatto a una pagina

Riceverai qui il codice del modulo di contatto del blogger ufficiale personalizzato da aggiungere per essere mostrato in una pagina separata.

Passaggio 1 : vai su Pages e fai clic su Nuova pagina.

Passaggio 2 : incolla il seguente codice nell'editor di post HTML dopo aver rimosso tutto ciò che contiene.

<div id = "custom_ContactForm1 ″ class =" widget ContactForm ">
<div class = "contact-form-widget">
<p> Mettiti in contatto con noi compilando il modulo sottostante. </p>
<div class = "form">
<form name = "contact-form">
<p> </p>
Nome
<br>
<input type = "text" value = "" size = "30 ″ name =" name "id =" ContactForm1_contact-form-name "class =" contact-form-name ">
<p> </p>
E-mail
<span style = "font-weight: bolder;"> * </span>
<br>
<input type = "text" value = "" size = "30 ″ name =" email "id =" ContactForm1_contact-form-email "class =" contact-form-email ">
<p> </p>
Messaggio
<span style = "font-weight: bolder;"> * </span>
<br>
<textarea rows = "5 ″ name =" email-message "id =" ContactForm1_contact-form-email-message "cols =" 25 ″ class = "contact-form-email-message"> </textarea>
<p> </p>
<input type = "button" value = "Send" id = "ContactForm1_contact-form-submit" class = "contact-form-button contact-form-button-submit">
<p> </p>
<div style = "text-align: center; larghezza massima: 222px; larghezza: 100% ">
<p id = "ContactForm1_contact-form-error-message" class = "contact-form-error-message"> </p>
<p id = "ContactForm1_contact-form-success-message" class = "contact-form-success-message"> </p>
</div>
</form>
</div>
</div>
<div class = "clear"> </div>
<span class = "widget-item-control">
<span class = "item-control blog-admin">
<a title = "Edit" target = "configContactForm1 ″ onclick =" return _WidgetManager._PopupConfig (document.getElementById ("ContactForm1 ″));" href = "// www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1 ″ class =" quickedit ">
<img width = "18 ″ height =" 18 ″ src = "// img1.blogblog.com/img/icon18_wrench_allbkg.png" alt = "">
</a>
</span>
</span>
<div class = "clear"> </div>
</div>

Passaggio 3: aggiungere un titolo (come Contattaci) e quindi modificare le impostazioni fornite come indicato di seguito.

Passaggio 4: infine, fare clic sul pulsante Pubblica. È tutto.

I messaggi inviati da questo modulo di contatto verranno consegnati all'email dell'amministratore. Se il blog ha più di un amministratore, tutti lo riceveranno.

➜ Altri utili tutorial di Blogspot:

Come aggiungere un file Robots.txt personalizzato in Blogger?
Come inviare la mappa del sito di Blogger a Google Search Console?

Avvolgendo

Spero che ora tu sappia come aggiungere la pagina dei contatti nel blogger. Se trovi difficoltà come zero deliverability anche dopo il messaggio di successo, ti consiglio di reinstallare il widget Contatti.

E sì, se hai una vasta conoscenza nel trattare con CSS e snippet javascript, puoi continuare a personalizzare la pagina per un migliore appeal visivo.

Non dimenticare di condividere questo post con i tuoi amici blogger.