Come aggiungere un modulo di contatto di Google Documenti al tuo blog Blogger

Molti di voi probabilmente sono saltati sul WordPress o sul treno Tumblr, ma c'è ancora un certo numero di persone che si danno da fare su Blogger. Google sta tenendo il passo dei Jones con la sua nuova interfaccia di Blogger in Draft e lo strumento Web offre ancora un'alternativa più economica per la personalizzazione totale e i nomi di dominio originali per i blog personali.

Se sei un utente di Blogger, potresti esserti occasionalmente chiesto, “Come posso creare uno di quei formidabili moduli di contatto che hanno tutti gli altri blog del mondo?” Fortunatamente, se sei anche un utente di Google Docs, questo può essere fatto con relativa facilità (e assolutamente senza dolore).

Fare la forma

Per iniziare, accedi a Google Documenti e crea un nuovo modulo come mostrato dall'immagine qui sotto. Puoi dare un pugno in un titolo per il tuo modulo per mantenerti organizzato, ma potresti effettivamente lasciare questa sezione del tuo modulo come “Senza titolo” e non farebbe alcuna differenza. Al fine di renderlo una pagina di contatto legittima, è necessario fornire agli utenti il “paragrafo testo” tipo di domanda. Ciò consente spazio sufficiente per lunghe domande o commenti.

Si prega di notare che il modulo predefinito inserisce automaticamente due domande campione. Assicurati di eliminare il secondo campione, altrimenti avrai una richiesta fantasma di cui non hai veramente bisogno. Tuttavia, se vuoi aggiungere più domande utilizzando diversi formati di risposta (caselle di controllo, scelta multipla, ecc.), Sei libero di farlo. Puoi persino fornire le risposte necessarie per articoli come i dettagli di contatto. Dopo aver finito, assicurati di ricordarti di salvarlo.

Ripping del modulo

Potresti già sapere che i moduli di Google tendono ad attenersi a modelli non personalizzabili che spesso non si adattano bene al design del tuo blog. Certo, puoi incorporare il modulo utilizzando un codice iFrame, ma conserva ancora lo stesso formato dei modelli di cookie-cutter pre-progettati. Per fortuna, c'è un modo per aggirare questo.

Dopo aver completato il modulo, torna alla home page di Documenti e apri il foglio di calcolo del modulo appena creato. Come nota a margine, questo foglio di calcolo ti consentirà di visualizzare tutti gli invii nel modulo. Quando arrivi su questa pagina, seleziona “Modulo” sulla barra dei menu e quindi fare clic “Vai al modulo dal vivo“.

Mentre osservi la pagina del tuo modulo, dovresti usare qualunque funzione il tuo browser permetta di guardare il codice sorgente della pagina. Dato che sto usando Chrome sul mio Mac per questo tutorial, ho semplicemente usato il mio trackpad per aprire il menu contestuale e selezionato “Visualizza origine pagina“.

Proprio qui, le cose potrebbero diventare noiose, quindi fai molta attenzione. Dovresti utilizzare la funzione Trova del tuo browser (CTRL + F) per individuare il termine “forma l'azione“. Quando lo trovi, dovresti vedere questo codice:

Prendi nota di dove si trova questa riga di codice, quindi trova questo prossimo bit di codice:

Copia fino in fondo dalla prima riga di codice menzionata alla riga di codice indicata di seguito. Se ti sentiresti più a tuo agio nell'incollare questo codice in un'app di testo, allora vai avanti. Lo userai per un momento.

Installazione del modulo

Dopo aver copiato con successo il codice selezionato negli Appunti, devi accedere alla tua bacheca di Blogger. Come ho detto prima, sto usando l'interfaccia di Blogger in Draft, ma se stai usando l'interfaccia utente originale, sarai comunque in grado di seguire.

Prima di tutto, dovresti creare una nuova pagina per il tuo blog e autorizzarla “Contattami” o qualcosa di simile. Dopo averlo aperto, vai direttamente alla sezione di modifica HTML della pagina e incolla il codice.

A partire da ora, hai sostanzialmente completato il compito di installare il modulo sul tuo blog. A questo punto, la tua anteprima dovrebbe apparire simile all'immagine qui sotto. Tuttavia, le anteprime saranno diverse per persone diverse in base alla macchina che stanno utilizzando.

Personalizzazione del modulo

Come ho scoperto con il mio blog personale, a volte ci saranno problemi come lo spazio tra il titolo della pagina e il modulo stesso o la casella di risposta troppo grande per la larghezza del blog. Questi problemi minori possono essere facilmente risolti.

Se hai problemi con il troppo spazio tra il titolo e le domande, cerca qualsiasi

br

tag ed eliminarli. Tuttavia, se si riscontrano problemi con la larghezza della casella di risposta, cercare questa riga di codice:

