Cum să adăugați un formular de contact Google Docs la blogul dvs. Blogger

Mulți dintre dvs. probabil au sărit pe WordPress sau pe trenul Tumblr, dar există încă un număr de oameni care susțin pe Blogger. Google ține pasul cu Joneses cu noul său Blogger în interfața de proiect, iar instrumentul web oferă în continuare o alternativă mai ieftină pentru personalizarea totală și numele de domenii originale pentru blogurile personale.

Dacă sunteți un utilizator Blogger, ați fi întrebat ocazional, “Cum pot face una dintre formele de contact nebun-cool pe care le au toate celelalte bloguri din lume?” Din fericire, dacă sunteți, de asemenea, un utilizator Google Docs, acest lucru se poate face cu ușurință (și absolut fără durere).

Realizarea formularului

Pentru a începe, conectați-vă la Google Docs și creați un nou formular, după cum arată imaginea de mai jos. Poți să pui un titlu pentru formularul tău pentru a te păstra organizat, dar de fapt poți părăsi această secțiune a formularului tău “fără titlu” și nu ar face nici o diferență. Pentru a deveni o pagină de contact legitimă, ar trebui să oferiți utilizatorilor accesul “textul paragrafului” tip de întrebare. Acest lucru permite suficient spațiu pentru întrebări sau comentarii lungi.

Rețineți că formularul implicit introduce automat două întrebări. Asigurați-vă că ați șters cel de-al doilea eșantion, altfel veți avea o anchetă fantomă pe care nu aveți nevoie. Cu toate acestea, dacă doriți să adăugați mai multe întrebări utilizând diferite formate de răspuns (casete de selectare, opțiuni multiple etc.), atunci sunteți liber să faceți acest lucru. Puteți obține chiar și răspunsurile necesare pentru elemente precum detaliile de contact. După ce ați terminat, asigurați-vă că vă amintiți să o salvați.

Ripping Formularul

Este posibil să știți deja că formularele Google tind să rămână nesupravegheate de șabloanele care nu pot fi personalizate și care adesea nu se potrivesc bine cu designul blogului dvs. Sigur, puteți încorpora formularul utilizând un cod iFrame, dar acesta păstrează încă același format ca șabloanele cookie-cutter pre-proiectate. Din fericire, există o cale în jurul valorii de asta.

După completarea formularului, reveniți la pagina principală a Documentelor și deschideți foaia de calcul a formularului pe care tocmai l-ați creat. Ca o notă laterală, această foaie de calcul vă va permite să vedeți toate trimiterile la formularul dvs. Când ajungeți pe această pagină, selectați “Formă” din bara de meniu, apoi faceți clic pe “Accesați formularul live“.

În timp ce vă uitați la pagina dvs. de formular, ar trebui să utilizați orice caracteristică pe care browser-ul dvs. o permite să priviți la codul sursă al paginii. Deoarece folosesc Chrome pe Mac pentru acest tutorial, am folosit doar trackpad-ul meu pentru a deschide meniul contextual și selectat “Vezi sursa paginii“.

Chiar aici, lucrurile s-ar putea plictisi, așa că acordă o atenție deosebită. Ar trebui să utilizați funcția Căutare din browserul dvs. (CTRL + F) pentru a localiza termenul “formează acțiunea“. Când îl găsiți, ar trebui să vedeți acest cod:

Notați unde este această linie de cod și apoi găsiți următorul fragment de cod:

Copiați totul în jos de la primul rând de cod menționat la următorul rând de cod menționat. Dacă v-ați simți mai confortabil să inserați acest cod într-o aplicație text, atunci mergeți mai departe. O veți folosi pentru moment.

Instalarea formularului

După ce ați copiat cu succes codul selectat în clipboard, trebuie să mergeți în tabloul de bord Blogger. După cum am spus mai devreme, folosesc interfața Blogger în proiect, dar dacă utilizați interfața de utilizator originală, veți putea să urmăriți.

În primul rând, ar trebui să creați o pagină nouă pentru blogul dvs. și să o îndreptați “Contacteaza-ma” sau ceva similar. După deschidere, mergeți direct la secțiunea de editare HTML a paginii și inserați codul.

Începând de acum, ați finalizat practic sarcina de a instala formularul pe blogul dvs. În acest moment, previzualizarea dvs. ar trebui să arate similar cu imaginea de mai jos. Cu toate acestea, previzualizările vor fi diferite pentru diferiți utilizatori pe baza mașinii pe care o folosesc.

Personalizarea formularului

După cum am descoperit cu blogul personal, uneori vor apărea probleme cum ar fi prea mult spațiu între titlul paginii și forma însăși sau caseta de răspuns fiind prea mare pentru lățimea blogului. Aceste probleme minore pot fi ușor rezolvate.

Dacă aveți probleme când există prea mult spațiu între titlu și întrebări, căutați orice

br

și ștergeți-le. Cu toate acestea, dacă aveți probleme cu lățimea casetei de răspuns, căutați această linie de cod:

</pre> </blockquote><p>Prin ajustarea “cols” valoare pentru un număr mai mic, puteți schimba lățimea blogului pentru a se potrivi ecranelor mai mici sau browserelor alternative. În plus, puteți schimba fonturile întrebărilor în timpul editării paginii. Cu o personalizare suficientă, puteți ajunge la ceva asemănător imaginii următoare.</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>Concluzie</h2><p>Aceasta este o modalitate rapidă și eficientă de a plasa pe blogul Blogger un formular Google Docs care să corespundă stilului, iar tutorialul ar putea fi adaptat pentru orice alt blog sau site web. Puteți face mai mult decât ceea ce vedeți aici, așa că asigurați-vă că jucați cu el puțin timp.</p><p>Ce alte site-uri folosiți pentru a crea formulare web? Cum a lucrat acest tutorial pentru tine? Dacă aveți probleme la crearea propriului dvs. formular web, anunțați-ne în comentarii sau, alternativ, adresați-vă o întrebare la Remarks MakeUseOf.</p> <p><small>Explorați mai multe despre: Documente Google.</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"> « Cum să adăugați un glosar sau o secțiune de dicționar în site-ul dvs. 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">Cum de a adăuga o secțiune Ajutor / Resurse în 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://ro.ephesossoftware.com">ro.ephesossoftware.com</a>
            </div>
            <div class="col-md-6 col-sm-6 text-center text-lg-right">    
                <span>Știri din lumea tehnologiei 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>