Så här lägger du till en kontaktformulär för Google Dokument till din Blogger-blogg

Många av dig har sannolikt hoppat på WordPress eller Tumblr-tåget, men det finns fortfarande ett antal människor som håller på att vara Blogger. Google följer Joneses med sin nya Blogger i Draft-gränssnitt, och webbverktyget erbjuder fortfarande ett billigare alternativ för total anpassning och ursprungliga domännamn för personliga bloggar.

Om du är Blogger-användare kanske du ibland undrat, “Hur kan jag göra en av de galen-coola kontaktformulären som alla andra bloggar i världen har?” Lyckligtvis kan du, om du är en Google Docs-användare, göra det relativt enkelt (och absolut ingen smärta).

Gör formuläret

För att börja logga in på Google Dokument och skapa en ny blankett som visas på bilden nedan. Du kan slå i en titel för din blankett för att hålla dig organiserad, men du kan faktiskt lämna den här delen av din blankett som “Ofrälse” och det skulle inte göra någon skillnad. För att göra den till en legitim kontaktsida, ska du ge användarna den “stycke text” frågetyp. Det ger tillräckligt med utrymme för långa frågor eller kommentarer.

Observera att standardformuläret automatiskt sätter in två provfrågor. Se till att du tar bort det andra provet, annars kommer du att få en fantomförfrågan som du inte behöver. Om du vill lägga till fler frågor med olika svarformat (kryssrutor, multipelval etc.) kan du dock göra det. Du kan även göra svaren som behövs för saker som kontaktuppgifter. När du är klar, se till att du kommer ihåg att spara den.

Rippa formuläret

Du kanske redan är medveten om att Google-formulär tenderar att hålla sig till icke-anpassningsbara mallar som ofta inte mäter bra med din bloggdesign. Visst kan du bädda in formuläret med hjälp av en iFrame-kod, men den behåller fortfarande samma format som de förkonstruerade cookie-cutter-mallarna. Lyckligtvis finns det en väg runt det.

När du har fyllt i formuläret, gå tillbaka till din Docs hemsida och öppna kalkylbladet i formuläret du just skapat. Som en sidnot kan du se alla inlägg till din blankett i det här kalkylbladet. När du kommer fram på den här sidan, välj “Form” på menyraden och klicka sedan på “Gå till live form“.

När du tittar på din formulärsida bör du använda vilken funktion som din webbläsare tillåter att titta på sidkällkoden. Eftersom jag använder Chrome på min Mac för denna handledning, använde jag bara min spårväg för att öppna kontextmenyn och valda “Visa sidans källa“.

Just här kan saker bli tråkiga, så var uppmärksam. Du bör använda sökfunktionen i din webbläsare (CTRL + F) för att hitta termen “form handling“. När du hittar den ska du se den här koden:

Notera var den här koden är och hitta den här nästa koden:

Kopiera hela vägen ner från den förutnämnda raden av kod till nästa kodrad. Om du skulle känna dig bekvämare klistra in den här koden i en textapp, fortsätt sedan. Du kommer att använda det tillfälligt.

Installera formuläret

När du har kopierat din valda kod till ditt urklipp ska du gå in på din Blogger-instrumentpanel. Som jag sa tidigare använder jag Blogger i Draft-gränssnitt, men om du använder det ursprungliga användargränssnittet kommer du fortfarande att kunna följa med.

Först bör du skapa en ny sida för din blogg och berätta det “Kontakta mig” eller något liknande. Efter att ha öppnat den, gå direkt till HTML-redigering av sidan och klistra in koden.

Från och med nu har du i princip slutfört uppgiften att installera formuläret på din blogg. För tillfället ska din förhandsvisning likna bilden nedan. Förhandsgranskningar kommer emellertid att vara olika för olika personer baserat på den maskin de använder.

Anpassa formuläret

Som jag upptäckte med min personliga blogg kommer det ibland att finnas problem som att det finns för mycket utrymme mellan sidtiteln och formuläret själv eller svarfältet är för stort för bloggens bredd. Dessa mindre problem kan enkelt lösas.

Om du har problem med att det finns för mycket utrymme mellan titeln och frågorna, leta efter något

br

taggar och radera dem. Men om du har problem med bredden på svarsfältet, leta efter den här koden:

</pre> </blockquote><p>Genom att justera “cols” värde till ett mindre antal, kan du ändra bredden på bloggen för att passa mindre skärmar eller alternativa webbläsare. Dessutom kan du faktiskt ändra skrifterna på frågorna medan du redigerar sidan. Med tillräckligt med anpassning kan du sluta med något som följande bild.</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>Slutsats</h2><p>Det här är ett snabbt och effektivt sätt att placera en stilmatchning av Google Docs-formuläret på Blogger-bloggen, och handledningen kan troligtvis anpassas till någon annan blogg eller webbplats. Du kan göra mycket mer än vad du ser här, så se till att du leker med det en liten stund.</p><p>Vilka andra webbplatser använder du för att skapa webbformulär? Hur fungerade denna handledning för dig? Om du har problem med att skapa ditt eget webbformulär, låt oss veta i kommentarerna eller alternativt ställa en fråga på MakeUseOf svar.</p> <p><small>Utforska mer om: Google Dokument.</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"> « Så här lägger du till en ordlista eller ordbokssektion på din WordPress-webbplats</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">Så här lägger du till en hjälp / resursavdelning i 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://sv.ephesossoftware.com">sv.ephesossoftware.com</a>
            </div>
            <div class="col-md-6 col-sm-6 text-center text-lg-right">    
                <span>Nyheter från världen av modern teknik!</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>