</pre> </blockquote><p>Regolando il “Cols” valore a un numero inferiore, è possibile modificare la larghezza del blog per adattarsi a schermi più piccoli o browser alternativi. Inoltre, puoi modificare i caratteri delle domande mentre modifichi la pagina. Con una personalizzazione sufficiente, si può finire con qualcosa come l'immagine seguente.</p><p><img src="//ephesossoftware.com/img/images_17/how-to-add-a-google-docs-contact-form-to-your-blogger-blog_11.png"></p><h2>Conclusione</h2><p>Questo è un modo rapido ed efficace per posizionare un modulo Google Documenti in stile corrispondente sul tuo blog Blogger e il tutorial potrebbe essere adattato per qualsiasi altro blog o sito web. Puoi fare molto più di quello che vedi qui, quindi assicurati di giocarci un po '.</p><p>Quali altri siti usi per creare moduli web? Come ha funzionato questo tutorial per te? Se hai problemi a creare il tuo modulo web, faccelo sapere nei commenti o in alternativa fai una domanda a MakeUseOf Answers.</p> <p><small>Scopri di più su: Google Documenti.</small></p>


            </div>
            
            <div class="rek-block">
            <center>
                <ins class="adsbygoogle"
                style="display:inline-block;width:580px;height:400px"
                data-ad-client="ca-pub-3810161443300697"
                data-ad-slot="3145557800"></ins>
           <script>
           (adsbygoogle = window.adsbygoogle || []).push({});
           </script>
            </center>
            </div>
            
            <div class="row PageNavigation d-flex justify-content-between font-weight-bold">
            
            <a class="prev d-block col-md-6" href="/articles/wordpress-plugins/how-to-add-a-glossary-or-dictionary-section-in-your-wordpress-site.html"> « Come aggiungere un glossario o una sezione del dizionario nel tuo sito WordPress</a>
            
            
            
            <a class="next d-block col-md-6 text-lg-right" href="/articles/wordpress-plugins/how-to-add-a-help-resource-section-in-wordpress-admin.html">Come aggiungere una guida / sezione risorse in WordPress Admin » </a>
            

            <div class="clearfix"></div>
            </div>

		</div>

	</div>
</div>


    
</div>
    

</div>
</div>


<footer class="footer">
    <div class="site-langs-list">
        <ul>
                <li class="site-lang"><a href="https://ephesossoftware.com/articles/wordpress--web-development/how-to-add-a-google-docs-contact-form-to-your-blogger-blog.html"><i class="flag flag-DE"></i>Deutsch</a></li>
                <li class="site-lang"><a href="https://nl.ephesossoftware.com/articles/wordpress--web-development/how-to-add-a-google-docs-contact-form-to-your-blogger-blog.html"><i class="flag flag-NL"></i>Nederlands</a></li>
                <li class="site-lang"><a href="https://sv.ephesossoftware.com/articles/wordpress--web-development/how-to-add-a-google-docs-contact-form-to-your-blogger-blog.html"><i class="flag flag-SE"></i>Svenska</a></li>
                <li class="site-lang"><a href="https://no.ephesossoftware.com/articles/wordpress--web-development/how-to-add-a-google-docs-contact-form-to-your-blogger-blog.html"><i class="flag flag-NO"></i>Norsk</a></li>
                <li class="site-lang"><a href="https://it.ephesossoftware.com/articles/wordpress--web-development/how-to-add-a-google-docs-contact-form-to-your-blogger-blog.html"><i class="flag flag-IT"></i>Italiano</a></li>
                <li class="site-lang"><a href="https://fr.ephesossoftware.com/articles/wordpress--web-development/how-to-add-a-google-docs-contact-form-to-your-blogger-blog.html"><i class="flag flag-FR"></i>Français</a></li>
                <li class="site-lang"><a href="https://es.ephesossoftware.com/articles/wordpress--web-development/how-to-add-a-google-docs-contact-form-to-your-blogger-blog.html"><i class="flag flag-ES"></i>Español</a></li>
                <li class="site-lang"><a href="https://ro.ephesossoftware.com/articles/wordpress--web-development/how-to-add-a-google-docs-contact-form-to-your-blogger-blog.html"><i class="flag flag-RO"></i>Românesc</a></li>
        </ul>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-6 text-center text-lg-left">
                  © <script>
                        var currentTime = new Date();
                        var year = currentTime.getFullYear();

                        document.write(year);
                </script>
                <a href="https://it.ephesossoftware.com">it.ephesossoftware.com</a>
            </div>
            <div class="col-md-6 col-sm-6 text-center text-lg-right">    
                <span>Notizie dal mondo della tecnologia moderna!</span>
            </div>
        </div>
    </div>
</footer>

   
</div> 

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
	"palette": {
	"popup": {
		"background": "#edeff5",
		"text": "#838391"
	},
	"button": {
		"background": "#4b81e8"
	}
	},
	"theme": "classic",
	"position": "bottom-right"
})});
</script>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    
<script src="js/jquery.min.js"></script>
    
<script src="js/bootstrap.min.js"></script>

<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>

<script>
        SimpleJekyllSearch({
          searchInput: document.getElementById('search-input'),
          resultsContainer: document.getElementById('results-container'),
          json: '/search.json',
          searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
        })
        </script>



</body>
</html>