Kontaktformulare und Kontakt-Sections
Formulare mit Prüfung, Kanäle, Karte, Terminbuchung, Öffnungszeiten, Hilfecenter und Vertriebsformular.
8 Variants
Kategorie wechseln
Marketing
- Hero17
- Features15
- Logo Clouds8
- Stats8
- Pricing11
- Testimonials11
- Call to Action11
- FAQ7
- Newsletter12
- Banners9
- Popups und Consent7
- Services7
- Use Cases6
- Security und Trust7
- Changelog und Roadmap6
- Launch und Waitlist6
- Product Tour6
- Press und Awards10
- AI Features6
- App Download5
- Spenden und Unterstützen4
- Problem und Lösung5
- Einwände5
- Rechner10
- Quiz und Produktberater5
- Kostenlos testen5
- Empfehlung und Partner10
- Community5
- Open Source5
- Manifest5
- Angebot5
- Lead-Magnet4
- Scroll-Geschichten20
- Scroll-Reisen13
- Scroll-Effekte13
- Scroll-Reveals und Übergänge15
Content
- Blog16
- Gallery7
- Team8
- About11
- Content8
- Process7
- Contact8
- Comparison5
- Integrations5
- Error Pages5
- Careers7
- Case Studies6
- Portfolio6
- Events und Webinars6
- Help Center6
- Rechtstexte5
- Dokumentation4
- Suchergebnisse5
- Ressourcen und Downloads4
- Podcast4
- Redaktion15
- Autoren und Interviews10
- Glossar5
- Rezepte5
- Datengeschichten10
- Long Reads5
- Umfragen und Feedback14
- Formularzustände12
- Anfrageformulare16
- Bewerbungen und Anmeldungen13
- Adresse, Zahlung und Einwilligung12
App
- Auth9
- Dashboards6
- Tables6
- Settings5
- AI und Chat16
- Calendar5
- Inbox und Messages5
- Notifications6
- Files6
- Projects6
- Profiles6
- Onboarding6
- Billing und Usage10
- Developer Settings15
- Security und Zugriff10
- Import, Export und Verlauf15
- Automation und Builder14
- KI-Antworten18
- KI-Schreiben und Erstellen13
- KI-Einrichtung14
- KI-Assistenten9
E-Commerce
Industries
- Menus7
- Appointments6
- Listings6
- Courses6
- Rooms und Stays5
- Classes und Schedules6
- Arztpraxis5
- Kanzlei5
- Salon und Spa5
- Autohaus5
- Reisen5
- Sportverein5
- Coworking5
- Museum5
- Kino5
- Schule5
- Handwerk5
- Versicherung5
- Bank5
- Personal Brand15
- Speaker und Media Kits10
- Creator15
- Coaching und Beratung10
- Kunst und Musik15
- Zahnarztpraxis5
- Tierarztpraxis5
- Therapiepraxis5
- Hochzeiten und Events5
- Architekturbüro5
- Steuerberatung5
- Immobilienmakler5
- Blumenladen5
- Weingut5
- Kita5
- Fahrschule5
- Pflege5
- Festival5
Elements
- Buttons20
- Forms und Inputs22
- Picker und Auswahlfelder21
- Spezielle Eingabefelder20
- Cards10
- Overlays21
- Navigation15
- Menüleisten und Umschalter14
- Data Display15
- Fortschritt und Zustände13
- Listen, Bäume und Timelines17
- Charts22
- Vergleichs-Charts22
- Statistik-Charts20
- KPI-, Live- und Karten-Charts22
- Text Effects15
- Textakzente16
- Backgrounds19
- Beams, Partikel und Bewegung18
- Media19
- Code und JSON8
- Panels und Splitter4
Formular, Karte oder Öffnungszeiten
Im Kontaktbereich wird aus Interesse ein Gespräch. Die acht Varianten hier bringen Formulare mit echter Validierung und Fehlern als Text neben jedem Feld, so bleibt niemand an einem roten Rahmen hängen, ohne zu wissen, warum.
„Geteilt mit Formular“ ist der Standard, mit dem Formular auf der einen und den Kontaktwegen auf der anderen Seite. Kanalkarten passen zu Firmen mit mehreren Teams. Standortkarte und Öffnungszeiten eignen sich für Läden, Praxen und Restaurants, die Terminbuchung lässt direkt einen Termin wählen. Das Hilfecenter lenkt Fragen zuerst zu Hilfeartikeln, der Vertriebskontakt fragt die wenigen Felder ab, die ein Vertrieb braucht.
Frag nur ab, was du für die Antwort brauchst, oft reichen Name, E-Mail und Nachricht. Sag, wie schnell du antwortest. Das Formular sendet nicht von selbst, du gibst dein eigenes onSubmit mit, damit läuft es mit jedem Backend, Formulardienst oder jeder Server Action.
Kontakt
Details
Was Kontakt mitbringt, aus Registry und Quellcode gelesen.
- Bereich
- Content
- Variants
- 8
- Version
- 1.0.0 · seit 1.0.0
- Datei
- components/ui/contact.tsx
- npm-Pakete
- Keine
- Sprachen
- Englisch und Deutsch, 47 eigene Texte
- In Sammlungen
- Lokales GeschäftArztpraxisPortfolio
- Mit KI bauen
- Per MCP in Claude, Cursor, Copilot und Codex
Props
Die Schnittstelle ContactProps aus components/ui/contact.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.
variantoptionalContactVariantsplit-formchannel-cardslocation-mapbookingminimalopening-hourssupport-centersales-contact
eyebrowoptionalReact.ReactNodetitleoptionalReact.ReactNodedescriptionoptionalReact.ReactNodechannelsoptionalContactChannel[]topicsoptionalstring[]Options for the topic select (split-form)
mapoptionalReact.ReactNodeMap or picture for location-map and opening-hours
addressoptional{ label?: string; lines: string[]; directionsHref?: string; phone?: string }hoursoptionalContactHours[]Monday first
hoursNoteoptionalstringdaysoptionalContactDay[]Booking: free days and times
meetingoptional{ title: string; duration: number; text?: string; person?: ContactPerson }Booking: what is being booked
emailoptionalstringminimal
phoneoptionalstringhelpTopicsoptionalContactTopic[]support-center
popularSearchesoptionalstring[]teamSizesoptionalstring[]sales-contact
expectationsoptionalstring[]quoteoptional{ text: string; person: ContactPerson }logosoptionalReact.ReactNode[]onSubmitoptional(data: FormData) => void | Promise<void>Called with the form data. Without it the form shows its success state right away.
Eingebaute Texte
Diese Texte schreibt Kontakt selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.
Alle 47 Texte anzeigen
| Schlüssel | Englisch | Deutsch |
|---|---|---|
| name | Englisch Name | Deutsch Name |
| firstName | Englisch First name | Deutsch Vorname |
| lastName | Englisch Last name | Deutsch Nachname |
| Englisch Email | Deutsch E-Mail | |
| workEmail | Englisch Work email | Deutsch Geschäftliche E-Mail |
| company | Englisch Company | Deutsch Firma |
| optional | Englisch optional | Deutsch optional |
| topic | Englisch Topic | Deutsch Thema |
| message | Englisch Message | Deutsch Nachricht |
| messagePlaceholder | Englisch What can we help with? | Deutsch Wobei können wir helfen? |
| consent | Englisch I agree that my details are used to answer this request. | Deutsch Ich bin einverstanden, dass meine Angaben zur Beantwortung genutzt werden. |
| send | Englisch Send message | Deutsch Nachricht senden |
| sending | Englisch Sending | Deutsch Wird gesendet |
| required | Englisch Please fill in this field. | Deutsch Bitte fülle dieses Feld aus. |
| invalidEmail | Englisch Please enter a valid email address. | Deutsch Bitte gib eine gültige E-Mail-Adresse ein. |
| consentRequired | Englisch Please agree so we can answer you. | Deutsch Bitte stimme zu, damit wir dir antworten können. |
| successTitle | Englisch Thank you, your message is on its way | Deutsch Danke, deine Nachricht ist unterwegs |
| successText | Englisch We reply within one working day. A copy is in your inbox. | Deutsch Wir antworten innerhalb eines Werktags. Eine Kopie liegt in deinem Postfach. |
| again | Englisch Write another message | Deutsch Weitere Nachricht schreiben |
| open | Englisch Open now | Deutsch Jetzt geöffnet |
| closed | Englisch Closed now | Deutsch Jetzt geschlossen |
| closedDay | Englisch Closed | Deutsch Geschlossen |
| today | Englisch Today | Deutsch Heute |
| directions | Englisch Get directions | Deutsch Route planen |
| call | Englisch Call | Deutsch Anrufen |
| copy | Englisch Copy | Deutsch Kopieren |
| copied | Englisch Copied | Deutsch Kopiert |
| pickDay | Englisch Pick a day | Deutsch Tag wählen |
| pickTime | Englisch Pick a time | Deutsch Uhrzeit wählen |
| noSlots | Englisch Fully booked | Deutsch Ausgebucht |
| book | Englisch Book this time | Deutsch Diesen Termin buchen |
| booked | Englisch You are booked | Deutsch Dein Termin steht |
| bookedText | Englisch A calendar invitation for {when} is on its way to your inbox. | Deutsch Eine Kalendereinladung für {when} ist auf dem Weg in dein Postfach. |
| selected | Englisch {day} at {time} | Deutsch {day} um {time} Uhr |
| choose | Englisch Choose a day and a time | Deutsch Wähle einen Tag und eine Uhrzeit |
| duration | Englisch {n} min | Deutsch {n} Min. |
| video | Englisch Video call | Deutsch Videoanruf |
| search | Englisch Search the help center | Deutsch Hilfe durchsuchen |
| searchPlaceholder | Englisch Search for answers | Deutsch Nach Antworten suchen |
| popular | Englisch Popular | Deutsch Beliebt |
| articles | Englisch {n} articles | Deutsch {n} Artikel |
| status | Englisch All systems running | Deutsch Alle Systeme laufen |
| teamSize | Englisch Team size | Deutsch Teamgröße |
| talkToSales | Englisch Talk to sales | Deutsch Mit dem Vertrieb sprechen |
| expect | Englisch What to expect | Deutsch Was dich erwartet |
| weekdays | Englisch Sun,Mon,Tue,Wed,Thu,Fri,Sat | Deutsch So,Mo,Di,Mi,Do,Fr,Sa |
| months | Englisch Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec | Deutsch Jan.,Feb.,März,Apr.,Mai,Juni,Juli,Aug.,Sept.,Okt.,Nov.,Dez. |
Barrierefreiheit
Aus dem Quellcode der Component abgeleitet.
- Setzt aria-describedby, aria-invalid und aria-live, damit Screenreader Zweck und Zustand ansagen.
- Nutzt die Rollen search und status.
- Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
- Jedes Feld hat ein Label, sichtbar oder für Screenreader.
- Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
- Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
- Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.
Bewegung
- Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
- Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
- Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 8 Stellen im Code schalten Bewegung dann ab.
Häufige Fragen
Wie installiere ich Kontakt?
Mit aiw add @ai-website/contact. Der Befehl legt die Datei components/ui/contact.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, badge, icon, section und reveal. Weitere npm-Pakete braucht sie nicht.
Welche Varianten hat Kontakt?
8 Varianten, Geteilt mit Formular, Kanalkarten, Standortkarte, Terminbuchung, Minimal, Öffnungszeiten, Hilfecenter und Vertriebskontakt. Du wählst sie mit der Prop variant, zum Beispiel variant="channel-cards".
Kann ich die Texte von Kontakt übersetzen?
Ja. Kontakt bringt 47 eigene Texte auf Deutsch und Englisch mit, etwa „Name“, „Vorname“ und „Nachname“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.
Kann ein KI-Assistent Kontakt einbauen?
Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Kontakt mit aiw_components und installieren sie mit aiw_add @ai-website/contact. Nenn im Prompt die Variante, etwa variant="split-form", dann schreibt der Assistent deine Inhalte direkt in die Props.
Kann ich Kontakt ohne Code anpassen?
Ja, im Studio. Alle 8 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Contact-Code zum Kopieren.
Ähnliche Components, Wird oft kombiniert mit
Ähnliche Components
Mehr aus Content, demselben Bereich des Kits.
- ProcessSteps, Timelines und so funktioniert es.
- ComparisonVorher und nachher, wir und die anderen.
- ContentText und Bild, Zitate, Long Reads und Checklists.
- IntegrationsAnbindungen und Tools.
- Alles aus ContentSections, die erzählen und fragen. Blog, Long Reads, Team, About, Docs, Rechtstexte, Kontakt und Formulare.
Wird oft kombiniert mit
Sections, die auf einer Seite meist neben Contact stehen.
components/ui/contact.tsx
Quellcode lädt