.

Formulare sind eine der wichtigsten Methoden, mit denen Website-Besucher mit Ihnen in Kontakt treten können. Sie machen das Leben Ihrer Besucher einfacher und halten gleichzeitig Ihre E-Mail-Adressen von lästigen Harvesting-Bots fern. Das Erstellen von Formularen in Sitely ist wirklich einfach und erfordert nur das Hinzufügen von Formularelementen zu Ihrer Seite. Hier sind die Standard-Formularelemente, die Ihnen in Sitely zur Verfügung stehen.

Text Input

Checkbox

Button

Slider

Radio Button

File Attachment

Option Selection

Das am häufigsten verwendete Formularelement ist das Texteingabe- oder Feldelement. Dabei handelt es sich um ein einfaches Feld, in das Benutzer Informationen wie Name, Adresse, E-Mail-Adresse oder Telefonnummer usw. eingeben können. Das Feld kann wie jedes andere Element in Sitely über das Stil-Panel gestaltet werden.

Mit „Texteingabe“ richten Sie den ersten Inhalt ein, der im Feld angezeigt werden soll. In der Regel handelt es sich dabei um einen Standardtext, der als Teil des Formulars gesendet wird, wenn Benutzer den Inhalt nicht überschreiben.

„Platzhalter“ ist der Inhalt, der im Feld angezeigt werden soll, um Benutzer darüber zu informieren, welche Informationen erwartet werden. Obwohl diese Informationen angezeigt werden, können sie nicht als Standard verwendet werden und müssen durch die Benutzereingabe überschrieben werden.

Formularvariable ist einfach ein Name, der dieses bestimmte Feld identifiziert. Dieser wird verwendet, wenn Ihnen die Ergebnisse des Formulars zugesendet werden. Die E-Mail, die Sie erhalten, enthält alle Namen der Formularvariablen zusammen mit dem Benutzerinhalt, der in diese Felder eingegeben wurde. Beispielsweise wird eine Formularvariable von „first_name“ normalerweise für das Feld verwendet, in das ein Benutzer seinen Vornamen eingeben soll. Wenn die Formularergebnisse in Ihrem E-Mail-Postfach ankommen, enthält es eine Zeile wie Vorname: Fred. Wenn Sie keine Formularvariable hinzufügen, weist Sitely Ihnen eine generische Variable zu.

Einzeilig: Dieses Kontrollkästchen erzwingt, dass der eingegebene Text nur aus einer Zeile besteht, z. B. eine E-Mail-Adresse oder Telefonnummer. Wenn Sie diese Option deaktivieren, kann der eingegebene Text mehrzeilig sein, z. B. ein Meldungsfeld.

Passwortfeld: Wenn Sie diese Option aktivieren, wird die Eingabe maskiert und durch eine Reihe von Punkten ersetzt. Obwohl der Benutzer Punkte im Feld sieht, wird der tatsächliche Inhalt als Teil der Formularergebnisse gesendet. Diese Option wird in der Regel für Anmeldeformulare verwendet, nicht für Formulare, die zum Senden von Informationen per E-Mail vorgesehen sind.

Die nächsten Optionen des Stil-Panels sind die bekannten Stiloptionen für Schriftart, Größe, Ausrichtung usw.

„Aussehen“ bietet Ihnen einige zusätzliche Gestaltungsoptionen, die speziell für Formularfelder gelten. Wenn ein Formularelement von einem Benutzer ausgewählt wird, wird es zu einem Fokuspunkt, der allgemein als Fokusring bezeichnet wird. Dadurch wird dem Benutzer angezeigt, dass er im Begriff ist, Informationen in ein Formularfeld einzugeben. Mit dieser Option können Sie eine Hintergrundfarbe und eine Platzhalterfarbe für das Feld festlegen, um es für Benutzer besser sichtbar zu machen. Darüber hinaus heben die meisten Browser ein aktives Eingabefeld mit einem Rahmen hervor.

Validierung: Hier können Sie festlegen, dass nur bestimmte Arten von Informationen in das Feld eingegeben werden können. Sie können das Feld auch als Pflichtfeld definieren, bevor das Formular gesendet werden kann.

Schließlich gibt es noch den Abschnitt „Formatierung“. Hier können Sie die Großschreibung des Feldinhalts erzwingen, den Inhalt einer Rechtschreibprüfung unterziehen oder Browsern erlauben, Inhalte vom Computer des Benutzers automatisch auszufüllen.

Das Kontrollkästchenfeld

