Kontaktformular aus Gadget raus in eine Seite setzen

Blogger bietet unter Layout > "Gadget hinzufügen" > "Weitere Gadgets" seit einiger Zeit ein Kontaktformular-Gadget an. Das Gadget wird standardmäßig an einer der üblichen Orte für Gadgets angezeigt, also in jeder Blogansicht. Da nimmt es viel Platz ein. Wer den nicht dafür hergeben will, sondern das Formular lieber eingebettet in einer "Seite" stehen hätte und nur ein Wort, wie etwa "Kontakt", verlinken möchte, der kann das tun.

---

Dazu muss man das Gadget erstmal normal installieren, den Formular-Code des Gadget aus dem Quellcode kopieren, den Code dann in den HTML-Modus einer "Leeren Seite" einfügen, die leeren <p></p> und die <br></br> löschen und normale Zeilenumbrüche setzen, wo man sie braucht und schließlich unter "HTML bearbeiten" das Gadget selbst aushöhlen.

Das Gadget wird dann nicht mehr angezeigt, es steht aber noch unter "Layout" und das muss es auch, damit das Formular in der "Seite" funktioniert.

Wie das genau geht und wie man das Kontaktformular dann noch stylen kann, wird dort ausführlich beschrieben: http://bloggerfragen.blogspot.de/2013/11/blogger-kontaktformular-auf-extra-seite.html Web | Mobil Da ist das mit den Seiten-kompatiblen Zeilenumbrüchen für den Formularcode auch bereits gemacht.

• Hinweis: Das Kontaktformular ist in dem Post zwar mit bloggerfragen.blogspot.com markiert und beinhaltet auch einen Link zu dem oben genannten Post, da es sich aber im Wesentlichen um das Formular aus dem Gadget handelt, kann man die Markierungen löschen und auch den Link, wenn man das will. Dass man die Lösung dafür, wie man das Formular funktionierend und ordentlich gestylt auf die Seite bringt und das Gadget behält ohne es anzuzeigen, von dort hat, sollte man aber Formular-nah oder dort, wo man alle Unterstützungen listet, erwähnen.

Design-Anpassung

Die Codes, um das Formular mehr an die Seite und das eigene Design anzupassen, muss man übrigens nicht unbedingt unter "HTML bearbeiten" eintragen. Man kann sie ebenso gut unter "CSS hinzufügen" eintragen (von da aus werden sie automatisch an der angegebenen Stelle im HTML eingefügt). Oder aber man setzt die CSS-Codes zwischen Style-Klammern direkt unter das Formular im HTML-Modus der Seite. Letzteres empfehle ich; denn dann hat man gleich alles an einer Stelle.

<style type="text/css">
  CSS-CODES DAZWISCHEN
</style>

Für die im oben genannten Post schon aufgeführten Bereiche (Bereiche für die Einträge) kann man, neben der Feldbreite beispielsweise auch eine andere Rahmenfarbe (border-color), Hintergrundfarbe (background-color), Schriftfarbe (color), Schriftgewicht (font-weight) und Schriftgröße (font-size) festlegen, wenn man das mehr an's eigene Design anpassen will. Auch für den Senden-Button kann man andere Styles angeben. Will man den Gradienten, der im Senden-Button über der Hintergrundfarbe liegt, deaktivieren, muss man background-image: none; kommandieren.

Beispiel-Muster für ein Senden-Button-Design:

.contact-form-button-submit {
    background-image: none;
    background-color: HINTERGUNDFARBE;
    border: none;
    color: TEXTFARBE;
    -moz-box-shadow: 0px 0px 3px BOXSCHATTEN-FARBE inset;
    -webkit-box-shadow: 0px 0px 3px BOXSCHATTEN-FARBE inset;
    box-shadow: 0px 0px 3px BOXSCHATTEN-FARBE inset;
}
.contact-form-button-submit:hover {
    background-image: none;
    background-color: HINTERGUNDFARBE;
    border: none;
    color: TEXTFARBE;
    -moz-box-shadow: 0px 0px 3px BOXSCHATTEN-FARBE inset;
    -webkit-box-shadow: 0px 0px 3px BOXSCHATTEN-FARBE inset;
    box-shadow: 0px 0px 3px BOXSCHATTEN-FARBE inset;
}

Bilder dazu

Unter Layout Kontaktformular-Gadget hinzufügen

Gadget in Sidebar

Formular-Code im Quelltext

So sieht das Formular in einer Seite aus, wenn die Zeilenumbrüche noch nicht angepasst wurden:

Zeilenumbrüche nicht angepasst

So sieht es aus, wenn die Umbrüche bereits angepasst wurden:

Zeilenumbrüche angepasst und einiges gestylt

Senden-Button bei Hover

Unter "HTML bearbeiten" das Widget ContactForm1aufrufen

Gadget im HTML noch unausgehöhlt

Was man von dem Gadget-Code löschen kann und was stehen bleiben muss, damit das Formular in der "Seite" weiterhin funktioniert, das Gadget aber nicht zusätzlich angezeigt wird, erfährt man auf http://bloggerfragen.blogspot.de/2013/11/blogger-kontaktformular-auf-extra-seite.html  Web  |  Mobil 

Hinweis für diejenigen, die mit Blogger's Kontaktformular eine Nachricht senden

Es wird nach dem Senden automatisch das Folgende unter die Nachricht gesetzt:

Mit freundlichen Grüßen
Der eingetragene Name | Die eingetragene Mailadresse

An welche Emailadresse die Nachrichten geschickt werden

Die Nachrichten, die mit dem Kontaktformular abgeschickt werden, gehen an eine der Email-Adressen, die im Googlekonto gelistet sind, siehe myaccount.google.com. Eine Regel, welche Adresse Google dafür aussucht, ist nicht ersichtlich. In meinen diversen Konten wird stets die Adresse für die Wiederherstellung beschickt. Andere berichten, dass die Mails bei Ihnen an die primäre Adresse gehen, obwohl sie eine andere Adresse für die Wiederherstellung haben. Eventuell muss man also anfangs die Postfächer und Spam-Ordner aller gelisteten Adressen kontrollieren, um die Mails zu finden und für die Zukunft zu wissen, wo die Mails stets landen werden.

Ute Ziemes, sg.utez.de, 2014-02-16, Ergänzung: 2015-02-10