Hier stellen wir Ihnen unseren Editor sowie die verschiedenen Formularelemente vor, die Ihnen zum Erstellen von Formularen zur Verfügung stehen.
Lernen Sie zudem die Formularvorschau des Editors kennen, die Ihnen jederzeit eine Live-Vorschau Ihres Formulars anzeigt. So sehen Sie unmittelbar, wie sich Ihre Bearbeitung im Editor auf das Formular auswirkt.
Der Editor ist das Herzstück von Formcentric. Hier erstellen, bearbeiten und übersetzen Sie Ihre Formulare. Direkt neben dem Bearbeitungsbereich wird Ihnen im Editor eine Ansicht Ihres Formulars angezeigt, sodass Sie bereits während der Bearbeitung sehen, wie Ihr aktueller Bearbeitungsstand aussieht. Erstellen Sie ein neues Formular, wird es direkt im Editor geöffnet.
Im Formular liegen Fehler vor, die das Veröffentlichen verhindern? Dank einer Fehleranzeige direkt im Formular-Baum müssen Sie nicht lange nach den Ursachen suchen. Rote Punkte und Kreise neben dem Formular-Baum zeigen sofort an, auf welchen Seiten und bei welchen Formularelementen Fehler vorliegen.
Im Artikel Der Editor - ein Überblick haben wir Ihnen bereits einen ersten Überblick über den Editor gegeben. Hier stellen wir Ihnen die verschiedenen Ansichten vor, in denen Sie sich Ihr Formular im Editor anzeigen lassen können. Befinden Sie sich im Editor, wird Ihnen rechts neben dem Bearbeitungsbereich eine Ansicht Ihres Formulars angezeigt. Jede Änderung, die Sie am Formular vornehmen, können Sie dort direkt verfolgen. Sie sehen immer den Bearbeitungsstand Ihres Formulars, sodass Sie bereits während der Erstellung prüfen können, ob das Formular wie erwartet aussieht. Aber nicht nur das Aussehen des Formulars, sondern auch dessen Funktionalität können Sie überprüfen und so sicherstellen, dass es richtig funktioniert. Dazu müssen Sie das Formular nicht veröffentlichen. Sie können immer alle Änderungen vorher testen.
Benötigen Sie einzeilige Textfelder, in denen Nutzer:innen Angaben wie beispielsweise Name, Straße etc. machen können? Dann verwenden Sie hierfür das Formularfeld Eingabefeld. Ähnlich wie bei anderen Formularfeldern können Sie hier individuelle Einstellungen vornehmen. Bestimmen Sie beispielsweise, ob das Eingabefeld ein Pflichtfeld ist, einen Platzhaltertext enthält oder bereits mit einem vorgegebenen Text gefüllt ist. Damit haben Sie die Möglichkeit, die Nutzung des Formulars optimal anzupassen.
Verwenden Sie das Formularelement Einfachauswahl, wenn Sie Nutzer:innen verschiedene Optionen anbieten möchten, von denen sie nur eine als Antwort auswählen dürfen.
Mit dem Formularelement Mehrfachauswahl können Sie Nutzer:innen verschiedene Antwortoptionen vorgeben, von denen sie eine oder mehrere auswählen dürfen. Die verschiedenen Optionen werden als Checkboxen angezeigt.
Das Formularelement Dropdown-Liste bietet Ihnen eine platzsparende Möglichkeit, verschiedene Antwortoptionen in Form einer Liste in Ihrem Formular zu integrieren. Mit einem Klick können Nutzer:innen die Dropdown-Liste aufklappen und die verschiedenen Optionen sehen. Sobald sie eine Auswahl treffen, schließt sich die Dropdown-Liste automatisch. Wenn Sie möchten, können Sie der Dropdown-Liste einen Hinweis hinzufügen und somit Nutzer:innen beispielsweise Tipps zum Ausfüllen geben. Auch können Sie festlegen, ob eine oder mehrere Optionen ausgewählt werden können. Soll eine der Optionen, die Sie Nutzer:innen zur Auswahl bieten, bereits beim Aufrufen des Formulars vorausgewählt sein? Handelt es sich hierbei um ein Pflichtfeld? All diese Punkte können Sie je nach Ihren Anforderungen individuell entscheiden und festlegen.
Das wahrscheinlich am häufigsten genutzte Formularfeld in Formularen ist das einzeilige Eingabefeld. Wenn Sie kurze, einzeilige Antworten von Nutzer:innen erwarten, die nicht weiter validiert werden müssen, verwenden Sie das vordefinierte Formularelement Kurzer Text. Dieses eignet sich besonders gut für Abfragen wie Vor- und Nachname.
Mit dem Formularfeld Langer Text bieten Sie Nutzer:innen Platz für mehrzeilige Texte, beispielsweise für Kommentare oder Nachrichten. Wie die anderen Formularelemente können Sie auch dieses gemäß Ihren Anforderungen konfigurieren. Entscheiden Sie beispielsweise, ob es sich hierbei um ein Pflichtfeld handelt oder es einen Platzhaltertext gibt. Auch können Sie einen Hinweis hinzufügen, um Nutzer:innen zusätzliche Information zu bieten.
Sei es für Rückfragen, eine Bestellung oder eine Newsletter-Anmeldung: es gibt unzählige Gründe, warum Sie die E-Mail-Adresse Ihrer Nutzer:innen benötigen. Nutzen Sie für die Abfrage von E-Mail-Adressen unser vordefiniertes Formularfeld E-Mail-Adresse. Mit nur einem Klick fügen Sie Ihrem Formular ein Eingabefeld hinzu, das Eingaben automatisch gemäß den Vorgaben einer gültigen E-Mail-Adresse überprüft und somit sicherstellt, dass eine E-Mail-Adresse eingegeben wird.
Sie benötigen ein Formularfeld, in das Nutzer:innen nur Zahlen eingeben können? Beispielsweise für die Bewertung Ihrer Dienstleistung auf einer Skala von 1 bis 10 oder für die Angabe der Dachfläche in Quadratmetern, wobei der Wert nicht unter 80 qm liegen darf? Dann nutzen Sie das vorkonfigurierte Formularelement Zahl und legen Sie fest, in welchem Bereich die eingegebene Zahl liegen muss.
Mit dem vordefinierten Formularfeld Telefonnummer fügen Sie Ihrem Formular in nur einem Schritt ein Formularfeld hinzu, in das ausschließlich Telefonnummern eingegeben werden können. Möchten Sie nur bestimmte Telefonnummern akzeptieren? Legen Sie fest, ob nur Telefonnummern aus einem ausgewählten Land oder bestimmte Rufnummerntypen erlaubt sind. Bietet Ihr Formular eine Länderauswahl an und soll die eingegebene Telefonnummer aus dem gewählten Land stammen? Kein Problem! Das können Sie ebenfalls festlegen.
Sie benötigen ein Eingabefeld für ein Datum z. B. für ein Geburtsdatum oder eine Seminaranmeldung? Dann nutzen Sie das vordefinierte Formularfeld Datum, in dem nur Datumseingaben akzeptiert werden. Darüber hinaus können Sie weitere Vorgaben zum Datum machen, wie beispielsweise einen Zeitraum festlegen, in dem das eingegebene Datum liegen muss.
Fügen Sie Ihrem Formular mit dem Formularfeld Passwort ein Passwortfeld hinzu. Das Passwortfeld ist im Grunde wie ein einzeiliges Eingabefeld. Eingegebene Zeichen werden hier allerdings nicht als Klartext, sondern als Punkte dargestellt. Somit haben Nutzer:innen einen Sichtschutz, während sie ihr Passwort eintippen.
Manchmal kann es notwendig sein, dass Nutzer:innen Dateien in ein Formular hochladen müssen, beispielsweise Dokumente oder Fotos. Verwenden Sie dazu das vordefinierte Formularelement Datei hochladen und fügen Sie Ihrem Formular ein Upload-Bereich hinzu. Über diesen können Nutzer:innen eine oder mehrere Dateien hochladen. Nach dem Absenden des Formulars können Sie diese Dateien für Ihre Auswertung nutzen.
Bei Verstecktes Feld handelt es sich um ein Formularelement, das auf dem Formular nicht angezeigt wird und somit für Nutzer:innen unsichtbar bleibt. Sie können versteckte Felder nutzen, um zusätzliche Informationen von Ihren Nutzer:innen zu erhalten. Ein Beispiel dafür wäre die Integration der Variable ${serverDate} in ein verstecktes Feld. Auf diese Weise können Sie erfahren, wann die Nutzer:innen das Formular ausgefüllt haben. Wenn die Nutzer:innen das Formular abschicken, werden Ihnen diese Informationen zusammen mit den Angaben der anderen Formularfelder im Bereich Einsendungen angezeigt.
Berechneter Wert ist ein Formularelement, das Ihnen ermöglicht, automatisch Werte zu generieren, die auf den Eingaben der Nutzerinnen und Nutzer basieren.
Mit dem Formularelement Bedingung können Sie ein Formular erstellen, das auf die Eingaben der Nutzer:innen reagiert. Das Formular wird dynamisch. Dank dieser Dynamik können Sie unter anderem festlegen, dass Nutzer:innen lediglich die Formularelemente angezeigt bekommen, die für sie relevant sind. Nicht relevante Formularelemente werden ausgeblendet. Zusätzlich können Sie festlegen, dass bestimmte Formularseiten übersprungen oder ein Eingabefeld zu einem Pflichtfeld wird, wenn eine bestimmte Bedingung erfüllt ist. Durch die Verwendung von Bedingungen können Sie ein übersichtliches Formular erstellen, das sich den individuellen Bedürfnissen Ihrer Nutzer:innen anpasst.
Wollen Sie Nutzer:innen etwas mitteilen? Wollen Sie ihnen beispielsweise Erläuterungen zum Formular oder Informationen zu Ihrem Produkt bieten? Dann nutzen Sie hierfür das Formularelement Textabsatz und fügen Sie Text an jeder beliebigen Stelle im Formular ein.
Sie wollen Nutzer:innen zusätzliche Informationen zur Verfügung stellen, diese aber nicht direkt im Formular abbilden? Zum Beispiel eine Preisliste oder einen umfangreichen Hilfetext? Verwenden Sie hierfür das Formularelement Button. Binden Sie hierüber jede beliebige JavaScript-Aktion in das Formular ein, die ausgeführt wird, sobald Nutzer:innen auf den Button klicken. So können Sie beispielsweise einen Button Preisliste oder Hilfe in Ihr Formular einfügen. Klicken Nutzer:innen drauf, öffnet sich ein neues Fenster mit den gewünschten Informationen.
Mit dem Formularelement Layout können Sie mehrere Formularelemente zu einer Einheit zusammenfassen, um sie dann einheitlich zu gestalten. Die in einem Layout gruppierten Formularelemente verhalten sich wie ein einzelnes Objekt. Auf diese Weise können Sie mithilfe von Anzeigevarianten das Aussehen mehrerer Formularelemente in nur einem Schritt verändern. Weisen Sie dem Layout beispielsweise eine Anzeigevariante zu, die einen Rahmen definiert, werden alle Formularelemente, die sich in dem Layout befinden, innerhalb eines Rahmens dargestellt. Im folgenden Beispiel wurden Formularelemente, die zusammengehören, in einem Layout-Element gruppiert. Durch die Verwendung der horizontalen Trennlinie können Nutzer:innen sofort erkennen, wann eine neue Sinneinheit beginnt.
Nutzen Sie das Formularelement Zusammenfassung - beispielsweise als letzte Seite des Formulars - und zeigen Sie Nutzer:innen eine Zusammenfassung ihrer eingegebenen Daten, bevor sie das Formular abschicken. Dies ermöglicht Nutzer:innen, ihre Eingaben zu überprüfen. Finden sie etwas, das sie ändern möchten, können sie zurückblättern und Änderungen vornehmen. Ist alles richtig, können sie das Formular abschicken.
Nutzen Sie das Formularelement Fieldset, um Ihr Formular in thematisch zusammenhängende Abschnitte zu unterteilen. Fassen Sie mehrere Formularelemente eines Formulars zusammen, die eine logische Einheit ergeben, wie z. B. Persönliche Daten, Rechnungsadresse, Lieferadresse etc.
Das Formularelement Bild bietet Ihnen unzählige Möglichkeiten, Ihr Formular individuell zu gestalten. Fügen Sie z. B. Ihr Firmenlogo oder Bilder Ihres Produkts in Ihr Formular ein. Nutzen Sie Bilder, um dem Formular Ihre eigene Note zu verpassen.
Bei Formularen, die öffentlich zugänglich sind und über die Informationen an Sie weitergereicht werden, ist der Schutz vor Spam und Missbrauch ein wichtiges Thema. Wie können Sie sich davor schützen, dass Eingaben in Ihre Formulare nicht durch Bots oder Programme, sondern persönlich erfolgen? Verwenden Sie als Sicherheitsmaßnahme das Formularelement Captcha in Ihren Formularen. Captcha ist ein Sicherheitstest, der dazu dient, Menschen und Computer voneinander zu unterscheiden und verhindern soll, dass Spam-Bots Ihre Formulare absenden. Der Test besteht darin, dass zufällig angeordnete, verformte und miteinander verschmolzene Buchstaben, Zahlen und Zeichen angezeigt werden, ein sogenannter Captcha-Code. Dieser ist für Menschen relativ leicht zu lesen, für Computer aber schwer zu entziffern. Nutzer:innen müssen diesen Code in einem Eingabefeld korrekt wiedergeben. Ist der Code richtig, können sie das Formular absenden - vorher nicht.
Oft kommt es vor, dass Sie nur bestimmte Eingaben in einem Formularfeld erlauben wollen, z. B. wenn Nutzer:innen eine E-Mail-Adresse oder eine Telefonnummer eingeben sollen. Verwenden Sie in diesen Fällen Validatoren, um Nutzer:innen beim Ausfüllen solcher Formularfelder zu unterstützen und sie auf fehlerhafte Eingaben aufmerksam zu machen. Die meisten Validatoren finden Sie beim Formularfeld Eingabefeld, mit denen Sie festlegen können, in welchem Format die Eingabe der Nutzer:innen in das Eingabefeld erfolgen soll. Die Formularfelder Passwort und Datei bringen ebenfalls die passenden Validatoren mit. Entspricht die Eingabe der Nutzer:innen nicht den Vorgaben der Validatoren, erhalten sie eine Fehlermeldung. Folgende Validatoren stehen Ihnen zur Verfügung:
Für die Vorbelegung von Eingabefeldern können Sie Variablen verwenden. Diese werden bei der Anzeige des Formulars durch einen Wert ersetzt, der dynamisch zur Laufzeit generiert wird. Dynamisch zur Laufzeit bedeutet, dass die für den Wert eingeforderten Informationen immer erst in dem Augenblick abgerufen werden, in dem Nutzer:innen das Formular aufrufen.
Formatierungen helfen dabei, Texte zu strukturieren. Durch das Hervorheben wichtiger Wörter, sei es durch Fettdruck oder Unterstreichung, können Schlüsselbegriffe besonders betont werden. Überschriften lassen sich klar vom übrigen Text abgrenzen, und mithilfe von Listen können Aufzählungen übersichtlich dargestellt werden. In Formcentric haben Sie die Möglichkeit, die einfache Auszeichnungssprache Markdown zu verwenden, um Texte in Ihrem Formular zu formatieren. Zusätzlich können Sie Bilder und Links einfügen. Markdown steht standardmäßig für folgende Elemente zur Verfügung: Beim Formularelement Textabsatz Bei Texten, die Sie als Hinweis für Formularelemente verwenden Bei der Bestätigungsnachricht für das Double-Opt-in-Verfahren
Mithilfe von JavaScript haben Sie die Möglichkeit, Eingaben mehrerer Formularelemente gleichzeitig zu validieren und miteinander in Beziehung zu setzen. Da Sie alle Operationen und Funktionen von JavaScript verwenden können, sind Ihnen keine Grenzen gesetzt. Der Zugriff auf die Formularelemente und somit auf die Eingaben der Nutzer:innen in das Formular, erfolgt im JavaScript über den technischen Namen des jeweiligen Formularfeldes.
