> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Ihr Formular gestalten
> Fügen Sie Formularelemente wie Inputs, Dropdowns, Toggles und Checkboxes im Widget Studio hinzu und konfigurieren Sie sie, um benutzerdefinierte Datenerfassungsformulare zu erstellen.
Sobald Sie Ihr Widget im Widget Studio erstellt haben, ist es Zeit, Elemente hinzuzufügen, um Ihr Formular aufzubauen.
## Verfügbare Formularelemente
Klicken Sie auf das linke Menü, um ein Element hinzuzufügen.
Scrollen Sie nach unten, um den Abschnitt **Form** zu finden. Es stehen mehrere Elementtypen zur Verfügung. Sie können sie kombinieren, um personalisierte und interaktive Formulare zu erstellen.
* **Button**: Eine Schaltfläche, deren Eigenschaften Sie bearbeiten können.
* **Input**: Eine vollständig anpassbare Texteingabe, die **string**-Daten von Ihren Besuchern erfassen kann.
* **Date**: Ein Feld, um vom Besucher ein Datum anzufordern. Klicken Sie darauf, um ein Datumsauswahlfenster zu öffnen.
* **Time**: Ein Feld, um vom Besucher eine Uhrzeit anzufordern. Klicken Sie darauf, um ein Zeitauswahlfenster zu öffnen.
* **Toggle**: Ein Toggle, dem Sie zwei mögliche Zustände hinzufügen können (z. B. **ON** und **OFF**).
* **Checkbox**: Ein Kontrollkästchen, dem Sie ein Text-Element hinzufügen können.
* **RadioButton**: Ein Optionsfeld, dem Sie ein Text-Element hinzufügen können.
* **Select**: Ein vollständig anpassbares Dropdown, in dem Sie verschiedene auswählbare Optionen eingeben können.
* **Textarea**: Ein vollständig anpassbares Textfeld mit einem Platzhalter.
* **Range input**: Ein vollständig bearbeitbarer Schieberegler, mit dem Besucher einen Wert innerhalb eines bestimmten Bereichs auswählen können.
* **Hidden input**: Ein unsichtbares Formularfeld zur Speicherung von Metadaten, die mit dem Formular übermittelt, dem Benutzer jedoch nicht angezeigt werden.
* **FormErrorMessage**: Ein Textfeld, das im Falle eines Fehlers im Formular eine bestimmte Meldung anzeigt.
Beginnen Sie mit dem Hinzufügen von Elementen in der Ansicht **Desktop**, die die Standardkonfiguration ist. Anschließend können Sie Ihr Design bei Bedarf an ein anderes Gerät (Mobil/Tablet) anpassen. Auf einem anderen Gerät vorgenommene Änderungen bleiben für dieses Gerät spezifisch und wirken sich nicht auf die anderen aus.
## Ihr Formular gestalten
Wenn Sie ein Element auswählen, erscheinen zwei Registerkarten oben im Bearbeitungsmenü: **General** und **States**.
### Registerkarte General
Wählen Sie diese Registerkarte aus, um die Eigenschaften Ihres Elements zu bearbeiten. Hier finden Sie die Kerneigenschaften Ihres Elements (die nicht spezifisch für einen bestimmten Zustand sind, wie z. B. Hover).
Sie können verschiedene Eigenschaften je nach Elementtyp ändern, wie Position, Padding und Animation.
#### Beispielanwendungsfall
Angenommen, Sie möchten ein Newsletter-Registrierungsformular erstellen. Sie können von einer der im Widget Studio verfügbaren **Newsletter**-Vorlagen ausgehen. Sie können diese Basis anpassen, indem Sie zwei Dropdown-Listen und einen Toggle hinzufügen. So erstellen Sie dieses Formular:
1. Klicken Sie auf **Add an element**.
2. Wählen Sie im Abschnitt Formulare den Typ **Select** aus.
3. Klicken Sie auf **Add option**, um der Liste eine Option hinzuzufügen. In unserem Beispiel fügen wir die Option **Latest products** hinzu.
Angenommen, Sie möchten eine zweite Option anzeigen, wenn ein Besucher **Latest products** auswählt. Gehen Sie dazu wie folgt vor:
1. Klicken Sie auf **Add an element**.
2. Wählen Sie im Abschnitt Formulare den Typ **Select** aus.
3. Blenden Sie im linken Menü die zweite Dropdown-Liste aus. Sie müssen [ein Ereignis konfigurieren](../associate-events-and-actions-with-your-widget), damit sie angezeigt wird.
4. Fügen Sie ein **Toggle**-Element hinzu, um jeden Besucher zu bitten, die **Allgemeinen Geschäftsbedingungen** zu akzeptieren, bevor er das Formular sendet.
5. Fügen Sie ein **Button**-Element hinzu.
Anschließend müssen Sie die Überprüfung der Informationen und das Senden der Daten konfigurieren.
Sie können auch [Regeln für ein Element festlegen](./add-rules-to-your-form-fields): Ist dies ein Pflichtfeld? Sollen wir den Feldinhalt vor der Validierung überprüfen?
### Registerkarte States
In der Registerkarte **States** können Sie die Stile der Zustände eines Elements bearbeiten (Hover, Active und Disabled).
Alle Zustände sind bearbeitbar, aber die bearbeitbaren Eigenschaften der Zustände hängen vom ausgewählten Element ab.