Hinzufügen eines Kontaktformulars für Google Text & Tabellen zu Ihrem Blogger-Blog

Viele von Ihnen haben sich wahrscheinlich auf WordPress oder den Tumblr-Zug gesprungen, aber es gibt immer noch einige Leute, die sich auf Blogger einlassen. Google hält sich mit der neuen Benutzeroberfläche von Blogger in Draft an den Joneses. Das Webtool bietet immer noch eine günstigere Alternative für die vollständige Anpassung und ursprüngliche Domainnamen für persönliche Blogs.

Wenn Sie ein Blogger-Benutzer sind, haben Sie sich gelegentlich gefragt, “Wie kann ich eines dieser verrückt-coolen Kontaktformulare erstellen, die alle anderen Blogs der Welt haben??” Glücklicherweise können Sie, wenn Sie auch ein Google Text & Tabellen-Nutzer sind, dies relativ leicht (und absolut schmerzfrei) erledigen..

Das Formular erstellen

Melden Sie sich zunächst bei Google Text & Tabellen an und erstellen Sie ein neues Formular (siehe Abbildung unten). Sie können einen Titel für Ihr Formular eingeben, um sich zu organisieren, aber Sie können diesen Abschnitt Ihres Formulars auch als belassen “Ohne Titel” und es würde keinen Unterschied machen. Um es zu einer legitimen Kontaktseite zu machen, sollten Sie den Benutzern die “Absatztext” Fragetyp. Dies bietet ausreichend Platz für längere Fragen oder Kommentare.

Bitte beachten Sie, dass das Standardformular automatisch zwei Musterfragen einfügt. Stellen Sie sicher, dass Sie das zweite Sample löschen, ansonsten erhalten Sie eine Phantomabfrage, die Sie nicht wirklich benötigen. Wenn Sie jedoch weitere Fragen mit unterschiedlichen Antwortformaten (Ankreuzfelder, Multiple-Choice-Optionen usw.) hinzufügen möchten, können Sie dies tun. Sie können sogar die erforderlichen Antworten für Elemente wie Kontaktdetails eingeben. Wenn Sie fertig sind, denken Sie daran, es zu speichern.

Das Formular zerreißen

Möglicherweise wissen Sie bereits, dass Google-Formulare dazu neigen, nicht anpassbare Vorlagen zu verwenden, die sich oft nicht gut in das Design Ihres Blogs einfügen. Sicher, Sie können das Formular mit einem iFrame-Code einbetten, es behält jedoch dasselbe Format wie die vorgefertigten Cookie-Cutter-Vorlagen bei. Zum Glück gibt es einen Ausweg.

Gehen Sie nach dem Ausfüllen Ihres Formulars zurück zu Ihrer Docs-Startseite und öffnen Sie die Tabelle des soeben erstellten Formulars. Als Nebenbemerkung können Sie mit dieser Tabelle alle Eingaben in Ihr Formular sehen. Wenn Sie auf dieser Seite angekommen sind, wählen Sie “Bilden” in der Menüleiste und klicken Sie dann auf “Gehe zur Live-Form“.

Bei der Suche auf der Formularseite sollten Sie die Funktion des Browsers verwenden, um den Quellcode der Seite anzuzeigen. Da ich Chrome auf meinem Mac für dieses Lernprogramm verwende, habe ich lediglich mein Trackpad verwendet, um das Kontextmenü zu öffnen und auszuwählen “Seitenquelle anzeigen“.

Genau hier können die Dinge langweilig werden. Sie sollten die Suchfunktion Ihres Browsers (STRG + F) verwenden, um den Begriff zu finden “Form Aktion“. Wenn Sie es finden, sollten Sie diesen Code sehen:

Notieren Sie sich, wo sich diese Codezeile befindet, und suchen Sie dann das nächste Code-Bit:

Kopieren Sie den gesamten Weg von der ersten Codezeile bis zur nächsten Codezeile. Wenn Sie sich beim Einfügen dieses Codes in einer Text-App wohler fühlen möchten, fahren Sie fort. Sie werden es momentan verwenden.

Das Formular installieren

Nachdem Sie den ausgewählten Code erfolgreich in Ihre Zwischenablage kopiert haben, sollten Sie in Ihr Blogger-Dashboard wechseln. Wie bereits erwähnt, verwende ich die Benutzeroberfläche von Blogger in Draft. Wenn Sie jedoch die ursprüngliche Benutzeroberfläche verwenden, können Sie trotzdem mitverfolgen.

Zunächst sollten Sie eine neue Seite für Ihr Blog erstellen und diese berechtigen “Kontaktiere mich” oder etwas ähnliches. Wechseln Sie nach dem Öffnen direkt zum HTML-Bearbeitungsbereich der Seite und fügen Sie den Code ein.

Bis jetzt haben Sie im Wesentlichen die Installation des Formulars in Ihrem Blog abgeschlossen. Zu diesem Zeitpunkt sollte Ihre Vorschau der Abbildung unten ähnlich aussehen. Die Vorschau variiert jedoch je nach verwendetem Computer für verschiedene Personen.

Anpassen des Formulars

Wie ich in meinem persönlichen Blog festgestellt habe, gibt es manchmal Probleme, wie zu viel Platz zwischen Seitentitel und Formular selbst oder das Antwortfeld zu groß für die Breite des Blogs. Diese kleineren Probleme können leicht behoben werden.

Wenn Sie Probleme damit haben, dass zwischen dem Titel und den Fragen zu viel Platz ist, suchen Sie nach irgendwelchen

br

Tags und löschen Sie sie. Wenn Sie jedoch Probleme mit der Breite des Antwortfelds haben, suchen Sie nach dieser Codezeile:

</pre> </blockquote><p>Durch Anpassen der “Cols” Wenn Sie einen niedrigeren Wert angeben, können Sie die Breite des Blogs an kleinere Bildschirme oder alternative Browser anpassen. Darüber hinaus können Sie die Schriftarten der Fragen während der Bearbeitung der Seite ändern. Bei ausreichender Anpassung können Sie das folgende Bild sehen.</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>Fazit</h2><p>Dies ist eine schnelle und effiziente Möglichkeit, ein stilgerechtes Google Text & Tabellen-Formular in Ihrem Blogger-Blog zu platzieren. Das Lernprogramm kann möglicherweise für andere Blogs oder Websites angepasst werden. Sie können viel mehr als das, was Sie hier sehen, machen. Stellen Sie also sicher, dass Sie eine Weile mit ihm herumspielen.</p><p>Welche anderen Websites verwenden Sie zum Erstellen von Webformularen? Wie hat sich dieses Tutorial für Sie entwickelt? Wenn Sie Probleme bei der Erstellung Ihres eigenen Webformulars haben, teilen Sie uns dies bitte in den Kommentaren mit oder stellen Sie eine Frage bei MakeUseOf Answers.</p> <p><small>Erfahren Sie mehr über: Google Text & Tabellen.</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"> « Hinzufügen eines Glossars oder eines Wörterbuchabschnitts zu Ihrer WordPress-Site</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">Hinzufügen eines Hilfs- / Ressourcenabschnitts 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://ephesossoftware.com">ephesossoftware.com</a>
            </div>
            <div class="col-md-6 col-sm-6 text-center text-lg-right">    
                <span>Nachrichten aus der Welt der modernen 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>