Ein Kontaktformular ist heutzutage ein obligatorischer Bestandteil einer Webpräsenz. Kaum eine Website verzichtet auf diese einfache Möglichkeit, mit den Seitenbesuchern in Kontakt zu kommen. Egal ob der Besucher eine Nachricht hinterlassen möchte oder weitere Informationen zum Angebot der Homepage erhalten möchte. Natürlich könnte der Seitenbesucher auch eine E-Mail-Nachricht schreiben, aber ein Website-Formular ist schnell ausgefüllt, und stellt damit eine kleinere Hürde zur Kontaktaufnahme dar. Weiters ermöglicht es, dass die E-Mail-Adresse nicht öffentlich bekannt gemacht werden muss und damit der Missbrauch z.B. für Spam-Zustellung verringert werden kann.

Beispiel Kontaktformular

Die Erstellung eines Kontaktformulars und Einbau in den HTML-Code der Website ist aller Regel schnell gemacht. Aber die Umsetzung der technischen Schnittstelle zur Verarbeitung der Formulareingaben und der zumeist gewünschten Zustellung per E-Mail-Nachricht erfordern allerdings einige technische Kompetenzen. Entweder man betreibt die Website mit einem CMS (Content Management System), welches die nötige Funktionalität bereitstellt oder man programmiert selber ein Skript, beispielsweise mit der Skriptsprache PHP, oder man baut einen FormMailer ein. Bei all diesen Varianten gibt es unzählige Fallstricke und mögliche Probleme, die einen zuverlässigen Betrieb im Wege stehen können. Beispielsweise gibt es häufig Probleme, PHP-Skripte und FormMailer für einen fehlerfreien Betrieb einzurichten oder die E-Mail-Nachrichten mit den Formulareingaben kommen nicht zuverlässig an oder werden als Spam aussortiert.

form.taxi bietet hierfür eine unkomplizierte und stabile Lösung. Dabei übernimmt form.taxi die gesamte Sendungsabwicklung eines beliebigen HTML-Formulars. Dafür ist nur die Eintragung der von form.taxi bereitgestellten Sendeadresse in das HTML-Formular erforderlich. Damit erfolgt die Sendungsübertragung inkl. aller technischen Arbeiten, wie die Spam-Filterung, Speicherung der Formulareingaben inkl. eventueller Dateiuploads und Benachrichtigung per E-Mail, seitens form.taxi. Bei der Erstellung des Formulars in HTML, mit den gewünschten Eingabefeldern, und dem gewünschten Styling in CSS, bleiben dem Seitenbetreiber weiterhin alle Freiheiten erhalten.

Einrichtung eines Kontaktformulars

An einem Beispiel möchten wir darstellen wie ein Kontaktformular in wenigen Schritten eingerichtet und mit form.taxi funktionstüchtig gemacht wird.

HTML Markup

Der folgende HTML-Code steht für das oben dargestellte Formular. Sie können diesen Code für Ihr Projekt weiterverwenden und in Ihre Website einbinden. Den Code können Sie entsprechend Ihren Anforderungen anpassen und beispielsweise weitere Eingabefelder hinzufügen.

<form action="HIER-SENDEADRESSE-EINFÜGEN" method="post" accept-charset="utf-8">
  <fieldset>
    <p>
      <label for="input-name">Name</label>
      <input id="input-name" name="Name" required type="text" style="display:block;width: 100%;box-sizing:border-box;">
    </p>
    <p>
      <label for="input-email">E-Mail Adresse</label>
      <input id="input-email" name="Email" required type="email" style="display:block;width: 100%;box-sizing:border-box;">
    </p>
    <p>
      <label for="input-message">Nachricht</label> 
      <textarea id="input-message" name="Nachricht" required rows="5" style="display:block;width: 100%;box-sizing:border-box;"></textarea>
    </p>
    <p>
      <label>
        <input type="checkbox" name="Datenverarbeitung_bestätigt" value="Ja" required>
        Ich bin mit der Verarbeitung meiner Daten, zum Zwecke der Bearbeitung dieser Nachricht, einverstanden.
      </label>
    </p>
    <input type="text" name="_gotcha" value="" style="display:none;">
  </fieldset>
  <p style="text-align:right;">
    <input type="submit" value="Senden">
  </p>
</form>

Wenn HTML für Sie Neuland ist oder Sie weitere Informationen zum Erstellen von Formularen in HTML benötigen, finden Sie bei selfHTML umfassendes Wissen um tiefer in die Materie einzutauchen.

Design des Formulars

Das Erscheinungsbild des Formulars wird mit CSS angepasst und kann damit an das Design der Website angeglichen werden. Ihr Webdesigner wird mit Sicherheit darüber Bescheid wissen. Wenn Sie selber frisch mit dem Webdesign in CSS beginnen, finden Sie dazu eine Einführung bei MDN web docs.

Verbindung mit form.taxi herstellen

Damit das Formular mit dem Service form.taxi übertragen wird, muss nur eine individuellen Sendeadresse in den HTML-Code der Formularseite eingefügt werden. Sie erhalten diese Adresse, wenn Sie bei form.taxi das Formular registrieren (Benutzerkonto erforderlich). Die Eintragung der Sendeadresse erfolgt im HTML-Code in das action-Attribut des form-Tags (siehe 1. Zeile des Beispielcodes).

Sollten Sie noch kein Benutzerkonto bei form.taxi haben, starten Sie auf der Startseite mit der Registrierung Ihres Formulars. Damit wird für Sie ein persönliches und kostenloses Benutzerkonto eingerichtet und Sie erhalten die Sendeadresse für die Nutzung bei Ihrem Formular.

Haben Sie bereits Ihr eigenes Benutzerkonto, melden Sie sich am Panel an und legen Sie unter dem Menüpunkt Formulare Ihr Formular neu an. Die individuelle Sendeadresse wird im Panel bei den Formulareinstellungen angezeigt und kann in den HTML-Code Ihrer Formularseite übernommen werden.

Nach dem Einfügen der Sendeadresse in den HTML-Code ist Ihr Formular bereits einsatzbereit! Einstellungen zur Formularübertragung, können im Panel von form.taxi vorgenommen werden. Dort sind auch die eingelangten Sendungen mit allen Formulareingaben einsehbar und können bei Bedarf auch für die weitere Verwendung in verschiedenen Dateiformaten exportiert werden.

Weiterführende Informationen zur Nutzung von form.taxi finden Sie in der Dokumentation. Wenn Sie persönliche Unterstützung bei der Einrichtung Ihres Formulars oder bei der Nutzung von form.taxi benötigen, können Sie uns auch gerne per E-Mail unter der Adresse support@form.taxi kontaktieren.