Dienstag, 5. November 2013

Blogger Kontaktformular auf Extra-Seite

Heute geht es um das Blogger eigene Kontaktformular.
Ich möchte euch dazu ein paar Dinge zeigen:
  1. Als Erstes werde ich euch zeigen, wie man das Blogger-Kontaktformular in einen Blogger-Blog hinzufügen kann – es wird dann standardmäßig auf dem kompletten Blog angezeigt, auch auf allen Unterseiten. 
  2. Daher werde ich euch auch noch zeigen, wie man das Blogger-Kontaktformular auf einer extra Seite anzeigen kann. 
  3. Als nächstes zeige ich euch, wie man das Blogger-Kontaktformular auf den übrigen Seiten ausblenden kann.
  4. Zu guter letzt zeige ich euch noch, wie man das Design des Blogger-Kontaktformulars anpassen kann.




1. Kontaktformular einfügen

Um das Kontaktformular deinem Blog hinzuzufügen, gehst du in der Blog-Verwaltung unter „Layout” auf „Gadget hinzufügen” dort findet man das „Kontaktformular” unter dem Reiter „Weitere Gadgets”.

Nachdem du das Kontaktformular hinzugefügt hast und das Layout gespeichert hast, findest du das Kontaktformular auf allen Unterseiten deines Blogs – genau an der Stelle, an der du es in das Layout eingefügt hast.



2. Kontaktformular auf einer extra Seite anzeigen

2.1. Neue leere Seite erstellen

Als Erstes erstellen wir eine neue leere Seite. Dazu gehst du in der Blog-Verwaltung unter „Seiten” auf „Neue Seite” und dann auf „Leere Seite” hinzufügen.
Hinweis: Das Kontaktformular kann auch zu einer bereits bestehenden Seite hinzugefügt werden!


2.2. Kontaktformular zu einer Seite hinzufügen

Um das Kontaktformular einer Seite hinzuzufügen musst du links oben in den „HTML” Modus wechseln, dazu klickst du einfach auf „HTML”.

Anschließend fügst du dann nur noch den folgenden HTML-Code ein:
<!-- Kontaktformular Start http://bloggerfragen.blogspot.com/ --><form name="contact-form"><br />
<br />
<span style="font-weight: bolder;">Name</span>
<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<br />
<span style="font-weight: bolder;"><br /></span>
<span style="font-weight: bolder;">E-Mail </span> (Pflichtangabe)
<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<br />
<span style="font-weight: bolder;"><br /></span>
<span style="font-weight: bolder;">Nachricht </span> (Pflichtangabe)
<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Senden" /> <div align="right"><a href="http://bloggerfragen.blogspot.de/2013/11/blogger-kontaktformular-auf-extra-seite.html"><br /> <br /><input type="button" value="Kontaktformular einbinden"></a></div>
<br />
<div style="max-width: 230px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div>
</div>
</form><!-- Kontaktformular Ende http://bloggerfragen.blogspot.com/ -->


2.3. Seite veröffentlichen

Nachdem veröffentlichen der Seite, findest du nun auch ein Kontaktformular auf deiner extra Seite.

Allerdings findest du das Kontaktformular zusätzlich auch noch an der Stelle, an der du es im ersten Schritt in das Layout eingefügt hast und auf allen anderen Unterseiten – wie du das ändern kannst, zeige ich dir im nächsten Schritt.



3. Kontaktformular von den übrigen Seiten entfernen

Um das Kontaktformular von den übrigen Seiten zu entfernen musst du die HTML-Vorlage bearbeiten.
Wichtig: Das Kontaktformular-Gadget darf nicht einfach gelöscht werden, da sonst das Kontaktformular auf deiner extra Seite nicht mehr funktioniert!

Hinweis: Bevor du die HTML-Vorlage bearbeitest, solltest du deine Vorlage sichern.


3.1. HTML bearbeiten und HTML-Code-Suche öffnen

In der Blog-Verwaltung gehst du auf „Vorlage” und klickst dann auf „HTML bearbeiten”.

