Een contactformulier voor Google Documenten toevoegen aan uw Blogger-blog

Velen van jullie zijn waarschijnlijk op de WordPress of de Tumblr-trein gesprongen, maar er zijn nog steeds een aantal mensen die het op Blogger uithouden. Google houdt de Joneses bij met zijn nieuwe Blogger in Draft-interface en de webtool biedt nog steeds een goedkoper alternatief voor totale aanpassing en originele domeinnamen voor persoonlijke blogs.

Als u een Blogger-gebruiker bent, heeft u zich af en toe afgevraagd, “Hoe kan ik een van die gekke coole contactformulieren maken die alle andere blogs in de wereld hebben?” Gelukkig, als u ook een Google Docs-gebruiker bent, kunt u dit relatief eenvoudig doen (en absoluut geen pijn).

Het formulier maken

Om te beginnen logt u in op Google Documenten en maakt u een nieuw formulier zoals wordt weergegeven in de onderstaande afbeelding. Je kunt een titel voor je formulier invoeren om jezelf georganiseerd te houden, maar je kunt dit gedeelte van je formulier eigenlijk als laten staan “Untitled” en het zou geen enkel verschil maken. Om het een legitieme contactpagina te maken, moet u gebruikers voorzien van de “paragraaf tekst” vraag type. Dit biedt voldoende ruimte voor lange vragen of opmerkingen.

Houd er rekening mee dat het standaardformulier automatisch twee voorbeeldvragen invoegt. Zorg ervoor dat u het tweede monster verwijdert, anders krijgt u een spookverzoek dat u niet echt nodig hebt. Als u echter meer vragen wilt toevoegen met behulp van verschillende antwoordformaten (selectievakjes, meerkeuzevragen, enz.), Bent u hier vrij in. U kunt zelfs de vereiste antwoorden maken voor items zoals contactgegevens. Als je klaar bent, vergeet dan niet om het op te slaan.

Het formulier rippen

U weet wellicht al dat Google-formulieren meestal niet-aanpasbare sjablonen bevatten die vaak niet passen bij het ontwerp van uw blog. Natuurlijk kun je het formulier insluiten met een iFrame-code, maar het behoudt nog steeds hetzelfde formaat als de vooraf ontworpen cookie-cutter-sjablonen. Gelukkig is daar een manier omheen.

Nadat u uw formulier heeft ingevuld, gaat u terug naar uw Docs-startpagina en opent u de spreadsheet van het formulier dat u zojuist hebt gemaakt. Als een kanttekening, kunt u met deze spreadsheet alle inzendingen naar uw formulier bekijken. Selecteer als u op deze pagina arriveert “Het formulier” op de menubalk en klik vervolgens op “Ga naar het live formulier“.

Terwijl u naar uw formulierpagina kijkt, moet u de functie gebruiken die uw browser toestaat om naar de broncode van de pagina te kijken. Omdat ik Chrome op mijn Mac gebruik voor deze zelfstudie, heb ik alleen mijn trackpad gebruikt om het contextmenu te openen en te selecteren “Bekijk paginabron“.

Hier kunnen dingen vervelend worden, dus let goed op. Gebruik de functie Zoeken van uw browser (CTRL + F) om de term te vinden “vorm actie“. Wanneer u het vindt, zou u deze code moeten zien:

Noteer waar deze coderegel zich bevindt en zoek vervolgens het volgende stukje code:

Kopieer helemaal vanaf de eerste regel code naar de volgende regel code. Als je je prettiger voelt bij het plakken van deze code in een tekstapp, ga je gang. Je zult het even gebruiken.

Het formulier installeren

Nadat u de geselecteerde code naar uw klembord hebt gekopieerd, moet u naar uw Blogger-dashboard gaan. Zoals ik al eerder zei, gebruik ik de Blogger in Draft-interface, maar als je de oorspronkelijke gebruikersinterface gebruikt, kun je nog steeds doorgaan.

Ten eerste moet u een nieuwe pagina voor uw blog maken en deze geven “Neem contact met mij op” of iets dergelijks. Na het openen, ga direct naar de HTML-bewerkingssectie van de pagina en plak de code.

Vanaf nu heb je in principe de taak voltooid om het formulier op je blog te installeren. Op dit punt ziet uw voorbeeld er ongeveer zo uit als in de onderstaande afbeelding. Voorvertoningen zullen echter voor verschillende mensen anders zijn op basis van de machine die ze gebruiken.

Het formulier aanpassen

Zoals ik ontdekte met mijn persoonlijke blog, zullen er soms problemen zijn, zoals dat er te veel ruimte is tussen de paginatitel en het formulier zelf, of dat het antwoordvak te groot is voor de breedte van de blog. Deze kleine problemen kunnen eenvoudig worden verholpen.

Als u problemen ondervindt met het feit dat er te veel ruimte is tussen de titel en de vragen, zoek er dan naar

br

tags en verwijder ze. Als u echter problemen ondervindt met de breedte van het antwoordvak, zoekt u naar deze regel met code:

</pre> </blockquote><p>Door de “cols” waarde tot een lager aantal, kunt u de breedte van de blog aanpassen aan kleinere schermen of alternatieve browsers. Bovendien kunt u tijdens het bewerken van de pagina de lettertypen van de vragen daadwerkelijk wijzigen. Met voldoende maatwerk, kun je eindigen met zoiets als de volgende afbeelding.</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>Conclusie</h2><p>Dit is een snelle en efficiënte manier om een op stijl overeenkomend Google Documenten-formulier op uw Blogger-blog te plaatsen en de zelfstudie kan waarschijnlijk worden aangepast voor andere blogs of websites. Je kunt veel meer doen dan wat je hier ziet, dus zorg ervoor dat je er een tijdje mee speelt.</p><p>Welke andere sites gebruikt u om webformulieren te maken? Hoe heeft deze tutorial voor u gewerkt? Als u problemen ondervindt bij het maken van uw eigen webformulier, laat het ons dan weten in de comments of stel een vraag bij MakeUseOf Answers.</p> <p><small>Ontdek meer over: 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"> « Hoe u een woordenlijst of woordenboeksectie in uw WordPress-site kunt toevoegen</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">Een hulp- / resourcegedeelte toevoegen 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://nl.ephesossoftware.com">nl.ephesossoftware.com</a>
            </div>
            <div class="col-md-6 col-sm-6 text-center text-lg-right">    
                <span>Nieuws uit de wereld van de moderne technologie!</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>