Kontaktformular für die Website
So erstellen Sie ganz einfach ein Onlineformular
Kontaktformulare sind im Vergleich zum Telefonat eine zeitlich flexible Möglichkeit für (potenzielle) Kund:innen mit Firmen in Kontakt zu treten – und nicht zuletzt deshalb beliebt. Zugleich profitieren auch Unternehmen davon. Verständlich also, dass diese Art von Onlineformular längst zum guten Ton einer Website gehört.
In diesem Artikel erläutern wir die Vorteile eines Onlineformulars, welche Elemente beim Erstellen eines Kontaktformulars für die eigene Website sinnvoll sind und was hinsichtlich DSGVO und Spamschutz zu beachten ist. Zudem geben wir Mustervorlagen.
Gründe für ein Formular auf der Website Kontaktformular Schritt für Schritt erstellen
Aufbau eines Onlineformulars Datenschutz & Spamschutz Beispiele
5 Gründe: Warum Onlineformulare auf der Website wichtig sind
Ein Beispiel für die Diskrepanz zwischen Suchanfragen und Angebot aus der Telekommunikationsbranche: Aktuell gibt es 5.600 Suchanfragen pro Monat für »Vodafone Kontaktformular«, die ins Leere laufen. Immerhin, das sei angefügt, setzt der Anbieter auf Chatbots und lässt Anfragen nicht komplett versanden. Hier 5 Gründe, warum das Vorhalten eines Kontaktformulars sinnvoll ist:
- Jederzeit erreichbar: Formulare erlauben das Interagieren (potenzieller) Kund:innen mit Ihnen zu jeder Tageszeit. Mit der Website können sich User auch außerhalb der Öffnungszeiten über Sie informieren. Da ergibt es Sinn, Ihren Besucher:innen diese Kontaktmöglichkeit zu bieten.
- Direkte Kommunikation: Kontaktformulare ermöglichen die direkte Kommunikation von Kund:innen und Unternehmen. Name, E-Mail-Adresse und ein Textfeld: Schon kann das Anliegen hinterlegt werden. Besonders für Websites ohne klickbare E-Mail-Adresse (service(at)toujou.de) ist das Kontaktformular eine schnelle und userfreundliche Alternative.
- Unmittelbar zum Ansprechpartner: Firmen mit mehreren Abteilungen ermöglicht ein Kontaktformular die Anfrage direkt an die Person weiter zu leiten, die als Ansprechpartner:in gilt. Das spart einen Arbeitsschritt, wie das Entgegennehmen eines Telefonanrufs samt anschließender Benachrichtigung.
- Schnelle und qualitative Antworten: Zudem können Unternehmen fachlich qualitative Antworten geben, indem sie nicht aus dem Stegreif sondern gut vorbereitet das gewünschte Thema bearbeiten. Die anfragende Person erhält kompetente Rückmeldung, ob nun per telefonisch oder in Schriftform – und fühlt sich so bestens informiert. Das schafft Vertrauen.
- Image erhöhen/verbessern: Neben Vertrauen – und natürlich einem überzeugenden Produkt – sollten Kund:innen auch das vorfinden, was Sie erwarten. So binden Sie diese an sich. Durch ein Kontaktformular ermöglichen Sie unabhängiges Kommunizieren der Kund:innen und zwingen diese nicht zur eindimensionalen Kommunikation. Ihr Klientel wird es Ihnen danken und Ihr Unternehmen besser dastehen.
Wo wird ein Kontaktformular auf einer Website eingesetzt?
Viele Websites bieten im Footer, also ganz am Ende einer Seite, einen Link zur Kontaktseite. Auf dieser ist das entsprechende Onlineformular hinterlegt.
Doch das Kontaktformular darf auf mehreren Seiten und Bereichen eingesetzt werden! So können Sie dieses auch in der Sidebar oder sogar im Contentbereich platzieren, wenn es inhaltlich passt. Für die Newsletter-Anmeldung ist dies nicht unüblich. Ein anderes Beispiel aus der Praxis: In unserem Blogbeitrag zu Terminbuchung über Click & Meet haben wir ein Formular nach dem passenden Textabschnitt eingefügt.
Wie erstelle ich ein kostenloses Kontaktformular für die Website?
Um ein Kontaktformular für die Website zu erstellen, haben Sie die drei folgenden Möglichkeiten:
Formular selbst erstellen
Um ein Webformular komplett selbst zu erstellen, benötigen Sie zwangsläufig Programmierkenntnisse. Sie werden zudem einige Zeit investieren müssen, können sich aber exakt das Formular designen, das Ihnen vorschwebt. Für viele (Einzel-)Unternehmen steht es in keinem Verhältnis, sich intensiv in diese Materie einzulesen. Daher …
Kostenlose Onlineformular-Vorlagen nutzen
... ist es einfacher, wenn Sie unter den verschiedenen Formular-Baukästen die passende Vorlage für ein übersichtliches Onlineformular wählen. HubSpot, AidaForm und JotForm sind drei der bekanntesten Anbieter für kostenlose Template-Formulare.
123FormBuilder wäre ein weiterer Anbieter, bei dem eigene CSS-Anpassungen möglich und auf der Homepage integrierbar sind. Damit lässt sich ein Teil der Arbeit sparen und das Webformular gleichzeitig individuell anpassen.
Bei allen Anbietern sollten Sie allerdings immer prüfen, ob diese für Ihre Website kompatibel und wie sie integrierbar sind. Auch ist die Bandbreite an Funktionen in kostenlosen Tarifen häufig eingeschränkt. Zudem sollten Sie sich bei externen Anbietern immer vergewissern, dass der Server in der EU verortet ist, damit die Daten aus dem Formular DSGVO-konform gespeichert werden.
Auf bestehende Formulare setzen
Wer sich nicht mit einer der beiden oben genannten Optionen befassen möchte, kann auch auf unseren TYPO3-Baukasten toujou für seine Website zurückgreifen. Dort können Formulare ohne Programmierkenntnisse durch wenige Klicks individuell erstellt und überall platziert werden.
Kontaktformular für die Website einfach erstellen
In toujou können Sie per Drag'n'Drop Elemente auswählen und zusammenfügen, die E-Mail-Adresse hinterlegen. Fertig. Die einzelnen Punkte Schritt für Schritt:
Formular anlegen
- Im Backend klicken Sie in der Modulleiste links auf Formulare. Anschließend öffnet sich ein Fenster mit zwei Optionen. Sie können ein bestehendes Formular kopieren oder ein neues erstellen.
- Fügen Sie dem Formular einen Namen hinzu, beispielsweise Kontaktformular, Newsletter-Anmeldung etc. Dieser Name dient zu Ihrer Orientierung im Backend und wird auf der jeweiligen Seite nicht angezeigt.
Element-Bausteine wählen
- Zum Anlegen des Formulars stehen Ihnen verschiedene Element-Bausteine zur Verfügung. Sie können zwischen grundlegenden, speziellen und fortgeschrittenen Elementen sowie Containerelementen auswählen. Dabei bietet die Auswahl Textfelder für Namen und Nachrichten, Dropdown-Menüs, eine Einfach- oder Mehrfachauswahl, Checkboxen, aber auch vorgefertigte Felder für die Telefonnummer, E-Mail-Adresse, ein Datum.
- Um zwei Inhalte nebeneinander anzuzeigen, nutzen Sie das Element Grid Zeile im Bereich Containerelemente.
- Auch für einen Dateiupload gibt es einen Baustein. So lassen sich nicht nur Kontaktformulare, sondern auch Newsletter-Anmeldungen, Bewerbungsformulare uvm. mit toujou umsetzen. Mehr zu gesetzeskonformen Datensicherung finden Sie im Abschnitt zur DSGVO.
E-Mail-Empfänger hinterlegen
- Anschließend bestimmen Sie noch einen E-Mail-Empfänger, der die Kontaktanfrage erhalten soll. Legen Sie hierfür einen sogenannten Finisher an. In diesem Fall den Finisher »E-Mail an Empfänger«.
- Tragen Sie im Feld »E-Mail-Adresse« die E-Mail-Adresse ein, an die die Benachrichtigung gehen soll. Im Feld »Adresse des Absenders« sollte eine E-Mail-Adresse mit noreply@domain.de stehen. Speichern Sie die Einstellungen.
- Zusätzlich haben Sie beim Finisher die Möglichkeit, auch eine E-Mail an den Kontaktabsender (User) zu verschicken oder auf eine andere Seite umzuleiten. Diese Optionen sind Schritt für Schritt in unserem Video-Tutorial erläutert.
- Zudem lassen sich Formulare im Nachhinein jederzeit bearbeiten. Klicken Sie hierfür einfach auf das entsprechende Objekt in der Modulleiste wie unter Formular anlegen beschrieben.
Formular auf Webseite einbinden
- Um das Formular auf der toujou-Website anzuzeigen, benötigen Sie das Element Mailform. Dieses fügen Sie an die Stelle der Seite ein, an der Sie das Onlineformular gerne haben möchten.
- Dafür klicken Sie auf + Inhalt an der gewünschten Stelle einer Seite. Anschließend tippen Sie den Begriff im Suchfeld ein und klicken das Element an. Alternativ finden Sie das Element unter dem Reiter Widgets.
- Wählen Sie anschließend im Dropdown-Menü unter Plugin das entsprechende Formular aus und speichern Sie die Einstellungen.
Formular testen
- Der letzte Schritt: Vergewissern Sie sich, dass das Formular funktioniert.
- Füllen Sie das Webformular aus und klicken Sie auf den Senden-Button. Eine E-Mail kommt bei Ihnen an. Prima.
- Wenn nicht, könnte Ihnen ein Tippfehler im Empfänger-Feld des Finishers (E-Mail-Adresse) unterlaufen sein. Falls das nicht der Fall ist, melden Sie sich für Ihre toujou-Website gerne bei unserem Service-Team.
Was ist bei Onlineformularen zu beachten?
Verschiedene Punkte sollten Sie allgemein bei Formularen für Ihre Website beachten, nicht nur bei Kontaktformularen.
Aufbau
Intuitiver Aufbau: Vermeiden Sie Experimente. Was zählt: schnell und unkompliziert eine Anfrage abschicken zu können. Bauen Sie das Formular so auf, wie User es erwarten. Der Blick zur Konkurrenz kann hier helfen. Generell: Name und E-Mail-Adresse stehen meist an erster Stelle. Etabliert hat sich zudem, dass Textfelder für eine Nachricht am Ende stehen.
Einfach halten: Nutzen Sie Dropdown-Menüs und Kalenderansichten, wann immer möglich. Das erleichtert das Ausfüllen des Formulars und vermeidet Tippfehler – beispielsweise bei Buchungsanfragen, die später noch zu klären sind.
Klare Struktur: Geben Sie eine klare Struktur durch Platzhalter bei Daten vor (tt.mm.jjjj). Auch bei Vor- und Nachnamen gibt es die verschiedensten Varianten. Um die Namen später nicht zu verwechseln, bieten sich je einzelne Felder an. Alternativ sollten Sie im Textfeld die gewünschte Reihenfolge definieren, z.B. Nachname, Vorname.
Länge eines Formulars: So lang wie nötig, aber so kurz wie möglich. Jedes Feld, das Website-Besucher:innen ausfüllen müssen, ist potenziell ein Feld, bei dem Sie den Vorgang abbrechen. Beschränken Sie sich demnach auf die notwendigen Informationen. Das kommt Ihnen im Übrigen auch in Sachen Datenschutzverordnung (DSGVO) zu Gute. Bei einem Kontaktformular reichen aus unserer Sicht Name, E-Mail-Adresse und ein Textfeld.
Pflichtfelder: Hier gilt ähnliches wie bei der Länge. Markieren Sie Felder nur als Pflichtfelder, die wirklich notwendig sind. So verkürzen Sie die Bearbeitungszeit für User. Bei einer Newsletter-Anmeldung würden wir daher den Namen und die E-Mail-Adresse als Pflichtfeld sehen. Geburtsdaten und Wohnadressen haben hingegen keinen Mehrwert. Für den Spamschutz hingegen ist es sinnvoll, dass jedes Formular mindestens ein Pflichtfeld enthält.
Redaktionelles
Titel eines Formulars: Geben Sie dem Formular einen charmanten Titel. »Schreiben Sie uns« oder »Nehmen Sie Kontakt mit uns auf« als Überschrift klingt doch deutlich einladender als Kontaktformular.
Betreffzeile: Falls in einem Onlineformular sinnvoll oder gar notwendig, lassen Sie Kund:innen Ihr Anliegen in einer Betreffzeile formulieren. So können Sie das Anliegen schneller priorisieren. Noch besser: Filtern Sie Anfragen bereits durch einzelne Formulare mit individuellen Ansprechpartner:innen. In toujou können Sie ein Formular mit dem gleichen Aufbau und Ansprechpartner:in für verschiedene Zwecke nutzen, indem Sie die jeweilige Überschrift im Element Mailform ändern. Umgekehrt können Sie ein Formular mit gleichem Aufbau auch für verschiedene Ansprechpartner:innen verwenden.
Handlungsaufforderung: Am Ende jedes Formulars sollte eine Handlungsaufforderung stehen, auch Call to action genannt. Der Button »Jetzt absenden« oder »Jetzt Newsletter bestellen« ist so ein Call to action.
Kunden nicht alleine lassen: Mit dem Absenden des (Kontakt-)Formulars sollte die Kommunikation nicht enden. Leiten Sie auf eine andere Info- oder Danke-Seite weiter. Verschicken Sie alternativ eine (automatisierte) Antwortmail, dass die Anfrage angekommen ist.
Mobil responsiv: Last but not least. Testen Sie, ob das Formular auf Tablet, Laptop und Smartphone mit allen Feldern angezeigt wird. Nichts ist ärgerlicher als ein abgeschnittenes Dropdown-Menü oder anderes Feld, bei dem nicht der gesamte Text sichtbar ist.
Was ist bei Kontaktformularen bzgl. DSGVO zu beachten?
Aus Datenschutz-Sicht ist es sinnvoll, nur die Informationen zu sammeln, die Sie wirklich benötigen. Denn laut Art. 5 Datenschutzgrundverordnung (DSGVO) dürfen Daten nur für den jeweiligen Zweck verwendet werden. Werbezwecke gehören nicht dazu.
Ein entsprechender Passus auf der Datenschutzseite zur Verwendung personenbezogener Daten gibt zusätzliche Rechtssicherheit. Zudem sollte der datenspeichernde Server in der EU gehostet sein.
Manche Website-Betreiber:innen setzen auf eine Checkbox im Formular, um auf die Datenschutzverordnung zu verweisen. In unserem Tutorial haben wir erläutert, wie Sie trotz fehlender Einwilligung datenschutzkonforme Uploads von persönlichen Dateien wie Bildern oder Dokumenten gewährleisten.
Onlineformulare und Spamschutz
Um sich vor Spam zu schützen, vertrauen viele Website-Betreiber:innen für Onlineformulare auf sogenannte Captchas. Diese stellen sicher, dass eine echte Person und kein Bot den Antrag ausgefüllt hat. Dafür müssen User eine Aufgabe lösen. Zum Beispiel müssen sie eine Zahlen-Buchstaben-Kombination eingeben oder einen bestimmten Begriff auf Bildern anklicken. Diese Form der Captchas kennen Sie bestimmt von Google (reCaptcha).
Diese Captchas helfen zwar, sind aber für User lästig. Die verzerrten Buchstaben sind schwer lesbar, die Bilder können gar Sehbehinderte ausschließen. Es fällt ein Schritt mehr beim Ausfüllen an. Von Google verwendete reCaptchas sammeln zudem Informationen, was nicht unbedingt mit der DSGVO harmoniert.
Besser sind daher Captchas oder Honeypot-Felder, die User beim Bearbeiten des Formulars gar nicht erst ausfüllen müssen – und somit auch nicht stören. So lassen sich mithilfe der Programmiersprache PHP Onlineformulare mit ausreichend Spamschutz auf diese Weise auf einer Website integrieren.
Wie? Ohne zu technisch zu werden: Stellen Sie sich vor, Sie führen den Bot hinters Licht, indem Sie ein zusätzliches Eingabefeld angeben, das als Filter fungiert. Denn Bots sind in der Regel so programmiert, dass sie erkennen, für welche Felder welche Eingaben erwartet werden. Wird das zusätzliche Feld vom Bot ausgefüllt, weil dieser es automatisch als auszufüllen erkennt, werden diese Daten an den Server geschickt und mittels PHP ausgewertet. Die Nachricht landet dann im Spam. Sinnvoll zudem ist, dass Sie im Formular auch ein Pflichtfeld gesetzt haben.
Übrigens: toujou bietet diesen Schutz mittels Honeypots standardmäßig bei allen Formularen auf einer Website an.
Musterbeipiele für Onlineformulare
Kontaktformular Newsletteranmeldung Buchungsanfrage Produktformular Event-Anmeldung
Vorlage für ein Kontaktformular
Name, E-Mail-Adresse und ein Textfeld. Mehr bedarf es für das Kontaktformular nicht. Schon können User auf Sie zukommen. Kann zum Beispiel so aussehen:
Vorlage für eine Newsletteranmeldung
Um Newsletter zu bestellen braucht es nur die E-Mail-Adresse. Vor dem Formular bietet es sich an, die Vorteile des eigenen Newsletters anzupreisen, beispielsweise exklusive News oder Rabatte.
Vorlage für eine Buchungsanfrage
Mit Kalenderansicht und deshalb besonders für Reiseveranstalter interessant, aber nicht nur. Für alle Formulare anwendbar, für die Daten notwendig werden.
Livegang einer Website mit Kalenderansicht anmelden
Vorlage für ein Produktformular
Sie wollen Ihr Produkt verkaufen. Wir bieten mit toujou einen Website-Baukasten an. Demnach wollen wir an dieser Stelle eine Anfrage für eine kostenfreie Live-Demo ermöglichen. Bereit für das direkte Ausprobieren? Einfach Formular ausfüllen.
Anfrage für eine Live-Demo
Vorlage für eine Event-Anmeldung
Wir nehmen wieder ein Beispiel von uns. Dieses Mal die Anmeldung zur kostenfreien toujou-Schulung für Beginner und alle toujou-Interessierten. Den nächsten Termin dazu finden Sie unter Events.
Zur toujou-Schulung anmelden
Unsere neuesten Blogbeiträge
Lesen Sie mehr zu toujou und TYPO3, warum SEO gar nicht so schwer ist, goldene Regeln für die Kommunikation und immer wieder Tipps & Tricks für Ihre Website.