Formulare

Vorgefertigte Kontakt-, Angebots-, Buchungs- und Anmeldeformulare. Die KI fügt eines mit einer einzigen Komponente ein – kein Submit-Handler, den du schreiben müsstest – und jede Einsendung landet im Einsendungs-Posteingang deiner App.

Formulare in Proyecta sind eine Fähigkeit (Capability), kein handgeschriebener Code. Wenn deine App eine Möglichkeit braucht, wie Besucher dich erreichen können – ein Kontaktformular, eine Angebotsanfrage, eine Terminbuchung, eine Veranstaltungsanmeldung – stellt Proyecta eine fertige Formulardefinition bereit und rendert sie über einen template-eigenen Block. Validierung, Erfolgszustand, Speicherung der Einsendungen und die Benachrichtigung des Inhabers sind inklusive.

Die Voreinstellungen

Jedes Formular basiert auf einer von fünf integrierten Voreinstellungen. Beschreibe das Formular, das du möchtest, und Proyecta wählt die passende aus (und passt sie an) – du musst Felder nie von Grund auf neu erstellen.

Voreinstellung	`form` api id	Wofür es gedacht ist	Passt zu
Kontakt	`contactForm`	Allgemeines „Kontakt aufnehmen“: Name, E-Mail, optionales Telefon, Nachricht	Unternehmensdaten
Angebot	`quoteForm`	Angebotsanfrage: Kontaktdaten + gewünschte Leistung + Auftragsdetails	Leistungen
Buchung	`bookingForm`	Terminvereinbarung: Leistung, Wunschdatum & -uhrzeit, Kontaktdaten	Leistungen
Anmeldung	`registrationForm`	Veranstaltungs- oder Kursanmeldung (RSVP): Teilnehmerdaten + Anmerkung	Veranstaltungen
Bestellung	`orderForm`	Bestellannahme: was der Kunde möchte, Kontaktdaten, Anmerkungen	Speisekarte, Katalog

Du kannst mehrere Formulare in einer App haben (z. B. ein Kontaktformular und ein Buchungsformular), und die KI kann Felder in jedem davon hinzufügen, umbenennen oder anpassen.

Wie die KI es einrichtet

Die KI baut niemals ein Formular oder einen Submit-Handler von Hand. Sie fügt den template-eigenen <FormBlock/> ein und verweist ihn per id oder api id auf ein Formular:

import { FormBlock } from '@/components/blocks/FormBlock';

// Irgendwo auf einer öffentlichen Seite – einem Kontaktbereich, einem „Angebot anfordern"-Panel usw.
<FormBlock form="contactForm" />;

<FormBlock/> übernimmt alles selbstständig:

Rendert die Felder nach Typ – Text / E-Mail / Telefon als Inputs, langer Text als Textarea, Auswahloptionen als Dropdown, Opt-ins als Checkbox, Datum und Uhrzeit als native Picker sowie Dateifelder als „Datei anhängen“-Steuerelement.
Validiert im Browser – Pflichtfelder werden geprüft, bevor etwas gesendet wird.
Validiert auf dem Server – wenn der Server einen Wert ablehnt, wird der spezifische Fehler direkt neben dem betreffenden Feld angezeigt (keine verlorenen Einsendungen, keine stillen Fehler).
Zeigt einen Erfolgszustand – nach dem Absenden wird das Formular durch eine freundliche Bestätigung (die eigene Bestätigungsnachricht des Formulars) ersetzt, mit der Option, eine weitere Antwort zu senden.
Scheitert sicher – wenn das Formular nicht existiert oder deaktiviert wurde, rendert der Block nichts, sodass er eine öffentliche Seite nie beschädigen kann.

Da der Block template-eigen ist, besteht die Aufgabe der KI lediglich darin, ihn zu platzieren und den umgebenden Bereich zu gestalten – die dahinterliegende Mechanik ist fest und korrekt.

Dateianhänge

Formulare können eine hochgeladene Datei akzeptieren (eine Quittung, ein Referenzfoto, ein Briefing). Dateifelder rendern eine „Datei anhängen“-Schaltfläche, laden die Datei in den Speicher hoch und fügen die öffentliche URL in die Einsendung ein. Limits werden automatisch durchgesetzt:

Nur Bilder und PDF, bis zu 5 MB (große Bilder werden zuerst im Browser verkleinert).
Die Senden-Schaltfläche ist deaktiviert, während eine Datei hochgeladen wird, sodass eine Einsendung nie unvollständig abgeschickt wird.

Wo Einsendungen landen

Jede Einsendung wird gespeichert und erscheint im Einsendungs-Posteingang deiner App – Teil des Admin-Panels, gerendert durch den template-eigenen <SubmissionsInbox/>. Von dort aus kannst du (als Inhaber):

Einsendungen unter den Tabs New / Read / Archived durchsuchen, mit einem Ungelesen-Badge bei New.
Jede Einsendung öffnen, um die übermittelten Feldwerte, die Seite, von der sie kam, und das Datum zu sehen.
Eine Einsendung als read markieren, zurück zu new verschieben oder archivieren.
Den Posteingang auf ein einzelnes Formular eingrenzen oder die Einsendungen aller Formulare in einer Liste anzeigen.

Der Posteingang ist nur für Admins zugänglich – der Leser muss mit einem Admin-Konto angemeldet sein (serverseitig durchgesetzt).

Per E-Mail bei jeder Einsendung benachrichtigt werden

Formulare können dich per E-Mail benachrichtigen, sobald jemand etwas einsendet – aktiviere die Inhaber-Benachrichtigungen und lege die Adresse fest, die sie empfangen soll. Du erhältst den Lead in deinem Posteingang, ohne die App öffnen zu müssen. Die E-Mail selbst wird über Proyectas E-Mail-Fähigkeit versendet, sodass sie ohne zusätzliche Einrichtung funktioniert.

Häufige Anwendungsfälle (lass die KI es einrichten)

"Add a contact form to the footer with name, email, and message, and email me at hello@mybiz.com whenever someone submits."
"Put a 'Request a quote' form on each service page that asks which service they need and the job details."
"Add a booking form so clients can request an appointment with a preferred date and time."
"Create an event registration form for the workshop page and let attendees attach a PDF."
"Show me the submissions inbox and only the ones I haven't read yet."