Kontaktformular erstellen

 

One.com Forum und Tutorial

Lösungen sind meist ganz einfach - wenn man sie kennt

 

Kontaktformular mit HTML und Javascript erstellen

 

 

Zwischenzeitlich hat one-com das Kontaktformular als Widget in den Komponenten verfügbar gemacht. Dort kann man es sehr leicht einbauen und konfigurieren. So bleibt diese Erklärung nur noch als Anschauung und Information für alle die, welche wissen wollen, wie es intern funktioniert und die vielleicht eine besondere individuelle Lösung benötigen.

 

Ein Kontaktformular bietet dem Benutzer die Möglichkeit, eine Nachricht an den Webmaster zu senden. In der Regel werden dabei drei Dinge abgefragt: Der Name des Nutzers, dessen Mailadresse zum Zweck einer Antwort und ein Eingabefeld für die Nachricht.

 

Weitere Eingabefelder sind möglich und können entsprechend ergänzt werden – dazu einfach die passenden Codeabschnitte duplizieren und anpassen.

 

Ein Kontaktformular zu erstellen und einzubinden ist ganz einfach. Vorher muss man sich natürlich kurz Gedanken machen wie und wo dieses integriert werden soll. Mir fallen hierbei zwei grundlegende Varianten ein.

 

Das Kontaktformular befindet sich entweder alleine auf einer separaten Seite, die nur das Formular enthält oder es wird in eine Seite integriert, das z.Bsp. noch eine Wegbeschreibung, Google-Maps etc. enthält.

In beiden Fällen macht es Sinn, dem Nutzer ein Feedback zu geben, das die Nachricht versendet wurde. Das kann durch Anzeigen einer Nachricht in einem Popupfenster sein oder durch das Wechseln auf eine Mitteilungsseite realisiert werden.

 

Den Code findet man in der One.com-Hilfe unter dem Begriff Formmail (wo man vermutlich als Laie nicht sucht)

 

  1. Ersetzen Sie example.com mit Ihrer eigenen Domain.

 

  1. Ersetzen Sie email@example.com mit Ihrer eigenen E-Mail-Adresse.

 

  1. Erstellen Sie eine Webseite, auf die Besucher weitergeleitet werden, nachdem die E-Mail verschickt wurde und ersetzen Sie diesen Pfad mit dem der neuen Seite: http://www.example.com/danke.html

 

  1. Schließlich erstellen Sie noch eine Seite, auf die Besucher weitergeleitet werden, falls ein Fehler auftritt, und ersetzen Sie diesen Pfad mit dem Ihrer neuen Seite: http://www.example.com/error.html

 

  1. Fügen Sie den Code auf Ihrer Webseite ein.

<form method="post" action="http://www.example.com/cgi-bin/FormMail.pl" accept-charset="ISO-8859-1" onsubmit="var originalCharset = document.charset; document.charset = 'ISO-8859-1'; window.onbeforeunload = function () {document.charset=originalCharset;};">

Name <br /> <input name="realname" /> <br />

E-Mail <br /> <input name="email" /> <br />

Nachricht <br />

<textarea cols="40" rows="10" name="Message"></textarea> <br />

<input type="submit" value="Senden" />

<input type="hidden" name="recipient" value="email@example.com" />

<input type="hidden" name="subject" value="Subject" />

<input type="hidden" name="redirect" value="http://www.example.com/danke.html" />

<input type="hidden" name="missing_fields_redirect" value="http://www.example.com/error.html" />

<input type="hidden" name="required" value="realname,email,Message" />

</form>

Leerzeilen erzeugt man durch Eintrag von „<br>“ an der gewünschten Stelle. &nbsp

Leerzeichen außerhalb eines Fließtextes erzeugt man durch Eintrag von &nbsp“ an der gewünschten Stelle. Damit sind führende bzw. abschließende Leerzeichen gemeint. Im folgenden Beispiel würde sonst der Link ohne Leerzeichen direkt an die Worte grenzen.

 

Da der Text innerhalb der Codekomponente nicht den CSS-Definitionen der anderen Textkomponenten unterliegt, muß man unter Umständen etwas nachhelfen.

 

Dazu verwendet man einfach die style-Anweisung innerhalb eines <div>-Tags.

Für den Laien ganz einfach: Der gesamte Code wird in einen <div>-Tag eingeschlossen. Dem <div>-Tag kann man dabei bestimmte Eigenschaften wie Schriftart, -göße usw. zuweisen. Diese Eigenschaften gelten für alle Elemente der Webseite die darin eingeschlossen sind. Am Ende des Codes wird folgendes TAG-Ende notiert: </div>. Das ist die Endemarkierung.

 

Am Anfang des Codes notieren wir allgemein dargestellt folgendes:

 

<div style="Eigenschaft1; Eigenschaft2; Eigenschaft3; usw.”>

 

In der Regel reichen Schriftart und Schriftgröße aus, aber auch Schriftfarbe, Hintergrundfarbe, Fett, Kursiv usw. kann zugewiesen werden.

 

Hier die wichtigsten Eigenschaften, die dann bei Bedarf oben im <p>-Tag eingesetzt werden:

Schriftart

font-family:Arial

Schriftgröße

font-size:12px

Hintergrundfarbe

background-color:#808040;

Schriftfarbe

color:#D8FD02;

Zeichenabstand

letter-spacing:3px;

Kursiv

font-style:italic

Fett

font-weight:bold

Unterstrichen

text-decoration:underline

Eine Liste aller möglichen Eigenschaften findest du hier:

 

http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_style

 

 

Am besten passt man die Werte den Angaben an, die den normalen Textelementen zugewiesen sind.

 

Und so sieht das Kontakformular dann aus:

 

Name

E-Mail

Nachricht

 

 

 

 

 

 

 

 

 

 

Bei Bedarf kann man natürlich die Texte anpassen und das Layout mit Hilfe der Style-anweisung ändern.