Um die HTML-Code-Suche zu öffnen klickst du mit der Maus irgendwo in den HTML-Code, anschließend drückst du auf deiner Tastatur „Strg” + „F” oder „F3”.
Wichtig: Dein Mauszeiger muss im HTML-Code blinken, ansonsten öffnet sich nicht die HTML-Code-Suche sondern nur die normale Browser-Suche. 


3.2. Kontaktformular HTML-Code finden

Nun musst du nach dem HTML-Code des Kontaktformulars suchen. Dazu tippst du den folgenden Begriff in das kleine Suchfeld und drückst „Enter”:
ContactForm1


3.3. Kontaktformular HTML-Code vollständig anzeigen

Um den vollständingen HTML-Code des Kontaktformulars anzuzeigen klickst du nun auf den kleinen schwarzen Pfeil (Dreiecks-Pfeil) vor:
<b:widget id='ContactForm1'
und danach noch auf den schwarzen Pfeil vor:
<b:Includable id='main'
Nun wird der komplette HTML-Code des Kontaktformulars angezeigt.


3.4. Überflüssigen HTML-Code rauslöschen

Damit das Kontaktformular nicht mehr auf jeder Unterseite deines Blogs angezeigt wird, musst du den markierten Teil des HTML-Codes rauslöschen.
  <b:widget id='ContactForm1' locked='false' title='Kontaktformular' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>

</b:includable>
</b:widget>


3.5. Gekürzter HTML-Code des Kontaktformulars

Der HTML-Code des Kontaktformulars sollte dann so aussehen:
<b:widget id='ContactForm1' locked='false' title='Kontaktformular' type='ContactForm'>
<b:includable id='main'>
</b:includable>
</b:widget>


3.6. Vorlage speichern

Nachdem du die Änderungen mit einem Klick auf „Vorlage speichern” gespeichert und angewendet hast, ist das Kontaktformular nur noch auf deiner extra dafür erstellten Seite zu sehen.



4. Kontaktformular-Design anpassen

Standardmäßig sind die Formularspalten alle gleich breit, mit ein wenig CSS-Styling-Code kann man das aber ändern – damit das Kontaktformular auch wie ein richtiges Kontaktformular aussieht.


4.1. HTML bearbeiten und HTML-Code-Suche öffnen

Dazu  musst du in der in der Blog-Verwaltung wieder auf „Vorlage” und zu „HTML bearbeiten”.

Die HTML-Code-Suche öffnest du – wie oben unter 3.1. – indem du irgendwo in den HTML-Code klickst und anschließend auf deiner Tastatur „Strg” + „F” oder „F3” drückst.
Wichtig: Die HTML-Code-Suche öffnet sich nur, wenn dein Mauszeiger im HTML-Code blinkt, ansonsten öffnet sich nur die normale Browser-Suche.


4.2. HTML-Code suchen

In der HTML-Code-Suche gibst du folgendes als Suchbegriff ein und startest die Suche mit „Enter”:
<b:skin>


4.3. HTML-Code vollständig anzeigen

Um den HTML-Code vollständig anzuzeigen, klickst du auch hier wieder auf den schwarzen Pfeil (Dreieckspfeil) vor:
<b:skin>


4.4. Richtige Stelle im HTML-Code finden

Als nächstes musst du noch nach folgende Code-Zeilen suchen:
]]></b:skin>


4.5. CSS-Styling-Code hinzufügen

Jetzt nur noch die markierten Zeilen CSS-Code direkt davor einfügen.
.contact-form-name, .contact-form-email {
max-width:
190px;
width: 100%;
}
.contact-form-email-message {
max-width:
380px;
width: 100%;
height: 150px;
}

]]></b:skin>
So sollte das Ganze dann aussehen.
Die rot markierten Werte kannst du nach belieben anpassen:
  • Der erste Wert legt die Breite des Namens-Feldes und die breite des E-Mail-Feldes fest. 
  • Der zweite Wert bestimmt die breite des Nachrichten-Feldes.


4.6. Vorlage speichern

Jetzt nur noch die Änderungen speichern („Vorlage speichern”) und das Kontaktformular sieht schon wie ein richtiges Kontaktformular aus.



5. Kontaktformular in Aktion

Auf meiner Fragen-Seite findest du ein funktionierendes Kontaktformular.

