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:

Markus Sauerbrey hat gesagt…

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

Rosarotes Kaninchen hat gesagt…

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

ben hat gesagt…

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.

Anonym hat gesagt…

Wie kann ich die Kontaktformulare an eine andere e-Mailadresse schicken lassen?

ben hat gesagt…

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.

Carolin Bertram hat gesagt…

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

Ulr ike hat gesagt…

Vielen Dank, die Anleitung ist super!

Julia hat gesagt…

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. =)

Li Booksonthehead hat gesagt…

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

ben hat gesagt…

Du scheinst mittlerweile ein externes Kontaktformular zu verwenden.

Li Booksonthehead hat gesagt…

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

ben hat gesagt…

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

Isabel glam and roses hat gesagt…

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

Crazydeath hat gesagt…

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

ben hat gesagt…

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.

Luise KOCHEN³ hat gesagt…

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?

Anonym hat gesagt…

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...

Anonym hat gesagt…

Hat mir sehr geholfen. Vielen Dank :)

Anonym hat gesagt…

Vielen Dank. Hat super geklappt

Anonym hat gesagt…

Super, danke!!!

Susanne hat gesagt…

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

Tanja Hasirasi hat gesagt…

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/)

Dalin und Loui hat gesagt…

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?

Uwe hat gesagt…

Hallo, komisch, genau das gleiche Problem habe ich heute auch. Die Mails kommen nicht an.

Anonym hat gesagt…

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

Tam hat gesagt…

Dito bei mir kommt auch nichts an, hab schon alles versucht...

Bettina Jindra hat gesagt…

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?

Anonym hat gesagt…

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

Uwe hat gesagt…

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.

Wolfgang Janko hat gesagt…

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

Franzi hat gesagt…

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

ben hat gesagt…

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.

Top Turtle Trudi hat gesagt…

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

Katja hat gesagt…

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???

Hans-Werner Rudat hat gesagt…

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?

veganversand lebensweise hat gesagt…

Danke, Ihre Seite und Ihre Tipps sind sehr toll, haben mir schon sehr oft geholfen!