Der perfekte Kontakt-Button: Kleine Änderungen, mehr Anfragen

Der Kontakt-Button ist das wichtigste Element deiner Website. Alles andere, also Fotos, Texte und Bewertungen, bereitet nur den Moment vor, in dem jemand sagt: „Gut, ich frag jetzt an.“ Trotzdem ist er auf vielen Seiten heimischer Betriebe klein, versteckt oder führt zu einem Formular mit zwölf Pflichtfeldern.

In diesem Artikel gehe ich mit dir durch, wo der Button hingehört, wie er beschriftet sein sollte und wie das Formular dahinter aussieht, damit Menschen es wirklich ausfüllen. Ich stütze mich dabei auf Studien der Nielsen Norman Group und des Baymard Institute, die seit Jahren testen, wie Menschen Formulare benutzen, und auf die Barrierefreiheits-Richtlinien des W3C.

Er gehört nach oben – und öfter

Ein einziger Kontakt-Link ganz unten reicht nicht. Besucher sollen dich in dem Moment erreichen können, in dem sie überzeugt sind, egal wo auf der Seite sie gerade sind. Das kann nach dem ersten Absatz sein oder erst nach den Referenzfotos.

Am Handy kommt die Größe dazu. Die Barrierefreiheits-Richtlinien WCAG 2.2 verlangen für klickbare Elemente eine Mindestgröße von 24 mal 24 CSS-Pixeln oder genug Abstand zu anderen Elementen. Das ist eine Untergrenze. Für deinen wichtigsten Button darf es ruhig deutlich mehr sein, damit man ihn mit dem Daumen sicher trifft.

So geht’s: Platzier den Button oben rechts im Kopfbereich, wiederhole ihn nach jedem größeren Abschnitt und zeig ihn am Handy als Leiste am unteren Rand mit zwei Möglichkeiten: „Anrufen“ und „Anfrage senden“.

Sag, was passiert

„Kontakt“ oder „Absenden“ sagt wenig darüber, was nach dem Klick passiert. Ein Button, der das Ergebnis beschreibt, nimmt Unsicherheit. Wichtig ist, dass die Beschriftung zu dem passt, was folgt: Wer „Rückruf vereinbaren“ klickt, erwartet ein kurzes Formular für Name und Telefonnummer und keinen Online-Shop.

Überleg, was deine Kundschaft eigentlich will. Bei einem Installateur ist das oft ein Termin, bei einer Tischlerei ein Angebot für eine Küche, bei einem Friseursalon ein freier Platz am Samstag.

• „Termin anfragen“ für Handwerk und Dienstleistungen mit Vor-Ort-Besuch
• „Angebot anfordern“ für Aufträge, die du erst kalkulieren musst
• „Rückruf vereinbaren“ für alle, die lieber reden als schreiben
• „Jetzt anrufen“ als Link direkt auf deine Telefonnummer

Weniger Felder, mehr Anfragen

Die Nielsen Norman Group formuliert es deutlich: Jedes Feld, das du aus einem Formular streichst, erhöht die Abschlussrate. Optional sollten höchstens ein oder zwei Felder sein, und die sollten klar als optional gekennzeichnet sein.

Zur Einordnung: Das Baymard Institute hat errechnet, dass die meisten Online-Shops für den kompletten Bestellvorgang mit Lieferadresse und Zahlung nur 8 Felder bräuchten. Ein Kontaktformular für eine Anfrage kommt mit deutlich weniger aus. Die Details klärst du sowieso im Gespräch.

So geht’s: Name, Telefon oder E-Mail und ein Feld „Worum geht es?“ – fertig. Wenn du unbedingt mehr wissen willst, etwa die Postleitzahl für die Anfahrt, mach das Feld optional und schreib „(optional)“ dazu.

Pflicht und optional klar kennzeichnen

Das Baymard Institute empfiehlt, Pflichtfelder und optionale Felder beide ausdrücklich zu markieren, damit niemand raten muss. In ihren Tests stießen 32 Prozent der Teilnehmenden auf eine Fehlermeldung, weil nur die optionalen Felder markiert waren und sie ein Pflichtfeld übersehen hatten.

Auch die Beschriftung selbst ist wichtig. Die Nielsen Norman Group rät davon ab, Feldnamen nur als grauen Platzhaltertext ins Feld zu schreiben. Der verschwindet beim Tippen, ist oft schlecht lesbar und wird nicht von allen Screenreadern vorgelesen. Besser sind klare Beschriftungen über dem Feld, die stehen bleiben.

So geht’s: Schreib über jedes Feld eine sichtbare Beschriftung wie „Telefonnummer“ und markiere es mit „Pflicht“ oder „(optional)“. Platzhaltertext darfst du für Beispiele verwenden, etwa „z. B. 0664 1234567“, aber nicht als einzige Beschriftung.

Anrufen mit einem Tipp

Viele Menschen rufen lieber an, als ein Formular auszufüllen. Google empfiehlt auf web.dev, jede Telefonnummer auf der Website als tel:-Link zu hinterlegen, im internationalen Format mit Plus und Ländervorwahl. So wählt das Handy die Nummer mit einem Tipp, auch wenn jemand gerade im Ausland ist.

Für eine Nummer in Gänserndorf sieht die Verlinkung dann so aus: tel:+43-2282-12345. Angezeigt wird sie ganz normal als 02282 12345. Eine Handynummer funktioniert genauso, also zum Beispiel tel:+43-664-1234567.

Nach dem Klick: Sicherheit geben

Viele sind unsicher, ob ihre Anfrage angekommen ist. Eine klare Bestätigung nimmt diese Sorge und gibt dir gleich die Chance, Erwartungen zu setzen. Wenn doch etwas fehlt, sollten Fehlermeldungen laut Nielsen Norman Group gut sichtbar sein, nicht nur über Farbe funktionieren und das Eingegebene erhalten, damit niemand alles neu tippen muss.

So geht’s: Zeig nach dem Absenden: „Danke, deine Anfrage ist angekommen. Ich melde mich innerhalb von 24 Stunden, meistens schon am selben Tag.“ Und halte dich dann auch daran.

Häufige Fragen

Kenny Trappl

Waldviertler, lebt in Gänserndorf und baut mit Klickfest Websites für heimische Betriebe. Auf Servus Kundschaft schreibt er über alles, was Kundschaft bringt. Mehr über mich