Dieses Feld wird verwendet, wenn Sie Benutzern eine Auswahl an Optionen bieten möchten, die ausgewählt werden können, z. B. „Zum Erhalt unseres Newsletters ankreuzen“ oder „Senden Sie mir von Zeit zu Zeit Sonderangebote“. Sie können beliebig viele Kontrollkästchenfelder hinzufügen, und Benutzer können alle oder einige der Optionen auswählen. Wenn Sie die Auswahl der Benutzer auf eine einzige Option beschränken möchten, verwenden Sie stattdessen das Optionsfeld.

Das Kontrollkästchen-Feld bietet einige zusätzliche Optionen im Stil-Panel. Sie können einen Standardstatus von „Ein“ oder „Aus“ wählen. Sie können angeben, ob es aktiviert ist oder nicht und ob es sich um ein Pflichtfeld handelt, wie z. B. eine Zustimmung zu den Allgemeinen Geschäftsbedingungen. Das Aussehen des Kontrollkästchens kann durch Auswahl der Option „Benutzerdefiniert“ angepasst werden oder es kann automatisch durch den Browser des Benutzers gestaltet werden. Schließlich können Sie die Größe des Kontrollkästchens auswählen.

Das Optionsfeld
Diese Option sollten Sie verwenden, wenn Sie die Auswahl des Benutzers auf eine Option einer vorgegebenen Anzahl beschränken möchten. Sie können beispielsweise ein Optionsfeld verwenden, um Benutzern die Auswahl einer Farbe oder Größe für ein bestelltes Produkt zu ermöglichen. Dazu fügen Sie Ihrem Formular eine Reihe von Optionsfeldern hinzu – eines für jede Auswahlmöglichkeit. Anschließend weisen Sie jedem Button einen identischen Variablennamen zu, z. B. „Farbe“. Dadurch werden die Optionsfelder gruppiert, sodass nur eine der Optionen ausgewählt werden kann. Im Stil-Bereich können Sie auch eine Standardeinstellung festlegen, die automatisch ausgewählt wird, wenn Benutzer keine der Optionen auswählen. Hier sehen Sie ein Beispiel für ein Farbauswahlfeld, bei dem Grün als Standard festgelegt ist.

Die Optionsauswahl

Dies ist eine weitere Form der Mehrfachauswahl für Benutzer. In diesem Fall werden die Auswahlmöglichkeiten als Dropdown-Liste mit Optionen angezeigt, aus denen Benutzer auswählen können. Wenn das Optionsauswahlelement zur Seite hinzugefügt wird, werden im Stil-Panel einige zusätzliche Optionen angezeigt. Im ersten Abschnitt können Sie Ihre Liste mit Optionen erstellen – klicken Sie einfach auf die Schaltfläche „Hinzufügen“, um weitere Auswahlmöglichkeiten hinzuzufügen. Sie bearbeiten jede Optionsbezeichnung, indem Sie einfach 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. Wenn Sie keinen Wert hinzufügen, wird nur die Optionsbezeichnung als Teil des Formularergebnisses gesendet.

Es gibt auch eine Schaltfläche, mit der Sie eine Liste von Optionen importieren können. Dies wird in der Regel verwendet, wenn Sie beispielsweise eine Länderauswahl als Teil einer Adressübermittlung in einem Formular wünschen. Bei über 180 Ländern auf der Welt wäre es natürlich sehr zeitaufwendig, eine solche Liste von Grund auf neu zu erstellen. Sie können jedoch eine Liste von Ländern im Nur-Text-Format von vielen Websites herunterladen. Diese Listen können mithilfe der Importfunktion direkt in Sitely importiert werden.

Wenn Sie dies selbst ausprobieren möchten, finden Sie hier einen Link zum Herunterladen einer Ländertextdatei.

Das Slider-Element

Hierbei handelt es sich um einen einfachen Schieberegler, mit dem Benutzer einen Wert durch Ziehen eines Schiebereglers auswählen können. Er kann für viele Zwecke verwendet werden, aber als Beispiel können wir den Schieberegler als Möglichkeit zur Bestellung einer bestimmten Menge eines Produkts verwenden. In unserem Beispiel unten wurde der Schieberegler so eingestellt, dass eine Menge zwischen 1 und 10 ausgewählt werden kann, wobei die Standardmenge 2 ist.

Wenn Sie ein Smart Field einfügen, wird ein Optionsfeld angezeigt. In diesem Fall ist die gewünschte Option „Rechner“. Dadurch wird ein Smart Field „Rechner“ in das Textfeld eingefügt – es sieht so aus.

