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:- Klicken Sie auf Add an element.
- Wählen Sie im Abschnitt Formulare den Typ Select aus.
- Klicken Sie auf Add option, um der Liste eine Option hinzuzufügen. In unserem Beispiel fügen wir die Option Latest products hinzu.
- Klicken Sie auf Add an element.
- Wählen Sie im Abschnitt Formulare den Typ Select aus.
- Blenden Sie im linken Menü die zweite Dropdown-Liste aus. Sie müssen ein Ereignis konfigurieren, damit sie angezeigt wird.
- Fügen Sie ein Toggle-Element hinzu, um jeden Besucher zu bitten, die Allgemeinen Geschäftsbedingungen zu akzeptieren, bevor er das Formular sendet.
- Fügen Sie ein Button-Element hinzu.
Sie können auch Regeln für ein Element festlegen: 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).