HTML #23: Kontaktformular auf eigener Seite

Es ist schon viel zu lange her, dass Tanja von Tamilu mich gefragt hat, wie ich es geschafft habe, dass mein Kontaktformular auf einer eigenen Seite ist. Wie genau ich das damals bei mir gemacht habe weiß ich nicht mehr, aber da ich gerade an einem anderen Blog gearbeitet habe, habe ich einfach mal nebenbei Screenshots gemacht. Mit dem Effekt, dass ich gleich noch ein bisschen tiefer abgetaucht bin und auch mit meinem Formular nun endlich zufriedener bin.



Bevor wir anfangen sollten wir unbedingt eine Sicherungskopie von unserem Blog anlegen, da wir später direkt am HTML etwas ändern müssen. Bisher ist mir da noch nichts passiert, aber ausgeschlossen ist nichts. Für Probleme, die entstehen kann und will ich nämlich keine Verantwortung übernehmen. Ich erkläre hier alles nach bestem Wissen und Gewissen. Darum bitte einmal zu Teil 21 der Reihe und alles speichern.


Im Layoutmenü fügen wir zunächst das Kontaktformular-Widget hinzu. Dazu klicken wir auf "Gadget hinzufügen". Ein neues Fenster (das auf dem Bild oben" öffnet sich. Links wählen wir den Reiter "Weitere Gadgets" aus und dann das "Kontaktformular" mit dem blauen Umschlag.


Es öffnet sich wieder ein neues Fenster. Den Titel können wir ruhig so belassen, denn später sieht man ihn nicht mehr. Also klicken wir nur auf den orangen "Speichern"-Button.


Immernoch im Layoutmenü positionieren wir das neue Gadget um Bereich unter den "Blogposts". Anschließend klicken wir oben auf "Layout speichern".


So sieht das Gadget nun aus. Es wird einfach in dieser recht schmalen Form unter den Posts (der neue Blog hat noch keine) angezeigt. Das reicht uns natürlich nicht, denn das Kontaktformular soll ja auf eine eigene Seite.


Diese Seite müssen wir erstmal erstellen. Dazu wählen wir im Menü den Punkt "Seiten" und dann "Neue Seite" aus.


Wichtig ist nun, dass wir als erstes der Seite einen Namen geben. Dieser wird später in der URL der Seite angezeigt. Machen wir das nicht, dann erscheinen dort die ersten Wörter des eingefügten Textest und das ist weder schön noch lässt es sich nachträglich ändern (außer man legt eine neue Seite an und beginnt mit der Arbeit von vorne).

Statt "Verfassen" wie wir es vom Post kennen wählen wir nun "HTML" aus und fügen den nachfolgenden Text ein.

<form name="contact-form">
<span style="font-weight: bolder;">Name</span>
<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="45" type="text" value="" />
<span style="font-weight: bolder;"><br /></span>
<span style="font-weight: bolder;">E-Mail </span> (benötigt)
<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="45" type="text" value="" />
<span style="font-weight: bolder;"><br /></span>
<span style="font-weight: bolder;">Nachricht </span> (benötigt)
<br />
<textarea class="contact-form-email-message" cols="60" id="ContactForm1_contact-form-email-message" name="email-message" rows="10"></textarea><br />
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Senden" /> <br />
<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>


In etwa so sollte es nun aussehen. Wer keine Kommentare unter seinem Kontaktformular haben möchte, der klickt rechts auf "Optionen" und stellt dort "Leserkommentare nicht zulassen, bestehen ausblenden" aus. Einmal auf "Fertig" klicken und oben auf den orangen "Veröffentlichen"-Button. Ich habe mir erst später überlegt, dass ich das nicht möchte, darum steht bei mir "Aktualisieren". Lasst euch da nicht verunsichern.


Jetzt soll die neue Seite natürlich zu den anderen Seiten in die Leiste. Dazu öffnen wir das Layoutmenü und klicken dort in der Box für die Seiten auf "Bearbeiten".


Hier müssen wir dann ein Häkchen bei "Kontakt" setzen. Im unteren Bereich können wir die Liste dann noch in die für uns richtige Reihenfolge bringen. Am Ende natürlich wieder speichern.


In der Leiste oben steht nun "Kontakt" und wenn wir drauf klicken, dann erscheint das Formular auf der neuen Seite. Jetzt haben wir nur noch zwei Probleme. Zum einen ist das Textfeld viel zu klein und zum anderen befindet sich das Formular nicht nur auf der Seite sondern immer und auf jeder Seite auch noch einmal unter dem Postbereich. Diese Probleme lösen wir jetzt.


Haben wir ein Backup gespeichert? Wenn ja, dann kann es mit einem Klick auf "HTML bearbeiten" unter dem Menüpunkt "Vorlage" weiter gehen.


Der Code, der hinter unserem Blog steht sieht wirklich sehr verwirrend aus. Keine Panik! Ich gehe in ganz kleinen Schritten vor und überall gibt es ein Bild dazu, damit es auch klappt. Wir klicken erstmal mit der Maus in den Bereich mit dem HTML und drücken dann "Strg"+F. Dadurch ploppt oben das kleine Suchfeld (Search) auf. Klicken wir vorher nicht in den Code, so wird nicht dieser sondern die Seite drum herum durchsucht. 

Nun suchen wir nach "ContactForm1". Bitte ohne Anführungszeichen in die Suchleiste eingeben.

Die Zeile die gelb markiert wird sollte wie meine aussehen.
<b:widget id='ContactForm1' [...]
Vor der Zeile steht eine Nummer und ein kleiner schwarzer Pfeil. Auf genau diesen klicken wir nun.


Vor der Zeile unter der gelben Markierung erscheint nun wiederum ein Pfeil auf den wir auch klicken. Die Zeile beginnt mit
<b:Includable id='main'
Damit es übersichtlicher ist wird ein Teil des HTML versteckt. Durch das klicken auf die Pfeile erscheint er. Also nicht mehr als nötig öffnen, damit es nicht zu unübersichtlich wird.


Im Bild oben und unten ist der Bereich markiert, den wir nun löschen müssen. Einfach das Widget zu löschen geht nicht, da dann unsere neue Seite auch nicht mehr arbeiten könnte. Darum müssen wir an dieser Stelle einen Teil des Codes für das Kontaktformular entfernen.


<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>
Der helle Teil des Textes muss entfernt werden. Am Ende sollte es dann so aussehen.


Da die Bilder auf dem Blog ja immer etwas kleiner sind als der heimische Bildschirm hier noch einmal der gekürzte Code für das Formular:

<b:widget id='ContactForm1' locked='false' title='Kontaktformular' type='ContactForm'>
<b:includable id='main'>
</b:includable>
</b:widget>
Damit hätten wir das Problem gelöst, dass das Formular doppelt angezeigt wird. Ab jetzt erscheint es nur noch auf unserer extra angelegten Seite. Wer jetzt schon zufrieden ist, der darf auf den orangen "Vorlage speichern"-Button klicken und sich freuen. Wer gerne noch etwas an der Größe der Felder ändern möchte, der ist noch nicht ganz fertig.


Wieder bemühen wir das Suchfeld. Dieses mal suchen wir nach "<b:skin>". Vor der Zeile mit der gelben Markierung klicken wir auf den kleinen schwarzen Pfeil. 


Nach dem Klick auf den Pfeil suchen wir nach "]]></b:skin>".


Wir klicken direkt vor die Markierung und drücken die Entertaste. So bekommen wir eine neue freie Zeile in die wir unseren neuen Codeschnipsel einfügen können. Dieser sieht so aus:

.contact-form-name, .contact-form-email {
max-width: 250px;
width: 100%;
}
.contact-form-email-message {
max-width: 600px;
width: 100%;
height: 200px;
}

In der zweiten Zeile steht "max-width: 250px;". Hier können wir die Zahl so verändern wie wir es möchten, denn diese gibt an wie viele Pixel die Zeile für den Namen und die Emailadresse breit sein soll.
In der sechsten Zeile steht "max-width: 600px;". Über diesen Wert geben wir an wie breit das Textfeld sein soll. Bei beiden Werten ist es wichtig darauf zu achten, dass die Felder nicht so groß sind, dass sie über unseren Postbereich in der Breite herausragen. Woher man weiß wie breit der Bereich ist habe ich bereits im aller ersten Teil der Reihe erklärt.
Zusätzlich können wir für das Textfeld noch die Höhe definieren. Dies passiert in der achten Zeile, indem wir den Wert "height: 200px;" anpassen. Wichtig ist, dass alle Zeichen erhalten bleiben. Lediglich die Zahlen vor dem "px" (die Abkürzung für Pixel" dürfen verändert werden.

Nachdem wir nun nicht nur das doppelte Formular sondern auch die falsche Größe geändert haben können wir auf den orangen "Vorlage veröffentlichen"-Button klicken und uns freuen, denn nun sollte unser Formular so aussehen...


Wenn es Fragen oder Probleme gibt, dann versuche ich gerne so gut ich kann zu helfen. Wenn ihr selbst noch eine Frage habt, dann dürft ihr so gerne stellen. Hier als Kommentar, über das Kontaktformular oder per Mail. Ganz wie ihr mögt.

16 liebe & nette Meinungen

  1. Vielen herzlichen Dank für deine tollen Anleitungen! Ich versuche gerade, mich mit diesem Thema auseinanderzusetzen. Vermutlich wäre es schlau, wenn ich bei #1 anfangen würde... :-)
    Lieben Gruss
    Verena

    AntwortenLöschen
    Antworten
    1. Hallo Verena,

      es kommt drauf an, was du genau alles machen möchtest. Da ich in erster Linie Fragen beantwortet habe ist es so, dass es keine feste Reihenfolge gibt. Einige Teile haben zu weiteren Fragen geführt (daher gibt es manchmal mehrere Teile). Oben in der Leiste gibt es auch einen Tab mit "HTML". Dort wollte ich mal umräumen und die einzelnen Posts nach Thema und nicht nach Nummer sortieren. Mal sehen, wann ich da Struktur bekomme, denn so recht habe ich noch keine Idee, wie ich es sortieren will.

      Liebe Grüße und viel Spaß
      Rebecca

      Löschen
  2. Danke Rebecca,
    wie immer hervorragend erklärt. Wie gut, daß ich genau dies hier jetzt brauchen kann. Am Wochenende hat mich jemand angesprochen, ob er über meine Seite so ein Kontaktformular ausfüllen könnte.
    Da werd ich mich gleich dransetzten, sobald mein PC wieder so aussieht wie ich es gewohnt bin ;)
    Liebe Grüße
    Gusta

    AntwortenLöschen
    Antworten
    1. Hallo Gusta,

      dann aber los. Auf vielen Blogs findet man so schwer eine Mailadresse und einen Kommentar kann ja jeder lesen, darum finde ich so ein Formular schon praktisch :) Berichte mal ob alles geklappt hat, ja?

      Liebe Grüße
      Rebecca

      Löschen
  3. Hallo Rebecca,

    du bist klasse!
    Soeben habe ich wieder mal gehört, dass meine Mail-Adresse nicht gefunden wurde (dabei habe ich ein Impressum, mit allem was dazugehört)
    Da dachte ich, mal schauen, ob es dazu was bei Rebecca gibt...und zack, da gibt es was! Toll, und es hat auch geklappt!!!
    Danke!

    Liebe Grüße
    Heike

    AntwortenLöschen
    Antworten
    1. Hallo Heike,

      es freut mich sehr, dass es geklappt hat. Ich hab ja auch meine Mailadresse hinterlegt und doch kommen nur ganz selten Emails. Die meisten nutzen dann doch das Formular. Ist vielleicht bequemer :D

      Liebe Grüße
      Rebecca

      Löschen
  4. Danke für die super ausführliche Erklärung, ich bekomme gerade wieder richtig Lust ein wenig am Layout rumzubasteln ;)

    Liebe Grüße, Jessica

    AntwortenLöschen
    Antworten
    1. Hallo Jessica,

      für mich ist das auch jedes mal ein Anstoß ob da nicht noch was geht :D Viel Spaß und noch mehr Anregungen gerne zu mir ;)

      Liebe Grüße
      Rebecca

      Löschen
  5. Liebe Rebecca.
    danke für diese neue tolle Anleitung. Ich hab´s gerade eingerichtet und es hat super geklappt. Du bist ein Schatz. Alles so detailliert geschrieben, dass auch ich als Laie problemlos damit zurecht komme.
    Vielen Dank!
    Susanne

    AntwortenLöschen
    Antworten
    1. Hallo Susanne,

      Anleitungen, die weniger Details oder gar nur Text haben, habe ich auch gefunden. Wer Erfahrung hat, dem reicht das sicherlich, aber ich denke, dass jeder es schaffen kann einen hübschen Blog einzurichten ohne ein Profi sein zu müssen. Klar, es macht Arbeit und man muss viel probieren, aber dass es durch so unnötig komplizierte oder zu knappe Anleitungen vermiest wird ist ja nun auch nicht nötig :D

      Liebe Grüße
      Rebecca

      Löschen
  6. Und wieder einmal schicke ich dir ein beherztes DANKESCHÖN rüber !!!!
    Ohne dich würd ich mich da nie rantrauen !!!!
    Du bist klasse !!

    LG
    katja

    AntwortenLöschen
    Antworten
    1. Hallo Katja,

      vielen lieben Dank. Es freut mich sehr, wenn bei dir alles gut geklappt hat.

      Liebe Grüße
      Rebecca

      Löschen
  7. Hallo,

    Ich habe bei Google nach dem Thema des Artikels gesucht und dabei auf deine seite gestoßen.
    Weiter habe ich mich noch nicht umgeschaut aber das werde ich gleich mal tun.

    Die Anleitung finde ich gut erklärt sonst gibt es ja Seiten da versteht man es überhaupt nicht.

    Ich versuche es gleich mal umzusetzen und mich dann nochmal melden
    lg von
    joni http://kochjonis.blogspot.de/

    AntwortenLöschen
    Antworten
    1. Hallo Joni,

      es freut mich sehr, dass ich dir helfen konnte. Von unverständlichen Anleitungen hatte ich wirklich genug und darum auch die Reihe.

      Liebe Grüße
      Rebecca

      Löschen
    2. Hallo Rebecca,

      heute habe ich mit Hilfe deiner Anleitung das ganze umgesetzt und es hat ohne Probleme geklappt.

      Danke

      hast du vor die reihe zu erweitern?
      Das würde mich sehr freuen denn ohne Anleitungen kann ich leider in Sachen Homo keine Veränderungen vornehmen weil ich mich nicht auskenne.

      Löschen
    3. Hallo Joni,

      Unter dem Reiter HTML oben findest du noch mehr Teile der Reihe. Ich meine es wären über 30. Wenn du spezielle Fragen hast, die nicht beantwortet wurden, dann stell sie gerne. Je nach dem ob es meine Zeit zulässt (dieser Blog ist ein Hobby und nicht mein Hauptaugenmerk ich bitte daher um Verständnis) helfe ich gerne so gut ich kann.

      Liebe Grüße
      Rebecca

      Löschen

Vielen lieben Dank, dass du dir die Zeit genommen hast mir einen Kommentar zu schreiben. Ich freue mich sehr.Solltest du eine Frage haben, so lass mir doch bitte eine Mailadresse da, damit ich dir auch antworten kann.

Related Posts Plugin for WordPress, Blogger...