Einführung
Sitely verwenden
Elemente
Anleitungen
Formulare sind eine der wichtigsten Methoden, über die Website-Besucher Sie kontaktieren können. Sie erleichtern Ihren Besuchern das Leben und halten Ihre E‑Mail-Adressen von lästigen Harvesting-Bots fern. Das Erstellen von Formularen in Sitely besteht lediglich darin, Formularelemente zu Ihrer Seite hinzuzufügen. Hier sind die Standard-Formularelemente, die Ihnen in Sitely zur Verfügung stehen.
Textfeld
Kontrollkästchen
Schaltfläche
Schieberegler
Optionsfeld
Dateianhang
Optionsauswahl
Das am häufigsten verwendete Formularelement ist die Texteingabe bzw. das Feldelement. Dabei handelt es sich um ein einfaches Feld, in das Nutzer Informationen wie Name, Adresse, E‑Mail oder Telefonnummer eingeben können. Das Feld kann in Sitely über das Stil-Panel wie jedes andere Element gestaltet werden.
Textfeld ist der Bereich, in dem Sie den anfänglichen Inhalt festlegen, der im Feld angezeigt werden soll. Typischerweise handelt es sich dabei um einen Standardtext, der als Teil des Formulars gesendet wird, wenn Nutzer den Inhalt nicht überschreiben.
Platzhalter ist der Inhalt, den Sie im Feld anzeigen lassen können, um den Nutzern zu verdeutlichen, welche Information erwartet wird. Obwohl dieser Text angezeigt wird, kann er nicht als Standard dienen und muss durch die Eingabe des Nutzers überschrieben werden.
Formularvariable ist einfach ein Name, der dieses spezielle Feld identifiziert. Er wird verwendet, wenn die Formulardaten an Sie gesendet werden. Die E‑Mail, die Sie erhalten, enthält alle Formularvariablennamen zusammen mit den vom Nutzer eingegebenen Inhalten. Eine Formularvariable first_name würde zum Beispiel typischerweise für das Feld verwendet, in das ein Nutzer seinen Vornamen eintragen soll. Wenn die Formulardaten in Ihrem Posteingang ankommen, enthält die E‑Mail eine Zeile wie first_name: Fred. Wenn Sie keine Formularvariable hinzufügen, weist Sitely automatisch eine generische Variable zu.
Einzeilig: Dieses Kontrollkästchen erzwingt, dass der eingegebene Text nur einzeilig ist, etwa eine E‑Mail-Adresse oder Telefonnummer. Wenn Sie diese Option deaktivieren, kann die Texteingabe mehrzeilig sein, etwa ein Nachrichtenfeld.
Passwortfeld: Wenn Sie diese Option aktivieren, wird die Eingabe maskiert und durch eine Reihe von Punkten ersetzt. Obwohl der Nutzer Punkte im Feld sieht, wird der tatsächliche Inhalt als Teil der Formulardaten gesendet. Diese Option wird typischerweise für Login-Formulare verwendet und nicht für Formulare, die Informationen per E‑Mail übermitteln.
Die Barrierefreiheit des Formulars dreht sich um die Label-Auswahl: Ob Sie ein Textfeld (zum Beispiel etwas mit der Beschriftung „Nachricht:“) oder ein schwebendes Label wählen – darauf greifen Hilfstechnologien zurück, um das Eingabefeld zu beschreiben.
Die nächsten Optionen im Stil-Panel sind die vertrauten Gestaltungsoptionen für Schrift, Größe, Ausrichtung usw.
Darstellung bietet zusätzliche Stiloptionen speziell für Formularfelder. Wenn ein Formularelement vom Nutzer ausgewählt wird, erhält es den Fokus, oft als Fokusring bezeichnet. So erkennt der Nutzer, dass er gleich Informationen in ein Formularfeld eingibt. Mit dieser Option können Sie Hintergrundfarbe und Platzhalterfarbe des Feldes festlegen, um es für Nutzer sichtbarer zu machen. Außerdem heben die meisten Browser ein aktives Eingabefeld mit einem Rahmen hervor.
Validierung: Hier können Sie erzwingen, dass nur bestimmte Arten von Informationen in das Feld eingegeben werden. Sie können das Feld auch als Pflichtfeld kennzeichnen, bevor das Formular gesendet werden kann.
Abschließend gibt es den Bereich Formatierung. Hier können Sie die Groß-/Kleinschreibung des Feldinhalts erzwingen, eine Rechtschreibprüfung aktivieren oder Browser erlauben, Inhalte vom Computer des Nutzers automatisch auszufüllen.
Dieses wird verwendet, wenn Sie Nutzern eine Auswahl an Optionen geben möchten, die sie ankreuzen können, etwa „Newsletter erhalten“ oder „Senden Sie mir gelegentlich Sonderangebote“. Sie können beliebig viele Kontrollkästchen hinzufügen; Nutzer können alle oder einige der Optionen auswählen. Wenn Sie die Auswahl auf genau eine Option beschränken möchten, verwenden Sie stattdessen das Optionsfeld.
Das Kontrollkästchen bietet im Stil-Panel einige zusätzliche Optionen. Sie können den Standardzustand Ein oder Aus wählen, festlegen, ob es aktiviert ist, und ob es sich um ein Pflichtfeld handelt, etwa eine Zustimmung zu Geschäftsbedingungen. Das Aussehen des Kontrollkästchens kann über die Option Benutzerdefiniert angepasst oder automatisch durch den Browser des Nutzers gestaltet werden. Abschließend können Sie die Größe des Kontrollkästchens festlegen.
Diese Option verwenden Sie, wenn Sie die Auswahl auf genau eine von mehreren Möglichkeiten beschränken möchten. Beispielsweise können Sie ein Optionsfeld verwenden, damit Nutzer eine Farbe oder Größe für ein zu bestellendes Produkt wählen. Fügen Sie dafür mehrere Optionsfelder in Ihr Formular ein – eines für jede Auswahl. Vergeben Sie dann für jedes Feld einen identischen Variablennamen, etwa ‚color‘. Dadurch werden die Optionsfelder gruppiert, sodass nur eine Auswahl getroffen werden kann. Im Stil-Panel können Sie außerdem eine Standardeinstellung festlegen, die automatisch ausgewählt wird, wenn Nutzer keine Option wählen. Hier ein Beispiel für eine Farbauswahl mit Grün als Standard.
Dies ist eine weitere Form der Mehrfachauswahl für Nutzer. In diesem Fall werden die Optionen als Dropdown-Liste präsentiert, aus der Nutzer auswählen können. Wenn das Optionsauswahl-Element zur Seite hinzugefügt wird, sehen Sie im Stil-Panel zusätzliche Optionen. Im ersten Abschnitt können Sie Ihre Liste von Optionen erstellen – klicken Sie einfach auf Hinzufügen, um weitere Auswahlmöglichkeiten anzulegen. Bearbeiten Sie jede Optionsbezeichnung, indem Sie auf ihren Namen in der Liste klicken. Optional können Sie für jede Option einen Wert hinzufügen. Dieser Wert wird als Teil der Formularübermittlung gesendet und ist der tatsächliche Wert, den das Smartfeld (Rechner) verwendet. Wenn Sie keinen Wert hinzufügen, wird nur die Optionsbezeichnung als Teil des Formularergebnisses gesendet.
Es gibt außerdem eine Schaltfläche, mit der Sie eine Liste von Optionen importieren können. Das wird typischerweise verwendet, wenn Sie beispielsweise einen Länderauswahlliste als Teil einer Adressangabe im Formular benötigen. Angesichts von über 180 Ländern wäre das manuelle Erstellen der Liste zeitaufwändig. Sie können jedoch auf vielen Websites Länderliste im Klartextformat herunterladen. Diese Listen lassen sich über die Importfunktion direkt in Sitely importieren. Hier ein Beispiel für ein Länder-Dropdown.
Wenn Sie das selbst ausprobieren möchten, hier ein Download-Link für eine Textdatei mit Ländernamen.
Die Option Bei Auswahl ähnelt der On-Click-Option von Schaltflächen und anderen Links: Sie können eine Aktion festlegen, die ausgeführt wird, wenn eine bestimmte Option ausgewählt wird, sodass sich das Optionsauswahl-Element wie ein Menü verhält oder einen Layoutblock bzw. ein Popup mit zusätzlichen Formularfeldern einblendet.
Die Werte werden im Stil-Panel festgelegt, indem Sie den Minimalwert, den Maximalwert, die Schrittweite und den Anfangswert des Schiebereglers definieren. Außerdem vergeben wir dem Schieberegler einen Formularvariablennamen – in diesem Beispiel verwenden wir die Variable quantity. Wenn das Formular gesendet wird, zeigt die E‑Mail den Variablennamen gefolgt vom vom Nutzer ausgewählten Wert. Das sieht in etwa so aus: quantity: 2.
Um anzuzeigen, welche Menge ausgewählt wurde, fügen wir rechts neben dem Schieberegler zusätzlich ein Textfeld hinzu, das die ausgewählte Menge zeigt. Dies wird durch ein Smartfeld im Textfeld erreicht – Sie sehen die Option im Stil-Panel, wenn Ihr Textfeld auf der Arbeitsfläche ausgewählt ist – es sieht so aus:
Dies ist ein einfacher Schieberegler, mit dem Nutzer einen Wert auswählen können, indem sie einen Regler ziehen. Er hat viele Anwendungsfälle; als Beispiel könnten wir den Schieberegler verwenden, um eine bestimmte Produktmenge zu bestellen. In unserem Beispiel unten kann mit dem Schieberegler eine Menge zwischen 1 und 10 mit einer Standardmenge von 2 ausgewählt werden.
Wenn Sie ein Smartfeld einfügen, wird Ihnen ein Options-Panel angezeigt. In diesem Fall benötigen wir die Option Rechner. Dadurch wird ein Smartfeld vom Typ Rechner in das Textfeld eingesetzt – es sieht so aus:
Klicken Sie auf das Smartfeld (Rechner), um seinen Wert festzulegen. Zur Unterstützung durchsucht Sitely Ihre Seite und findet alle verfügbaren Variablen, die Sie im berechneten Feld verwenden können. In diesem Fall hat Sitely unsere Variable quantity gefunden, die dem Schieberegler zugeordnet ist. Das ist der Wert, den wir neben dem Schieberegler anzeigen müssen – daher die Auswahl. Bewegt sich nun der Schieberegler, wird der passende Wert dem Nutzer angezeigt.
Hinweis: Es gibt einen eigenen Abschnitt in der Benutzerdokumentation zu Smartfeldern und ihrer Verwendung. Wir sind hier nur kurz darauf eingegangen, um die Relevanz von Smart-Elementen im Zusammenhang mit diesem speziellen Formularelement zu zeigen.
Das Element selbst besteht aus einer Gruppe von zwei Elementen: dem Dateifeld und der Schaltfläche. Diese können einzeln ausgewählt und gestaltet werden. Wenn die Gruppe ausgewählt ist, haben Sie die volle Kontrolle darüber, was Nutzer mit den Formulardaten hochladen dürfen. Sie können die zulässigen Dateitypen sowie die Größenbeschränkung festlegen.
Dies ist ein einfaches Datei-Upload-Element, mit dem Nutzer auf ihrem Computer nach einer Datei suchen und sie dem Formular anhängen können.
Dies ist das Element, das das Absenden Ihres Formulars steuert. Zwar gibt es einen eigenen Abschnitt der Dokumentation zu Links und On-Click-Aktionen, aber wir gehen hier kurz auf die speziell für das Senden von Formulardaten verfügbaren Optionen ein.
Die am häufigsten verwendete Methode zum Senden eines Formulars ist die Option Kontaktformular per E‑Mail senden. Diese Option sammelt alle Formulardaten von Ihrer Seite und übermittelt sie an Ihren Server, der sie an eine festgelegte E‑Mail-Adresse weiterleitet. Die gesamte Aktion wird über das Stil-Panel gesteuert, wenn Sie diese Versandmethode auswählen.
Als erstes geben Sie Ihrer Schaltfläche eine Beschriftung. Dies ist üblicherweise „Senden“, kann aber alles sein, was zu Ihrem Formular passt.
Die On-Click-Aktion ist Kontaktformular per E‑Mail senden. Die E‑Mail-Überschrift kann alles sein, was Ihnen hilft, die E‑Mail bei Eingang in Ihrem Postfach zu identifizieren. Die Absender-E‑Mail-Adresse sollte eine E‑Mail-Adresse auf Ihrem Server sein. In unserem Beispiel ist es eine noreply-Adresse, es kann aber auch eine echte E‑Mail-Adresse sein, die Sie täglich verwenden. Es ist ziemlich wichtig, eine domainspezifische E‑Mail-Adresse zu verwenden, da einige Webhoster möglicherweise keine E‑Mails verarbeiten, die scheinbar von einem anderen Server stammen – etwa von Gmail.
Die Empfänger-E‑Mail-Adresse ist die Adresse, unter der Sie Ihre Antworten erhalten möchten. Auch hier sollte es idealerweise eine mit Ihrer Domain verknüpfte E‑Mail-Adresse sein, um Zustellprobleme durch Spamfilter oder Richtlinien des Webhosters zu vermeiden. Der Betreff ist die Information, die in der Betreffzeile der eingehenden Antworten erscheinen soll.
Als Nächstes haben Sie zwei Optionen: E‑Mail über Webserver oder Benutzerdefinierten SMTP-Server verwenden. In den meisten Fällen funktioniert die erste Option einwandfrei. Dabei nutzt Ihr Webhost die sendmail‑Funktion, um die E‑Mail zu verarbeiten und an Sie weiterzuleiten. Es gibt jedoch eine wachsende Zahl von Webhostern, die bevorzugen, dass Sie Ihre Formulare über ein korrekt konfiguriertes E‑Mail-Konto verarbeiten, das Sie besitzen und kontrollieren. Im Grunde ist das so, als würden Sie eine E‑Mail über Ihr normales E‑Mail-Konto senden. Wenn Ihr Hosting-Anbieter auf dieser Option besteht, können Sie nach Auswahl der SMTP‑Option die Zugangsdaten des E‑Mail-Kontos im Stil-Panel eintragen.
In diesem Abschnitt des Stil-Panels werden alle Formularelemente aufgelistet, die Sitely auf Ihrer Seite findet. Außerdem können Sie auswählen, ob sie mit dieser Senden-Schaltfläche übermittelt werden sollen oder ob einige von einer anderen Schaltfläche gesendet werden. Was auch immer Sie wählen: Aktivieren Sie einfach die Kontrollkästchen der Formularelemente, die Sie senden möchten. Dies ist eine sehr nützliche Funktion von Sitely, da sie große Flexibilität bei der Gestaltung von Seiten zur Informationsgewinnung bietet.
In den meisten Webentwicklungs-Anwendungen werden Formulare als separate Elemente konstruiert, die alle Formularfelder enthalten müssen. Dadurch entsteht die übliche Darstellung der meisten Webformulare als Kasten mit Feldern und einer Senden-Schaltfläche. Obwohl die meisten Menschen Formulare so gestalten, gibt es Anwendungsfälle, in denen dies nicht die ideale Lösung ist. Ein Beispiel: Eine Lehrkraft erstellt Online-Prüfungen oder -Kursarbeiten für Studierende. In diesem Fall möchte die Lehrkraft das Unterrichtsmaterial möglicherweise ähnlich wie gedruckte Kursarbeiten präsentieren. Es beginnt mit einer Themenübersicht, ein paar durchgerechneten Beispielen, gefolgt von einigen Übungen, die die Studierenden bearbeiten. In diesem Szenario arbeiten die Studierenden die Online-Seite durch, beantworten Fragen und erledigen die Übungen. Am Ende der Seite können sie ihren Namen und weitere Angaben hinzufügen und ihre Arbeit mit einem einfachen Button einreichen.
Da Sitely die gesamte Seite nach allen Formularelementen durchsucht, die die Studierenden auf ihrem Weg ausfüllen könnten, können alle gesammelt und als Ergebnis-E‑Mail an die Lehrkraft gesendet werden. Dieser vertraute Ansatz für Schulungsmaterial ist in anderen Website-Buildern oft nur mit speziell codierten Seiten schwer zu erreichen – in Sitely ist er ein Kinderspiel.
Wenn das Formular erfolgreich gesendet wurde, zeigen Sie in der Regel eine Dankesnachricht an. Eine Möglichkeit besteht darin, Ihre Besucher auf eine eigene Dankeseite zu leiten; eine andere, eine Dankesnachricht in einem Popup anzuzeigen. Das beruhigt die Nutzer nicht nur, dass ihre Informationen gesendet wurden, sondern gibt Ihnen auch die Gelegenheit, nach dem Absenden zusätzliche Informationen oder relevante Links auf Ihrer Website bereitzustellen.
Es gibt Situationen, in denen Sie einen Drittanbieter für die Formularverarbeitung verwenden möchten oder ein angepasstes Formularskript auf Ihrem eigenen Server. Für diese Fälle können Sie die Option Erweiterter Formularversand nutzen. Damit können Sie die URL des Formularverarbeitungsdienstes oder Skripts eingeben und die Versandmethode festlegen (GET oder POST). Diese Optionen erhalten Sie vom Dienstanbieter oder Skriptentwickler. Geben Sie die Informationen einfach in diesem Abschnitt ein und wählen Sie die Formularelemente aus, die Sie übermitteln möchten.
Bitte melden Sie uns alle Mängel in dieser Dokumentation, wir beheben sie so schnell wie möglich!
Aktualisiert für Sitely 6
Diese Website verwendet Cookies.
Bitte lesen Sie unsere Datenschutzerklärung für weitere Details.
