Slik legger du til et Google Dokumenter-kontaktskjema til Blogger-bloggen din

Mange av dere har sannsynligvis hoppet på WordPress eller Tumblr-toget, men det er fortsatt en rekke personer som holder ut på Blogger. Google følger med Joneses med sin nye Blogger i Draft-grensesnitt, og webverktøyet gir fortsatt et billigere alternativ for total tilpasning og originale domenenavn for personlige blogger..

Hvis du er en Blogger-bruker, kan du noen ganger ha lurt på, “Hvordan kan jeg lage en av de sprø kule kontaktskjemaene som alle de andre bloggene i verden har?” Heldigvis, hvis du også er en Google Docs-bruker, kan dette gjøres relativt enkelt (og absolutt ingen smerte).

Å lage skjemaet

For å begynne, logg inn på Google Dokumenter, og opprett et nytt skjema som vist på bildet nedenfor. Du kan slå inn en tittel for skjemaet ditt for å holde deg organisert, men du kan faktisk forlate denne delen av skjemaet ditt som “Uten navn” og det ville ikke gjøre noen forskjell. For å gjøre det til en legitim kontaktside, bør du gi brukerne den “avsnitt tekst” spørsmålstype. Dette gir nok plass til lange spørsmål eller kommentarer.

Vær oppmerksom på at standardskjemaet automatisk legger inn to prøvespørsmål. Pass på å slette den andre prøven, ellers vil du få en fantomforespørsel som du egentlig ikke trenger. Men hvis du vil legge til flere spørsmål ved hjelp av forskjellige svarformater (avkrysningsbokser, flervalg, etc.), er du fri til å gjøre det. Du kan til og med gjøre svarene som kreves for elementer som kontaktdetaljer. Når du er ferdig, må du huske å lagre den.

Rippe skjemaet

Du kan allerede være oppmerksom på at Google-skjemaer pleier å holde fast ved ikke-tilpassbare maler som ofte ikke passer godt sammen med bloggens design. Sikker på at du kan legge emnet inn i en iFrame-kode, men den beholder likevel det samme formatet som de forhåndsdefinerte cookie-cutter-malene. Heldigvis er det en vei rundt det.

Når du har fylt ut skjemaet ditt, går du tilbake til Docs hjemmeside og åpner regnearket for skjemaet du nettopp har opprettet. Som et sideblad vil dette regnearket tillate deg å se alle innleveringene i skjemaet ditt. Når du ankommer på denne siden, velger du “Form” på menylinjen, og klikk deretter “Gå til live form“.

Mens du ser på skjemaet ditt, bør du bruke hvilken funksjon som nettleseren din tillater å se på kildekoden for siden. Siden jeg bruker Chrome på min Mac for denne opplæringen, brukte jeg bare sporet til å åpne kontekstuellmenyen og valgt “Vis sidekilde“.

Her, ting kan bli kjedelig, så vær nøye. Du bør bruke finnfunksjonen i nettleseren din (CTRL + F) for å finne termen “form handling“. Når du finner det, bør du se denne koden:

Legg merke til hvor denne koden er, og finn deretter denne neste koden:

Kopier hele veien ned fra den førstnevnte linje av kode til neste kodenavn. Hvis du vil føle deg mer komfortabel, legger du inn denne koden i en tekst-app, og deretter fortsett. Du vil bruke det øyeblikkelig.

Installere skjemaet

Når du har kopiert den valgte koden til utklippstavlen, bør du gå inn i Blogger-oversikten. Som jeg sa før, bruker jeg Blogger i Draft-grensesnitt, men hvis du bruker det opprinnelige brukergrensesnittet, vil du fortsatt kunne følge med.

Først av, bør du opprette en ny side for bloggen din og gi rett til det “Kontakt meg” eller noe lignende. Etter å ha åpnet den, gå direkte til HTML-redigering av siden og lim inn koden.

Fra nå av har du i utgangspunktet fullført oppgaven med å installere skjemaet på bloggen din. På dette tidspunktet bør forhåndsvisningen din se ut som på bildet nedenfor. Forhåndsvisninger vil imidlertid være forskjellige for forskjellige personer basert på maskinen de bruker.

Tilpasse skjemaet

Som jeg oppdaget med min personlige blogg, blir det noen ganger problemer som at det er for mye plass mellom sidetittelen og skjemaet selv eller svarboksen er for stor for bloggenes bredde. Disse mindre problemene kan enkelt løses.

Hvis du har problemer med at det er for mye mellomrom mellom tittelen og spørsmålene, søk etter noen

br

tagger og slett dem. Men hvis du har problemer med bredden på svarboksen, søk etter denne linjen med kode:

</pre> </blockquote><p>Ved å justere “kolonner” verdi til et mindre nummer, kan du endre bredden på bloggen for å passe til mindre skjermer eller alternative nettlesere. Videre kan du faktisk endre fonter av spørsmålene mens du redigerer siden. Med nok tilpasning kan du ende opp med noe som følgende bilde.</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>Konklusjon</h2><p>Dette er en rask og effektiv måte å plassere et stil-matching Google Dokumenter-skjema på Blogger-bloggen din, og veiledningen kan sannsynligvis bli tilpasset for en annen blogg eller nettside. Du kan gjøre mye mer enn det du ser her, så sørg for at du leker med det en liten stund.</p><p>Hvilke andre nettsteder bruker du til å lage webskjemaer? Hvordan trente denne opplæringen for deg? Hvis du har problemer med å lage ditt eget webskjema, gi oss beskjed i kommentarene eller alternativt still et spørsmål på MakeUseOf Answers.</p> <p><small>Les mer om: Google Dokumenter.</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"> « Slik legger du til en ordliste eller ordboksseksjon på ditt WordPress-nettsted</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">Slik legger du til en hjelp / ressurseksjon 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://no.ephesossoftware.com">no.ephesossoftware.com</a>
            </div>
            <div class="col-md-6 col-sm-6 text-center text-lg-right">    
                <span>Nyheter fra verden av moderne teknologi!</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>