Ein Kontaktformular ist heute praktisch ein obligatorischer Bestandteil fast jeder Website. Kaum eine Webpräsenz verzichtet auf diese unkomplizierte Möglichkeit, um mit den Seitenbesuchern in Kontakt zu treten. Egal ob es um den Erstkontakt oder die Möglichkeit, weitere Informationen zu den angebotenen Leistungen anzufordern, geht.

Beispiel Kontaktformular

Die Einrichtung eines Kontaktformulars im HTML-Code der Website ist aller Regel schnell gemacht. Der Sendevorgang mit Übermittlung der Formulareingaben und der zumeist gewünschten Zustellung per E-Mail-Nachricht, erfordern allerdings erweiterte technische Kompetenzen. Entweder man betreibt die Website mit einem CMS, welches die nötige Funktionalität bietet und man programmiert entweder selber ein Skript, beispielsweise in 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 zu einem fehlerfreien Betrieb zu bewegen oder die E-Mail-Nachrichten mit den Formulareingaben kommen nicht zuverlässig an oder werden als Spam aussortiert.

form.taxi bietet hierfür eine einfache und stabile Lösung. Mit Eintragung der von form.taxi bereitgestellten Sendeadresse in das HTML-Formular, 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, sind weiterhin alle Freiheiten gegeben.

Einrichtung eines Kontaktformulars

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

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 an Ihre Anforderungen anpassen und z.B. neue Eingabefelder hinzufügen.

<form action="https://form.taxi/s/FORM_CODE" 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 Sie weitere Informationen zum Erstellen von Formularen in HTML benötigen, finden Sie bei selfHTML genaueres.

Design

Das Erscheinungsbild wird mit CSS angepasst und kann damit an das Design der Website angeglichen werden. Eine Einführung zur Verwendung von CSS finden Sie bei MDN web docs.

Verbindung mit form.taxi

Damit die Formularsendung über form.taxi erfolgt, ist nur die Eintragung der individuellen Sendeadresse nötig. Sie erhalten diese Adresse, wenn Sie bei form.taxi das Formular anlegen (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 nicht bei form.taxi registriert sein, starten Sie auf der Startseite mit der Registrierung Ihres Formulars.

Haben Sie bereits Ihr eigenes Benutzerkonto, melden Sie sich am Panel an und legen Sie unter dem Menüpunkt Formulare Ihr Formular neu an.

Nach dem Einfügen der Sendeadresse in den HTML-Code ist Ihr Formular bereits einsatzbereit! Im Panel können jederzeit die Sendungseinstellungen bearbeitet und die eingelangten Sendungen eingesehen werden. Weiterführende Informationen zur Nutzung von form.taxi finden Sie in der Dokumentation.