Comment ajouter un formulaire de contact Google Documents à votre blog Blogger

Beaucoup d'entre vous ont probablement sauté sur WordPress ou le train Tumblr, mais plusieurs personnes tiennent encore sur Blogger. Google suit les Jones avec sa nouvelle interface Blogger in Draft, et l'outil Web offre toujours une alternative moins chère pour une personnalisation totale et des noms de domaine originaux pour les blogs personnels..

Si vous êtes un utilisateur de Blogger, vous vous êtes peut-être déjà demandé, “Comment puis-je créer l'un de ces formulaires de contact incroyablement cool que tous les autres blogs du monde ont?” Heureusement, si vous êtes également un utilisateur de Google Documents, vous pouvez le faire avec une relative facilité (et sans aucune douleur)..

Faire la forme

Pour commencer, connectez-vous à Google Documents et créez un nouveau formulaire, comme illustré par l'image ci-dessous. Vous pouvez entrer un titre dans votre formulaire pour rester organisé, mais vous pouvez en fait laisser cette partie de votre formulaire comme suit: “Sans titre” et cela ne ferait aucune différence. Pour en faire une page de contact légitime, vous devez fournir aux utilisateurs le “texte du paragraphe” Type de question. Cela laisse assez de place pour de longues questions ou commentaires.

Veuillez noter que le formulaire par défaut insère automatiquement deux exemples de questions. Assurez-vous de supprimer le deuxième échantillon, sinon vous aurez une enquête fantôme dont vous n'avez pas vraiment besoin. Cependant, si vous souhaitez ajouter plus de questions en utilisant différents formats de réponse (cases à cocher, choix multiple, etc.), vous êtes libre de le faire. Vous pouvez même apporter les réponses requises pour des éléments tels que les coordonnées. Une fois que vous avez terminé, n'oubliez pas de le sauvegarder..

Déchirer le formulaire

Vous savez peut-être déjà que les formulaires Google ont tendance à s'en tenir à des modèles non personnalisables qui ne s'intègrent souvent pas bien à la conception de votre blog. Bien sûr, vous pouvez incorporer le formulaire à l’aide d’un code iFrame, tout en conservant le même format que les modèles de découpeurs de cookie prédéfinis. Heureusement, il y a un moyen de contourner cela.

Une fois votre formulaire rempli, retournez à la page d’accueil de Docs et ouvrez la feuille de calcul du formulaire que vous venez de créer. En guise de remarque, cette feuille de calcul vous permettra de voir toutes les soumissions à votre formulaire. Lorsque vous arrivez sur cette page, sélectionnez “Forme” dans la barre de menu, puis cliquez sur “Aller au formulaire en direct“.

Lorsque vous consultez votre page de formulaire, vous devez utiliser les fonctionnalités que votre navigateur permet de consulter le code source de la page. Comme j'utilise Chrome sur mon Mac pour ce didacticiel, j’ai simplement utilisé mon trackpad pour ouvrir le menu contextuel et sélectionné “Voir le source de la page“.

Ici même, les choses peuvent devenir fastidieuses, alors faites bien attention. Vous devez utiliser la fonction Rechercher de votre navigateur (CTRL + F) pour localiser le terme. “action de forme“. Lorsque vous le trouvez, vous devriez voir ce code:

Notez l'emplacement de cette ligne de code, puis recherchez le prochain bit de code:

Copiez tout le chemin en partant de la première ligne de code mentionnée vers la ligne de code suivante. Si vous vous sentez plus à l'aise de coller ce code dans une application texte, continuez. Vous allez l'utiliser momentanément.

Installer le formulaire

Une fois que vous avez copié avec succès le code que vous avez sélectionné dans votre presse-papiers, accédez au tableau de bord de Blogger. Comme je l'ai déjà dit, j'utilise l'interface Blogger dans Brouillon, mais si vous utilisez l'interface utilisateur d'origine, vous pourrez toujours suivre.

Tout d'abord, vous devez créer une nouvelle page pour votre blog et l'intituler “Contactez moi” ou quelque chose de similaire. Après l'avoir ouvert, allez directement à la section d'édition HTML de la page et collez le code.

À ce jour, vous avez essentiellement terminé la tâche d’installer le formulaire sur votre blog. À ce stade, votre aperçu devrait ressembler à l'image ci-dessous. Cependant, les aperçus seront différents pour différentes personnes en fonction de la machine utilisée..

Personnaliser le formulaire

Comme je l'ai découvert avec mon blog personnel, il y a parfois des problèmes tels qu'un espace trop important entre le titre de la page et le formulaire lui-même ou une zone de réponse trop grande pour la largeur du blog. Ces problèmes mineurs peuvent être facilement résolus.

Si vous rencontrez des problèmes en raison de l’espacement insuffisant entre le titre et les questions, recherchez

br

balises et les supprimer. Toutefois, si vous rencontrez des problèmes avec la largeur de la zone de réponse, recherchez cette ligne de code:

</pre> </blockquote><p>En ajustant le “cols” valeur inférieure, vous pouvez modifier la largeur du blog pour l'adapter aux écrans plus petits ou aux autres navigateurs. De plus, vous pouvez réellement changer les polices des questions tout en modifiant la page. Avec suffisamment de personnalisation, vous pouvez obtenir quelque chose comme l’image suivante.</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>Conclusion</h2><p>Il s'agit d'un moyen rapide et efficace de placer un formulaire Google Documents correspondant à votre style sur votre blog Blogger. Le didacticiel pourrait probablement être adapté à tout autre blog ou site Web. Vous pouvez faire beaucoup plus que ce que vous voyez ici, alors assurez-vous de jouer avec pendant un petit moment.</p><p>Quels autres sites utilisez-vous pour créer des formulaires Web? Comment ce tutoriel a-t-il fonctionné pour vous? Si vous rencontrez des problèmes lors de la création de votre propre formulaire Web, faites-le nous savoir dans les commentaires ou posez une question à MakeUseOf Answers.</p> <p><small>En savoir plus sur: Google Docs.</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"> « Comment ajouter un glossaire ou une section de dictionnaire dans votre site 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">Comment ajouter une section d'aide / de ressources dans 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://fr.ephesossoftware.com">fr.ephesossoftware.com</a>
            </div>
            <div class="col-md-6 col-sm-6 text-center text-lg-right">    
                <span>Nouvelles du monde de la technologie moderne!</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>