Damit auch deine Leser die Anleitung finden und sich eine eigene Kontaktformular-Seite erstellen können, kommst du mit einem Klick auf „Kontaktformular einbinden” direkt zu diesem Tutorial.

Ich hoffe meine kleine Anleitung hat dir weitergeholfen, falls es nicht funktionieren sollte, du Fragen oder Anregungen hast, darfst du mir gerne einen Kommentar hinterlassen oder mir eine Nachricht über mein Kontaktformular schicken.

Kommentare:

  1. Ich bin super begeistert und habe mit Hilfe dieser Anleitung mal entsprechendes umgesetzt. Vielen Dank!!!

    AntwortenLöschen
  2. Eine Frage habe ich generell zu einer extra seite. Wie sieht man die auf meinem Blog?

    AntwortenLöschen
    Antworten
    1. Wenn in deinem Blog das Seiten-Gadget aktiv ist, dann kannst du die Seite dort verlinken – das erfolgt in der Regel automatisch, beim veröffentlichen der Seite.
      Ansonsten kannst du auch ganz normal auf deine Extra-Seite verlinken.

      Löschen
  3. Wie kann ich die Kontaktformulare an eine andere e-Mailadresse schicken lassen?

    AntwortenLöschen
    Antworten
    1. Die eingegebenen Daten werden an die E-Mail-Adresse gesendet, mit der du bei Blogger angemeldet bist. Du kannst aber einfach eine E-Mail-Weiterleitung in Google Mail einrichten.

      Löschen
  4. Vielen Dank für die Hilfe! So konnte ich auch gerade das Kontaktformular sinnvoll bei mir einbetten!
    LG Carolin

    AntwortenLöschen
  5. Vielen Dank, die Anleitung ist super!

    AntwortenLöschen
  6. Ganz lieben Dank für die tolle und detaillierte Anleitung. Die hat mir wirklich sehr geholfen, endlich mal ein Kontaktformular auf meinen Blog hinzuzufügen. =)

    AntwortenLöschen
  7. huhu,
    ich habe gerade dein kontaktformular auf einer dafür vorgesehenen seite eingerichtet, allerdings funktioniert es nicht :(

    wenn ich auf senden gehe passiert rein gar nichts. was hab ich falsch gemacht oder was muss ich tun damit es funktioniert? du kannst dir das ganze gerne einmal selber angucken: http://lizzyown.blogspot.de/p/kontakt.html

    lg

    AntwortenLöschen
    Antworten
    1. Du scheinst mittlerweile ein externes Kontaktformular zu verwenden.

      Löschen
  8. das stimmt aber das ist eigentlich nur eine notlösung. ich würde lieber das blogger kontaktformular benutzen :(

    AntwortenLöschen
    Antworten
    1. Wenn du die Schritte 1. bis 3. der Reihe nach abarbeitest sollte es eigentlich funktionieren.

      Löschen
  9. vielen dank, ich habe eben mein kontaktformular in null komma nichts erstellt. top beitrag! :)

    AntwortenLöschen
  10. Hallo habe es genau so gemacht, aber trotzdem funktioniert das senden nicht und beim Nachricht verfassen kann man keine Leerzeichen verwenden, was das ganze sehr unleserlich macht.

    Mein blog: http://crazydeath2.blogspot.jp/p/blog-page.html

    AntwortenLöschen
    Antworten
    1. Es scheint wohl an der Vorlage zu liegen - du verwendest die dynamischen Ansichten.
      Wenn ich deine Vorlage benutze funktioniert es bei mir auch nicht mehr.

      Löschen
  11. Hallo, es hat alles super funktioniert. Allerdings sollen unsere Nutzer noch die Möglichkeit erhalten ein Foto mitzuschicken. Wie kann ich diese Funktion noch hinzufügen?

    AntwortenLöschen
  12. Hallo! Danke, es hat prima geklappt.Eine Frage habe ich aber...Ich habe jetzt "Kontakt" und "Startseite" dort stehen. Allerdings in verschiedenen Schriften.Bzw.einmal fett einmal normal. Gerne hätte ich auch den "Kontakt" in fett. Wie kann ich das ändern? Startseite könnte ich auch eigentlich weglassen. Aber wenn ich auf der Kontaktseite bin, finde ich es schön, wieder auf "Startseite" klicken zu können. Nur hätte ich es halt gerne beides in fett...

    AntwortenLöschen
  13. Hat mir sehr geholfen. Vielen Dank :)

    AntwortenLöschen
  14. Vielen Dank. Hat super geklappt

    AntwortenLöschen
  15. Herzlichen Dank für die wertvolle Anleitung! Ich habe keine Ahnung von HTML, aber mit deiner Hilfe war es voll einfach.
    Liebe Grüsse, Susanne

    AntwortenLöschen
  16. Halo, ich habe den HTML-Code jetzt kopiert und bei mir eingebunden, aber das Formular geht nicht. Hätte ich noch was ändern müssen?
    Vielen Dank schon mal vorab und liebe Grüße (http://nichtohnebuch.blogspot.de/)

    AntwortenLöschen
  17. Hallo,
    ich habe das Kontaktformular eingefügt, es schaut so aus, als ob die Mail gesendet wurde, aber sie kommt nirgends an, auch nicht bei meiner Gmail-Adresse (bei der ich eine Weiterleitung eingerichtet habe).
    Hat jemand eine Idee?

    AntwortenLöschen
    Antworten
    1. Hallo, komisch, genau das gleiche Problem habe ich heute auch. Die Mails kommen nicht an.

      Löschen
    2. Ich hab´ genau das gleiche Problem...nervig. Da hätte man schon ein tolles Tutorial und dann so was :/

      Löschen
  18. Ich kann mich anschließen, beim schreiben erscheint ganz normal" Nachricht erfolgreich gesendet " aber leider kommt nichts an!?

    AntwortenLöschen
  19. Dito bei mir kommt auch nichts an, hab schon alles versucht...

    AntwortenLöschen
  20. Bei mir auch das Problem, ich bekomm die nachricht, das erfolgreich gesendet wurde. aber kommt nichts an.
    Email für kommentare kommen an. Kontaktformular nix :( woran kann das denn liegen?

    AntwortenLöschen
  21. Ich nutze das normale Blogger Kontaktformular in der Seitenleiste und auch das funktioniert nicht - hat schon jemand eine Lösung?

    AntwortenLöschen
  22. Habe vom Blogger Support erfahren, daß das Formular buggy ist. Die Supporterin wollte das Thema zu den Entwicklern weitergeben ("eskalieren"), damit die den Fehler beheben! Bis wann die Lösung dauern könne, sei völlig offen.

    AntwortenLöschen
    Antworten
    1. Moin, habe festgestellt, dass die Nachricht über das Formular an die darin eingetragene Email geht - man schreibt also an sich selbst, Das ist der Fehler. Gibt´s schon ´was über ne Lösung?

      Löschen
  23. Hallo,

    mein Kontaktformular unter:

    erlebedasunbekannte.blogspot.co.at

    steht "ist gesendet" ich erhalte aber keine Nachricht. wo und wie kann ich die hinterlegte emailadresse prüfen?

    Danke

    AntwortenLöschen
    Antworten
    1. In deinem Blogger-Profil kannst du unter "Nutzerinformationen" eine E-Mail-Adresse eintragen, "unter der deine Leser dich erreichen können".
      Dahin sollten dann auch die Nachrichten gehen.

      Löschen
  24. Hallo,
    Danke für deine tolle Anleitung. Hat super funktioniert. Kannst ja gerne einmal auf meinem Blog vorbeischauen und dich davon überzeugen.

    http://topturtletrudi.blogspot.co.at/

    Liebe Grüße,
    Top Turtle Trudi

    AntwortenLöschen
  25. Wow! Wie großartig ist das denn!!! Vielen herzlichen Dank - funktioniert perfekt und ich habe wieder etwas über HTML-Codierung gelernt.
    ... ob das wohl auch mit dem Blog-Archiv funktioniert???

    AntwortenLöschen
  26. Danke, Ihre Seite und Ihre Tipps sind sehr toll, haben mir schon sehr oft geholfen!

    AntwortenLöschen