BTP EA Rénovation
Sechs Felder, kein einziges mehr: Das Formular ist das Produkt.
- Jahr
- 2026
- Umsetzung
- 3 Wochen
- Stack
- Next.js · React · TypeScript · Tailwind · Vercel
- Design
- Entwicklung
- Lokales SEO
- Conversion-Funnel
- Texte
- Qualifizierungsfelder
- 6
- Rückrufzusage
- 48 h
- Standortseiten
- 9+
- CAPTCHAs
- 0
Was gelöst werden musste.
Der Kontext
Lyoner Handwerksbetrieb für den Innenausbau – Malerarbeiten, Trockenbau, Boden- und Wandbeläge, Badsanierung – tätig in Lyon und der Metropolregion.
Die Einschränkung
Ein Handwerker verliert Kunden nicht aus Mangel an Sichtbarkeit, sondern aus Mangel an Qualifizierung. Ergebnislose Anrufe kosten Stunden: Baustelle außerhalb des Einsatzgebiets, unpassendes Budget, eine Leistung, die er gar nicht anbietet. Die Website sollte vor dem Anruf filtern, ohne die guten Anfragen abzuschrecken.
Die Antwort
Das Angebotsformular steht auf dem ersten Bildschirm, nicht in der Fußzeile, und es ist kurz: sechs Felder, die das Vorhaben qualifizieren – Art der Arbeiten, Fläche, Raum, Gemeinde, Zeitrahmen, Kontakt. Diese Qualifizierung macht den Rückruf effizient; ohne sie beginnt das Gespräch mit fünf Minuten Fragen.
Jede gestalterische Entscheidung – und ihr Grund.
Das Angebot auf dem ersten Bildschirm
Das Formular steht nicht am Seitenende, sondern direkt neben dem Leistungsversprechen. Wer einen Handwerker sucht, weiß bereits, was er will; ihn drei Bildschirme scrollen zu lassen, bevor er handeln kann, ist ein glatter Verlust.
Sechs Felder, jedes einzeln abgewogen
Jedes gestrichene Feld erhöht die Abschlussrate, jedes zusätzliche verbessert die Qualifizierung. Sechs ist der gewählte Kompromiss: Darüber hinaus übersteigen die Abbrüche den Informationsgewinn.
Vorher/Nachher statt Baustellenfotos
Handwerker zeigen gern ihre laufenden Baustellen. Der Kunde dagegen will das Ergebnis sehen. Die Galerie ist in Vorher-Nachher-Paaren aufgebaut, mit der genauen Art der Arbeiten.
Die Rückrufzusage sichtbar
„Rückruf innerhalb von 48 Stunden“ ist eine bezifferte Zusage direkt über dem Formular. Ein vages Versprechen („Wir melden uns schnell“) beruhigt niemanden.
Farbpalette des Projekts
Baustellenblau
#1D4E77
Struktur, Vertrauen
Sicherheitsorange
#D9601A
Handlung, Angebot
Betongrau
#F2F3F5
Hintergrund
Tinte
#1C2126
Text
Typografisches System
Überschriften
Outfit 700
Fließtext
Inter 400
Solide und schnörkellos. Flächen- und Terminangaben stehen in Tabellenziffern, damit sie in der Angebotszusammenfassung bündig bleiben.
Was unter der Haube steckt.
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
Validierung im Client und auf dem Server
Das Formular validiert live, um die Eingabe zu erleichtern, und prüft vor dem Speichern erneut auf dem Server. Eine reine Client-Validierung ist in zehn Sekunden umgangen und lässt alles Mögliche durch.
Spamschutz ohne CAPTCHA
Honeypot-Feld, Zeitstempel beim Absenden und Rate-Limiting. Ein CAPTCHA hätte ausgerechnet beim einzigen Element Reibung erzeugt, das die Website schützen muss – und es ist eine anerkannte Barriere für die Barrierefreiheit.
Sofortige Benachrichtigung
Jede Anfrage geht per E-Mail raus, mit allen Qualifizierungsangaben im Betreff. Der Handwerker liest sein Telefon zwischen zwei Baustellen: Die nützliche Information muss in die Vorschau passen.
Wie die Website gefunden wird.
Eine Seite pro Arrondissement
Die neun Arrondissements von Lyon plus die Gemeinden der Metropolregion. Jede Seite hat eigene Inhalte – Viertel, Bebauungstypen, Beispielprojekte – und nicht nur einen ausgetauschten Ortsnamen.
Suchanfragen nach Gewerk, nicht nach Branche
„Maler Lyon 3“, „Badsanierung Villeurbanne“: Kunden suchen ein Gewerk und eine Gemeinde, niemals „Bauunternehmen“.
HomeAndConstructionBusiness-Markup
Eigener Typ, angegebenes Einsatzgebiet, Leistungen als Service aufgeführt. Davon hängt die Anzeige im Local Pack ab.
Für alle nutzbar.
Seit Juni 2025 schreibt der European Accessibility Act (EU-Richtlinie 2019/882) für einen großen Teil der Online-Dienste digitale Barrierefreiheit vor. Wir berücksichtigen sie schon bei der Konzeption, nicht erst im Nachhinein.
Ein wirklich barrierefreies Formular
Zugeordnete Beschriftungen, angekündigte und mit dem Feld verknüpfte Fehlermeldungen, geprüfte Tab-Reihenfolge. Das Formular ist die am häufigsten nicht barrierefreie Komponente einer Website – und hier die einzige, auf die es ankommt.
Was ausgeliefert wurde.
- Startseite – Schnellangebot
- Leistungen (Malerarbeiten, Trockenbau, Böden, Bäder)
- Referenzen vorher/nachher
- Einsatzgebiete – 9 Arrondissements + Metropolregion
- Kontakt
Der Projektablauf.
Qualifizierung
Festlegung der sechs Felder gemeinsam mit dem Handwerker, ausgehend von seinen verlorenen Anrufen.
Design
Angebot auf dem ersten Bildschirm, Vorher-Nachher-Galerie, bezifferte Zusage.
Entwicklung
Doppelte Validierung, Spamschutz ohne CAPTCHA, Benachrichtigung.
Lokales SEO
Seiten pro Arrondissement, gewerkspezifisches Markup.
Was man uns oft fragt.
Weitere Referenzen
DSGVO-Compliance & SaaSKonsent by Kayzen
Ein Banner-Anbieter, der Banner prüft, ist Richter in eigener Sache: Unabhängigkeit war das Produkt.
Offensive Cybersicherheit & SaaSSentinel by Kayzen
Ein Sicherheitsprodukt an Ingenieure verkaufen: Jede Aussage musste nachweisbar sein.
Daten & WetterdienstMétéo Climat France
358 indexierbare Seiten, eine animierte Karte über 72 Zeitpunkte – und keine einzige Zeile Framework.
Derselbe Anspruch, für Ihre Website.
Kostenloses Audit Ihrer aktuellen Website, Angebot innerhalb von 24 Stunden und eine schriftliche Begründung – wie die, die Sie gerade gelesen haben. Zahlung in drei Raten ohne Aufpreis; lokale Förderungen werden vor der Unterschrift geprüft.