Der Formular-Editor ist ein benutzerfreundliches Tool, mit dem Sie verschiedene Arten von Webformularen erstellen können, um mit Website-Besuchern zu interagieren oder Benutzerinformationen zu sammeln. Mit seiner intuitiven Benutzeroberfläche – die dem Text- und Bildeditor ähnelt, aber mit zusätzlichen Anpassungsoptionen – können Sie Formulare wie Feedback-Formulare, Abonnementformulare, Umfragen und mehr entwerfen und konfigurieren.
Hinzufügen eines Formulars zu Ihrer Website
1. Navigieren Sie im linken Menü zum Tab „Erstellen“ und wählen Sie die Kategorie „Formulare“ aus.
2. Ziehen Sie das Formularelement per Drag & Drop an die gewünschte Stelle der Seite. Ein blauer Platzhalter zeigt den nächstgelegenen verfügbaren Ablageort an.
Formular-Komponenten
1. Elemente: Konfigurieren Sie den Inhalt, einschließlich Formularfelder, Kontrollkästchen, Optionsfelder und die Call-to-Action-Schaltfläche.
2. Einstellungen: Definieren Sie, was bei der Formularübermittlung geschieht, z. B. das Senden der Daten an eine E-Mail-Adresse oder Datenbank.
Formularelemente
1. Textfeld
Das Textfeld ermöglicht es Benutzern, kurze, einzeilige Texteinträge in Ihr Formular einzugeben.
Feldtypen
Die Einstellung „Typ“ bestimmt die Art der Daten, die Benutzer eingeben können:
- Text: Zeigt die Eingabe genau so an, wie sie eingegeben wurde.
- Passwort: Blendet Eingabezeichen aus, indem sie als *** angezeigt werden (z. B. für Passwörter).
- Versteckt: Speichert systembezogene Informationen (z. B. Referrer- oder Browserdetails) oder vorausgefüllte Daten, die Benutzer nicht sehen sollten.
- Datei*: Ermöglicht Besuchern das Hochladen von Bildern, Audio-, Video- oder anderen Dateien. Eingereichte Dateien generieren eine E-Mail mit einem anklickbaren Download-Link.
Anpassungsoptionen
- Name: Eine eindeutige Kennung zum Verweisen auf das Feld im Formulareditor und in E-Mails oder Blogeinträgen, die vom Formular generiert werden.
- Breite: Passen Sie die Breite des Felds an, indem Sie einen Wert eingeben oder die Ziehpunkte für die Größenänderung ziehen.
- Maximale Länge: Legt die maximale Anzahl von Zeichen fest, die das Feld akzeptieren kann.
- Validieren als: Definiert den erforderlichen Inhaltstyp (z. B. muss ein E-Mail-Adressfeld eine ordnungsgemäß formatierte E-Mail-Adresse enthalten). Wenn die Eingabe ungültig ist, wird den Benutzern eine Aufforderung zur Korrektur angezeigt.
- Hinweis: Zeigt Hilfstext an, wenn Benutzer in das Feld klicken, der Anleitungen oder Beispiele enthält.
- Standardwert: Füllt das Feld mit einem vordefinierten Wert aus, den Benutzer ändern können.
Datei-Uploads*
- Um hochgeladene Dateien zu speichern, muss das Formular mit einer Datenbank verknüpft sein.
- Dateien, die in der Datenbank gespeichert sind, bleiben zugänglich und werden auf das Speicherlimit des Kontos angerechnet.
- Dateilinks, die per E-Mail gesendet werden, verbrauchen keinen Speicherplatz, verfallen aber nach 30 Tagen.
2. Textbereich
Das Formularfeld „Textbereich“ ähnelt dem Textfeld, ermöglicht jedoch längere, mehrzeilige Texteingaben.
Anpassungsoptionen
Zusätzlich zu den identischen Optionen wie für das Textfeld (Name, Label, Breite, Hinweis, Validieren als und Standardwert) gibt es folgende weitere Optionen für den Textbereich:
- Höhe: Passen Sie die Höhe des Textbereichs an, indem Sie entweder die Zahl im Höhenfeld ändern oder die Ziehpunkte für die Größenänderung des Textbereichs ziehen.
- Umbruch: Definiert, wie der Text angezeigt wird, wenn er in E-Mails übermittelt oder in Foren/Blogs angezeigt wird.
- Standard: Verwendet die Standardeinstellungen für den Textumbruch des Browsers oder E-Mail-Clients.
- Aus: Deaktiviert den Textumbruch, sodass der Text bei der Eingabe nicht in neue Zeilen umgebrochen wird.
- Physisch: Zeigt den Text genau so an, wie er im Textbereich umgebrochen wurde.
- Virtuell: Ermöglicht es dem E-Mail-Client zu entscheiden, wie der Text umgebrochen wird.
3. Auswahlfeld
Mit dem Auswahlfeld können Benutzer aus einer vordefinierten Liste von Optionen auswählen. Es kann je nach ausgewählter Konfiguration entweder als Dropdown-Menü oder als Liste angezeigt werden.
Anpassungsoptionen
- Typ: Definiert, wie die Optionen angezeigt werden:
- Menü: Zeigt ein Dropdown-Menü an, in dem Benutzer eine Option auswählen können.
- Liste: Zeigt alle verfügbaren Optionen in einer vertikalen Liste an.
- Optionen: Stellt die auswählbaren Optionen im Feld dar.
- Optionsname: Der Text, der im Dropdown-Menü oder in der Liste angezeigt wird.
- Optionswert: Die tatsächlichen Daten, die in E-Mails gesendet werden, wenn die Option ausgewählt ist.
- Sortieren & Verwalten: Verwenden Sie die Pfeile nach oben/unten, um Optionen neu anzuordnen, unerwünschte Optionen zu löschen oder eine Standardauswahl festzulegen, die beim Laden des Formulars angezeigt wird.
4. Auswahlkästchen
Auswahlkästchen ermöglichen es Benutzern, mehrere Optionen aus einer Liste auszuwählen oder eine einzelne Option ein- oder auszuschalten. Sie sind nützlich für die Darstellung von Multiple-Choice-Auswahlen, bei denen mehr als eine Option ausgewählt werden kann.
Anpassungsoptionen
- Name: Die eindeutige Kennung für das Auswahlkästchen, die im Formularvorlagen-Editor, in E-Mails und Blogeinträgen verwendet wird. Stellen Sie ihn sich als die Frage vor, die Benutzer beantworten, indem sie das Auswahlkästchen aktivieren oder deaktivieren.
- Wert: Stellt die ausgewählte Antwort dar. Wenn der Wert des Auswahlkästchens beispielsweise auf „Ja“ festgelegt ist, bedeutet das Aktivieren des Auswahlkästchens, dass der Benutzer positiv geantwortet hat.
- Standardmäßig ausgewählt: Wenn diese Option aktiviert ist, wird das Auswahlkästchen beim Laden des Formulars vorab aktiviert.
- Obligatorisch: Benutzer müssen das Auswahlkästchen aktivieren, bevor sie das Formular absenden. Dies ist nützlich für Auswahlkästchen für Vereinbarungen, z. B. wenn Benutzer vor der Übermittlung die allgemeinen Geschäftsbedingungen akzeptieren müssen.
5. Optionsfelder
Optionsfelder werden verwendet, wenn nur eine Option aus einer vordefinierten Liste ausgewählt werden kann. Im Gegensatz zu Auswahlkästchen werden durch die Auswahl eines Optionsfelds automatisch alle anderen Optionen in derselben Gruppe deaktiviert.
Anpassungsoptionen
- Gruppenname: Alle Optionsfelder, die Auswahlmöglichkeiten für dieselbe Frage darstellen, müssen derselben Gruppe angehören. Es kann jeweils nur ein Optionsfeld pro Gruppe ausgewählt werden.
- Wert: Stellt die Antwortoption dar. Wenn die Frage beispielsweise lautet: „Gefällt Ihnen meine Website?“, könnte der Gruppenname „GefälltMeineSeite“ lauten, mit den Wertoptionen „Ja“, „Nein“ und „Verbesserungsfähig“. Wenn ein Benutzer „Ja“ auswählt, wird die übermittelte Antwort wie folgt angezeigt: GefälltMeineSeite: Ja.
- Standardstatus: Ermöglicht die Vorauswahl eines Optionsfelds beim Laden des Formulars.
- Obligatorisch: Erfordert, dass der Benutzer vor dem Absenden des Formulars eine Option auswählt.
6. Feedback-Formular
Der Formular-Editor enthält einen integrierten Feedback-Formular-Assistenten, der einfach durch Auswahl des F-Symbols hinzugefügt werden kann.
Dieses Formular ist mit allen notwendigen Feldern für das Einreichen von Feedback vorkonfiguriert, einschließlich einer Call-to-Action-Schaltfläche. Die Felder sind mit Standardoptionen versehen, aber Sie können sie nach Bedarf anpassen, um sie besser auf Ihre Anforderungen abzustimmen.
7. Erfolgs-/Fehlermeldungen
Nachdem das Formular abgeschickt wurde, zeigt das System entweder eine Erfolgs- oder eine Fehlermeldung an. Sie können die Platzierung dieser Nachrichten steuern, indem Sie den Ort im Editor angeben.
Verwenden Sie das Info-Symbol, um auszuwählen, wo die Nachrichten angezeigt werden sollen. Wenn in den Formulareigenschaften die erweiterten Optionen aktiviert sind, können Sie auch die Erfolgsmeldung anpassen. Wenn das Feld leer gelassen wird, wird die standardmäßige Erfolgsmeldung angezeigt. Wenn gewünscht, können Sie in den Formulareigenschaften aber auch eine benutzerdefinierte Nachricht eingeben, die Ihren Besuchern nach erfolgreichem Absenden des Formulars angezeigt wird.
8. Call-to-Action-Schaltfläche
Die Call-to-Action-Schaltfläche (CTA) ist ein wichtiges Element des Formulars, da sie es den Benutzern ermöglicht, ihre Eingaben zu übermitteln und die beabsichtigten Aktionen des Formulars abzuschließen. Ohne sie ist das Einreichen von Formularen nicht möglich.
Um eine CTA-Schaltfläche einzufügen, suchen Sie das entsprechende Symbol im Abschnitt „Inline-Elemente“ in der Symbolleiste des Formulareditors und klicken Sie darauf. Nachdem Sie sie hinzugefügt haben, klicken Sie auf die Schaltfläche, um sie als Schaltfläche für die Übermittlung zu konfigurieren. Wählen Sie im Dropdown-Menü „Link“ die Option {Formular senden} aus, um die Formularübermittlung zu aktivieren.
Wenn Sie eine Schaltfläche zum Zurücksetzen benötigen, können Sie eine erstellen, indem Sie die gleichen Schritte ausführen und stattdessen {Zurücksetzen} auswählen. Darüber hinaus bietet das rechte Panel ein bearbeitbares Feld, in dem Sie den Beschriftungstext der Schaltfläche an die Anforderungen Ihres Formulars anpassen können.
Eigenschaften und Anpassung der Call-to-Action-Schaltfläche
- Beschriftung und Untertext der Schaltfläche: Legen Sie den Beschriftungstext und den optionalen Untertext fest, der auf der Schaltfläche angezeigt werden soll.
- Größe: Wählen Sie zwischen kleinen, mittleren oder großen Schaltflächengrößen.
- Minimale Breite: Definieren Sie eine minimale Schaltflächenbreite, um die Konsistenz des Layouts zu gewährleisten.
- Mouse-over-Text und -Untertext: Geben Sie alternativen Text an, der angezeigt wird, wenn Benutzer den Mauszeiger über die Schaltfläche bewegen.
- Textübergang: Wenn ein Mouse-over-Text festgelegt ist, wählen Sie einen Übergangseffekt aus, um eine sanfte visuelle Änderung zu erzielen.
- Highlight-Effekt: Fügen Sie einen Animationseffekt hinzu, der 3 Sekunden nach dem Laden der Seite aktiviert und alle 30 Sekunden wiederholt wird.
- Farbe: Wählen Sie aus drei vordefinierten Schaltflächenfarben.
- Ausrichtung: Richten Sie die Schaltfläche innerhalb des Inhalts aus (links, zentriert oder rechts).
- Padding: Passen Sie das Padding der Schaltfläche in Pixeln an, um einen optimalen Abstand zu erzielen.
- Schaltflächensymbol: Wählen Sie ein Symbol aus der Bildbibliothek aus oder laden Sie ein benutzerdefiniertes Bild hoch.
- Mouse-over-Symbol: Fügen Sie optional ein anderes Symbol hinzu, das beim Bewegen des Mauszeigers über die Schaltfläche angezeigt wird.
- Symbolposition: Platzieren Sie das Symbol vor oder nach der Schaltflächenbeschriftung.
Formulareinstellungen
1. Nächste Seite
Geben Sie die Seite an, die nach erfolgreicher Formularübermittlung geöffnet werden soll. Dabei kann es sich um eine spezielle „Dankeschön“-Seite oder eine andere relevante Seite auf Ihrer Website handeln. Als Standard ist das Formular so eingestellt, dass Benutzer nach erfolgreicher Übermittlung auf derselben Seite bleiben. Um dies zu ändern, wählen Sie über den Linktyp die gewünschte Seite aus.
2. An E-Mail-Adresse senden
Aktivieren Sie „An E-Mail-Adresse“ senden, um Formularübermittlungen per E-Mail von Ihren Website-Besuchern zu erhalten. Dadurch werden zusätzliche Optionen freigeschaltet:
| - An E-Mail-Adresse: Geben Sie die E-Mail-Adresse ein, an die Formularübermittlungen zugestellt werden sollen, z. B. orders@contactmywebsite.com. | |
| - Von E-Mail-Adresse: Um die Zustellbarkeit von Formulareinsendungen zu gewährleisten, haben wir die Option zur Angabe der E-Mail-Adresse des Absenders deaktiviert. | |
| - E-Mail-Betreff: Definieren Sie die Betreffzeile der E-Mail (z. B. „Neue Informationsanfrage“). Sie können auch $xxxxx$-Platzhalter verwenden, um den Betreff basierend auf Benutzereingaben zu personalisieren. |
3. E-Mail-Format und Vorlagen-Editor
Wählen Sie das Format der E-Mail:
- Nur Text: Sendet reine Text-E-Mails, wobei jegliche Formatierung entfernt wird.
- HTML: Sendet formatierte E-Mails, sofern Ihr E-Mail-Client HTML unterstützt.
Wählen Sie für benutzerdefinierte E-Mail-Layouts „Vorlage verwenden“ aus, um den Vorlagen-Editor zu öffnen:
- Der Vorlagen-Editor fungiert als vereinfachter Text- und Bild-Editor.
- Verwenden Sie das Dropdown-Menü „Wert“, um Platzhalter einzufügen, die Formularfeldern entsprechen.
- Nach dem Speichern wird bei jeder Formularübermittlung eine E-Mail generiert, die auf Ihrer Vorlagenstruktur basiert.
4. Bestätigungs-E-Mail senden
Diese Funktion sendet eine automatische Antwort an Besucher, die ihre Übermittlung bestätigt.
- An E-Mail-Adresse: Geben Sie die E-Mail-Adresse ein, an die Formularübermittlungen zugestellt werden sollen, z. B. orders@contactmywebsite.com.
- Von E-Mail-Adresse: Um die Zustellbarkeit von Formulareinsendungen zu gewährleisten, haben wir die Option zur Angabe der E-Mail-Adresse des Absenders deaktiviert.
- E-Mail-Betreff: Definieren Sie die Betreffzeile der E-Mail (z. B. „Neue Informationsanfrage“).
- Nachrichteninhalt: Aktivieren Sie die Option „Vorlage verwenden > Bearbeiten“, um den Textvorlagen-Editor zu öffnen, in dem Sie die Bestätigungsnachricht anpassen können. Verwenden Sie Merge-Tags, um Formularfelddaten einzufügen (z. B. $Email$).
5. An Datenbank senden
Aktivieren Sie „An Datenbank senden“, um übermittelte Formulardaten in einer von der Seite gehosteten Datenbank zu speichern. Das Formular erstellt automatisch eine dedizierte Datenbank mit den erforderlichen Spalten, die mit den Feldnamen und Datentypen des Formulars übereinstimmen. Sie können auch eine importierte Datenbank verwenden, aber stellen Sie sicher, dass sie übereinstimmende Spaltennamen und Typen aufweist.
Weitere Einstellungen:
- Bestätigung erforderlich: Sendet eine E-Mail mit einem Bestätigungslink, auf den Benutzer klicken müssen, um ihre Übermittlung zu bestätigen.
- Genehmigung erforderlich: Benachrichtigt einen Moderator per E-Mail und fordert ihn auf, die Übermittlung zu genehmigen oder abzulehnen, bevor sie gespeichert wird. Dies hilft, Spam oder versehentliche Übermittlungen zu verhindern.
Weitere Informationen finden Sie im Anwendungs-Tutorial für den Datenbank-Editor.