Die Werte werden im Stil-Panel durch Festlegen des Mindestwerts, des Höchstwerts, des Schritts und des Anfangswerts des Schiebereglers eingerichtet. Wir geben dem Schieberegler auch einen Formularvariablennamen – in diesem Beispiel verwenden wir die Variable „quantity“. Wenn das Formular gesendet wird, wird in der E-Mail der Variablenname gefolgt vom vom Benutzer ausgewählten Wert angezeigt. Dies sieht in etwa so aus: „quantity: 2“.

Um den Benutzern anzuzeigen, welche Menge ausgewählt wurde, würden wir auch ein Textfeld rechts neben dem Schieberegler hinzufügen, um die ausgewählte Menge anzuzeigen. Dies wird durch die Verwendung eines Smart-Feldes im Textfeld erreicht – Sie sehen die Option im Stil-Panel, wenn Ihr Textfeld auf der Leinwand ausgewählt ist – es sieht so aus.

Klicken Sie auf das Smart Field „Rechner“, um seinen Wert festzulegen. Um Ihnen zu helfen, durchsucht Sitely Ihre Seite und findet alle verfügbaren Variablen, die Sie in Ihrem berechneten Feld verwenden können. In diesem Fall hat Sitely unsere variable Menge gefunden, die mit dem Schieberegler verbunden ist. Dies ist der Wert, den wir neben dem Schieberegler anzeigen müssen, also ist dies die gewählte Option. Wenn der Schieberegler nun bewegt wird, wird dem Benutzer der entsprechende Wert angezeigt.

Hinweis: In der Benutzerdokumentation gibt es einen ganzen Abschnitt über intelligente Felder und ihre Verwendung. Wir sind hier nur auf das Thema eingegangen, um die Relevanz intelligenter Elemente im Zusammenhang mit diesem speziellen Formularelement zu zeigen.

Das Element selbst besteht aus 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 Benutzer mit den Formularergebnissen hochladen können. Sie können die Art der zulässigen Dateien sowie die Dateigrößenbeschränkung angeben.

Das Element „Dateianhang“

Hierbei handelt es sich um ein einfaches Element zum Hochladen von Dateien, mit dem Benutzer auf ihrem Computer nach einer Datei suchen und diese an das Formular anhängen können.

File

Select…

Das Button-Element
Mit diesem Element wird die Übermittlung Ihres Formulars gesteuert. Obwohl wir in der Dokumentation einen ganzen Abschnitt über Links und Aktionen bei Mausklick haben, werden wir uns kurz mit den Optionen befassen, die speziell für die Übermittlung von Formulardetails zur Verfügung stehen.

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 sendet sie an Ihren Server, um sie an eine bestimmte E-Mail-Adresse weiterzuleiten. Alle Aktionen werden über das Stil-Panel gesteuert, wenn Sie diese Übermittlungsmethode auswählen.

 

Optionen für die Formularübermittlung

Als Erstes müssen Sie Ihrer Schaltfläche eine Beschriftung geben. In der Regel ist dies das Wort „Senden“, aber es kann auch ein beliebiges anderes Wort sein, das zu Ihrem Formular passt.

Die Aktion bei Klick ist „Kontaktformular per E-Mail senden“. Die E-Mail-Überschrift kann alles sein, was Ihnen hilft, die E-Mail zu identifizieren, wenn sie in Ihrem Postfach ankommt. Die Absender-E-Mail-Adresse sollte eine E-Mail-Adresse auf Ihrem Server sein. In unserem Beispiel ist es eine noreply-E-Mail-Adresse, aber es kann auch eine tatsächliche E-Mail-Adresse sein, die Sie täglich verwenden, wenn Sie dies bevorzugen. Es ist sehr wichtig, eine domainspezifische E-Mail-Adresse hinzuzufügen, da einige Webhosting-Unternehmen möglicherweise keine E-Mails verarbeiten, die anscheinend von einem anderen Server stammen – wie z. B. Gmail.

Die E-Mail-Adresse des Empfängers ist die Adresse, an die Sie Ihre Antworten erhalten möchten. Auch hier sollte es sich idealerweise um eine E-Mail-Adresse handeln, die mit Ihrer Domain verknüpft ist, um Zustellprobleme durch Spam-Filter oder Webhost-Richtlinien zu vermeiden. Der Betreff ist die Information, die in der Betreffzeile der Antworten erscheinen soll, die Sie erhalten. 

Als Nächstes haben Sie zwei Optionen. Die erste ist „E-Mail über Webserver“, die andere „Benutzerdefinierten SMTP-Server verwenden“. In den meisten Fällen funktioniert die erste Option einwandfrei. Die Sendmail-Funktion Ihres Webhosts verarbeitet die E-Mail und leitet sie an Sie weiter. Es gibt jedoch immer mehr Webhosts, die es vorziehen, dass Sie Ihre Formulare über ein korrekt konfiguriertes E-Mail-Konto verarbeiten lassen, das Ihnen gehört und das Sie kontrollieren. Im Wesentlichen ist dies wie das Senden einer E-Mail über Ihr normales E-Mail-Konto. Wenn Ihr Hosting-Unternehmen darauf besteht, dass Sie diese Option verwenden, können Sie die Anmeldedaten für das E-Mail-Konto nach Auswahl der SMTP-Option in das Stil-Panel eingeben.


Dankeseite

Dies ist die letzte Information, die Sitely benötigt, um Ihr Formular erfolgreich zu übermitteln. Ihr Formular kann nur gesendet werden, wenn Sie eine Dankeseite haben. Dies ist die Seite, zu der Benutzer weitergeleitet werden, nachdem sie ein Formular gesendet haben. Sie versichert den Benutzern nicht nur, dass ihre Informationen gesendet wurden, sondern bietet Ihnen auch die Möglichkeit, nach der Übermittlung zusätzliche Links zu anderen relevanten Seiten Ihrer Website bereitzustellen.

Gesammelte Formularelemente

In diesem Abschnitt des Stil-Panels werden alle Formularelemente aufgelistet, die Sitely auf Ihrer Seite findet, und Sie haben die Möglichkeit, sie als Teil dieser Schaltfläche zum Senden zu übermitteln oder einige davon über eine andere Schaltfläche zu senden. Unabhängig von Ihrer Wahl aktivieren Sie einfach die Kontrollkästchen für alle Formularelemente, die Sie übermitteln möchten. Dies ist eine wirklich nützliche Funktion von Sitely, da sie eine große Flexibilität bei der Erstellung von Seiten zur Informationserfassung ermöglicht.

In den meisten Webentwicklungsanwendungen werden Formulare als separate Elemente erstellt, in denen alle Formularfelder enthalten sein müssen. Dies führt zum normalen Stil der meisten Webformulare als ein Feld mit Feldern und einer Schaltfläche zum Senden. Während die meisten Menschen Formulare auf diese Weise entwerfen, gibt es Anwendungsszenarien, in denen dies möglicherweise nicht die ideale Lösung ist. Beispielsweise kann ein Pädagoge Online-Prüfungen oder Kursarbeiten für Schüler festlegen. In diesem Fall möchte der Lehrer das Kursmaterial möglicherweise ähnlich wie gedruckte Kursunterlagen präsentieren. Es kann mit einer Themenübersicht und einigen Beispielen beginnen, gefolgt von einigen Übungen, die die Schüler bearbeiten müssen. In diesem Szenario würde der Schüler die Online-Seite durcharbeiten, Fragen beantworten und die Übungen im Laufe der Zeit abschließen. Wenn er das Ende der Seite erreicht hat, kann er seinen Namen und andere Details hinzufügen und seine Arbeit mit einem einfachen Button einreichen.

Da Sitely die gesamte Seite nach allen Formularelementen durchsucht, die die Schüler auf ihrer Reise ausfüllen können, können diese gesammelt und als Ergebnis-E-Mail an den Lehrer gesendet werden. Dieser vertraute Ansatz für Schulungsmaterial ist bei anderen Web-Buildern oft nur schwer zu erreichen, ohne speziell codierte Seiten zu haben, aber mit Sitely ist es ein Kinderspiel. 


Erweiterte Formularübermittlung  

In manchen Fällen möchten Sie vielleicht einen Formularprozessor eines Drittanbieters verwenden oder ein benutzerdefiniertes Formularskript auf Ihrem eigenen Server verwenden. In diesen Fällen können Sie die Option „Erweiterte Formularübermittlung“ verwenden. Damit können Sie die URL des Formularverarbeitungsdienstes oder -skripts eingeben und eine Übermittlungsmethode (Abrufen oder Posten) festlegen. Diese Optionen erhalten Sie vom Dienstanbieter oder Skriptentwickler. Geben Sie einfach die Informationen in diesem Abschnitt ein und wählen Sie die Formularelemente aus, die Sie übermitteln möchten.

Bitte melden Sie uns Mängel, die Ihnen in dieser Dokumentation auffallen, damit wir sie schnellstmöglich beheben können!

Aktualisiert für Sitely 5.6

Copyright Crinon SRL 

This website makes use of cookies.

Please see our privacy policy for details.

It’s Okay

Deny