Verwenden von Formular-Widgets in Adobe Muse

Öffnen Sie Adobe Muse. Doppelklicken und öffnen Sie die Seite, der Sie das Kontaktformular hinzufügen möchten, in der Entwurfsansicht. 

Öffnen Sie das Widgets-Bibliothek-Bedienfeld (indem Sie „Fenster“ > „Widgets-Bibliothek“ wählen). Klicken Sie auf „Formulare“ und wählen Sie dann einen der beiden Formulartypen aus:

• Kontakt mit Details
• Einfacher Kontakt

Ziehen Sie das Kontakt-Widget auf die Seite.

Nachdem Sie ein Formular auf eine Seite gezogen haben, klicken Sie mit dem Auswahlwerkzeug einmal auf das Formular, um es auszuwählen und positionieren Sie es anschließend an der gewünschten Position.

Da das Widget „Formulare“ responsiv ist, können Sie eine Vorschau aufrufen und das Verhalten dieses Widgets bei diversen Bildschirmgrößen überprüfen. Wenn Sie die Position des Widgets oder die Optionen für Verankerung und Größenänderung für die Felder des Kontaktformulars ändern möchten, müssen Sie zuerst einen Haltepunkt an der gewünschten Position einfügen. Dann müssen Sie doppelklicken und das Feld auswählen, das Sie verankern oder dessen Größe Sie ändern möchten. Sie können entweder „Keine“ oder „Responsive Breite“ als Option für die Größenänderung wählen.

Wenn Sie Ihr Widget „Formulare“ an einer bestimmten Position auf Ihrer Seite verankern möchten, wählen Sie die Option „Verankern“ aus der Symbolleiste oben.

Beim Entwerfen einer responsiven Website haben Sie die Möglichkeit, ein bestimmtes Kontaktformularfeld an einer festen Position zu verankern. Dazu fügen Sie einen Haltepunkt hinzu. Wenn Ihre Website in der diesem Haltepunkt entsprechenden Bildschirmgröße angezeigt wird, erscheint das Kontaktformularfeld an der Position verankert, die Sie im nächsten Schritt angeben werden.

Doppelklicken und wählen Sie das Feld aus, das verankert werden soll, und wählen Sie dann die erforderliche Verankerungsoption aus.

Sie können auch die erforderliche Größenänderungs-Option für Ihr Formular-Widget und für die einzelnen Formularfelder auswählen. Wählen Sie das Element aus, für das Sie die Größenänderungs-Eigenschaften festlegen möchten, und wählen Sie die Größenänderungs-Option aus dem Kontextmenü oben auf der Seite aus.

Als Größenänderungs-Option für Kontaktformulare können Sie entweder „Keine“ oder „Responsive Breite“ auswählen.

Verwenden Sie das Auswahlwerkzeug, um das gesamte Kontaktformular-Widget auszuwählen. Während das gesamte Formular ausgewählt ist, zeigt der Auswahlindikator in der oberen linken Ecke des Steuerungsbedienfelds den Text „Formular: Normal“ an.

Der Link „Normal“ ist ein Menü mit vier möglichen Status, so wie Menüelemente oder Schaltflächen:

• Normal
• Sendevorgang läuft
• Senden erfolgreich
• Sendefehler

Wenn Sie das Formular anpassen möchten, während es in den verschiedenen Status angezeigt wird, können Sie den Namen des entsprechenden Status aus diesem Menü auswählen.

Während dieser Status ausgewählt ist, können Sie das Erscheinungsbild der Fehlermeldung anpassen. So können Sie beispielsweise den Textinhalt ändern oder die Fehlertextfarbe von rot in blau ändern.

Wählen Sie wieder den Status „Normal“ aus dem Auswahlindikatormenü aus.

Während das gesamte Formular noch im Status „Normal“ ausgewählt ist, klicken Sie auf den blauen Pfeil, um das Menü „Optionen“ aufzurufen. Die Optionen im Menü „Optionen“ wirken sich auf das gesamte Widget aus:

Standardmäßig wird das Feld „Formularname“ mit dem Namen der aktuellen Seite ausgefüllt. Sie können den Namen bei Bedarf ändern.

Wenn die gesendeten Formulare an mehrere E-Mail-Adressen weitergeleitet werden sollen, können Sie die Adressen (durch Semikolons getrennt) in das Feld „E-Mail an“ eingeben.

Das Verhalten nach dem Formularversand wird durch die im Menü „Nach dem Versand“ ausgewählte Option festgelegt. Wählen Sie eine der folgenden Optionen im Menü „Optionen“ aus:

• Auf aktueller Seite bleiben (Standard)
• Mit Datei verknüpfen (Laden Sie eine Datei hoch, die nach dem Formularversand verknüpft wird.)

Es gibt zwei Arten neuer Formularelemente, die Sie hinzufügen können:

Standardfelder

Zu den Standardfeldern zählen:

• E-Mail
• Unternehmen
• Name
• Telefon (geschäftlich)
• Handy
• Geschäftsanschrift
• Telefon (privat)
• Website
• Privatanschrift
• Captcha

Aktivieren Sie zum Hinzufügen beliebiger Felder das jeweils dazu gehörende Kontrollkästchen.

Klicken Sie zum Hinzufügen benutzerdefinierter Felder für Ihre Kontaktformulare auf die Schaltfläche „+“ neben dem benutzerdefinierten Feld, das Sie hinzufügen möchten, und geben Sie dann in der Entwurfsansicht die Beschriftung für das neue Formularfeldelement ein, das Sie dem Formular hinzufügen.

Folgende Arten benutzerdefinierter Felder können Sie einem Kontaktformular hinzufügen:

• Text mit einer Zeile: Einzeilige Textfelder sind für kürzeren Text bestimmt, z. B. das Alter des Besuchers oder die Postleitzahl.
• Text mit mehreren Zeilen: Fügen Sie mehrzeilige Textfelder hinzu, wenn der Besucher mehr Informationen eingeben können soll, z. B. einen Kommentar oder eine Frage.
• Kontrollkästchen
• Kontrollkästchengruppe
• Optionsfeldgruppe

Klicken Sie auf das gesamte Formular, um das Widget „Formulare“ als Ganzes auszuwählen. Klicken Sie zur Auswahl eines einzelnen Elements innerhalb des Widgets „Formulare“ doppelt auf das betreffende Element und wählen Sie es aus.

Ob das gesamte Widget oder ein einzelnes Element ausgewählt ist, können Sie durch Aufrufen des Auswahlindikators erfahren. Der Auswahlindikator zeigt „Formular“ an, wenn Sie das gesamte Widget auswählen, und „Texteingabe“ bei Auswahl eines bestimmten Felds.

Wenn ein Texteingabe-Formularelement ausgewählt ist und Sie auf die blaue Pfeilschaltfläche klicken, um das Menü „Optionen“ aufzurufen, sind entsprechende Einstellungen für das ausgewählte Element verfügbar.

Während ein Texteingabeelement ausgewählt ist, können Sie im Menü „Optionen“ angeben, ob das Feld erforderlich ist. Sie können auch festlegen, ob im Feld beschreibender Text angezeigt werden soll, um dem Benutzer einen Hinweis dazu zu geben, wie ein Feld ausgefüllt werden soll.

Aktivieren oder deaktivieren Sie im Bereich „Teile“ die Kontrollkästchen, um den Beschriftungs- und Nachrichtentext des Felds anzuzeigen oder auszublenden.

Während ein Formularelement ausgewählt ist, zeigt der Auswahlindikator den Namen des Elements sowie ein Statusmenü an, auf das Sie im Steuerungsbedienfeld zugreifen können (falls zutreffend). Das Menü im Auswahlindikator erleichtert Ihnen die Auswahl des gewünschten Status, während Sie Formularelemente bearbeiten.

Während ein Status ausgewählt ist, können Sie das Flächen- oder das Steuerungsbedienfeld verwenden, um das Erscheinungsbild zu ändern.

Die folgenden Status können für Formularfelder konfiguriert werden:

• Leer
• Nicht leer
• Rollover
• Fokus
• Fehler

Die Status einer Sendeschaltfläche werden angezeigt, wenn die Sendeschaltfläche ausgewählt ist.

Sie können die folgenden Status für die Schaltfläche „Senden“ konfigurieren:

• Normal
• Rollover
• Maustaste gedrückt
• Sendevorgang läuft

Beachten Sie, dass die Status eines gesamten Formulars angezeigt werden, wenn das gesamte Formular ausgewählt ist:

• Normal
• Sendevorgang läuft
• Senden erfolgreich
• Sendefehler

Verwenden Sie das Auswahlwerkzeug, um das gesamte Formular oder das Formularelement auszuwählen, das Sie aktualisieren möchten.

Wenn Sie beispielsweise den Text ändern möchten, der auf der Sendeschaltfläche angezeigt wird, können Sie direkt auf die Sendeschaltfläche des Kontaktformulars doppelklicken. Den Text innerhalb der Sendeschaltfläche können Sie durch Textauswahl des Sendetextes mithilfe des Textwerkzeugs ändern. Löschen Sie den Text und geben Sie ein neues Wort ein. Sie können auch über das Menü im Auswahlindikator verschiedene Status der Sendeschaltfläche auswählen und den Text für die verschiedenen Status ändern.

Nach Auswahl des Formularelements können Sie dessen Erscheinungsbild anpassen.

Beispielsweise können Sie doppelklicken und das Feld „Name“ auswählen. Zum Auszuwählen der Texteingabe für das Feld „Name“ können Sie dann die Optionen im Steuerungs- oder im Flächenbedienfeld zur Einstellung der Hintergrundfarbe des Textfelds verwenden.

Über die Optionen im Flächenbedienfeld können Sie die Fläche einfarbig oder mit einem farbigen Verlauf einstellen. Sie können auch ein Hintergrundbild für die Fläche auswählen und die Optionen für Anpassung und Position festlegen. Zur Anpassung der Transparenz der Fläche können Sie Deckkrafteinstellung ändern.

Beachten Sie, dass beim Bearbeiten eines Felds alle Felder aktualisiert werden, außer Sie deaktivieren die standardmäßig aktivierte Option „Gemeinsam bearbeiten“. Diese Funktion ermöglicht ein einheitliches Design des Formulars und spart Zeit. Sie können jedoch jederzeit das gesamte Formular auswählen, auf die blaue Pfeilschaltfläche klicken, um das Menü „Optionen“ aufzurufen, und die Option „Gemeinsam bearbeiten“ deaktivieren, wenn Sie die Felder einzeln formatieren möchten.

Klicken Sie auf die Schaltfläche „Veröffentlichen“ und anschließend auf „OK“.

Ein Browserfenster wird geöffnet und zeigt die veröffentlichte Site an.

Besuchen Sie die Seite mit dem Kontaktformular und interagieren Sie mit der Live-Site. Testen Sie, was passiert, wenn Sie das Formular senden, ohne Inhalt in die erforderlichen Felder einzugeben. Prüfen Sie Erscheinungsbild und Funktion des Formulars. Achten Sie insbesondere auf die Anzeige von Fehlermeldungen.

Wenn Sie festgestellt haben, dass das Formular wie erwartet angezeigt wird und funktioniert, senden Sie das Formular mit einer Platzhalternachricht. Rufen Sie Ihre E-Mails ab und vergewissern Sie sich, dass Sie die Nachricht in Ihrem Posteingang erhalten haben.

Klicken Sie in der linken Seitenleiste in der Kategorie „Berichte“ auf die Option „Webformularnutzung“. Das Diagramm zeigt die letzten Formularaktivitäten in Bezug auf den Formularversand an.

Mithilfe der Berichte im Dashboard erhalten Sie eine Reihe von Informationen über die Besucher Ihrer Website. Sie können Trends verfolgen, um zu erfahren, wann der meiste Datenverkehr auf der Site auftritt, und die Leistung der Formulare auf der Site testen.

Diese Informationen sind hilfreich, wenn Sie entscheiden, wann Werbeaktionen hinzugefügt oder die Inhalte der Site aktualisiert werden sollen. Außerdem erleichtern sie die Interaktion mit den Besuchern, da sie Nachrichten und Feedback an Sie senden können. So können Sie einen Dialog mit den Besuchern führen, anstatt nur Informationen in einem einseitigen Kommunikationsfluss auf Ihrer Site anzuzeigen.

Weitere Informationen zur Erstellung von Sites mit Muse erhalten Sie auf der Adobe Muse-Seite mit Lehrgängen. Besuchen Sie auch die Seite mit der Site des Tages, um Beispiele für neue mit Muse erstellte Webdesigns zu sehen.

Wählen Sie in Adobe Muse „Fenster“ > „Widgets-Bibliothek“ >„Formulare“. Ziehen Sie und fügen Sie ein einfaches oder detailliertes Kontaktformular hinzu.

Wählen Sie im Optionenbedienfeld in der Captcha-Dropdown-Liste die Option „reCAPTCHA v2“ aus.

Es wird empfohlen, dass Sie reCAPTCHA v2 auswählen, da Google reCAPTCHA Version 1 nicht mehr unterstützt.

Das reCAPTCHA-Feld (Bildüberprüfung) wurde jetzt dem Formular hinzugefügt.

Konfigurieren Sie reCAPTCHA mit den folgenden Optionen:

• Öffentlicher Schlüssel: Wird in dem JavaScript-Code verwendet, der Ihren Benutzern bereitgestellt wird. Informationen über das Generieren von reCAPTCHA-Schlüsseln finden Sie unter Erstellen öffentlicher und privater Schlüssel.
• Privater Schlüssel: Wird für die Kommunikation zwischen dem Server Ihrer Website und dem Google-Server verwendet. Es wird empfohlen, den privaten Schlüssel sicher zu speichern und ihn nicht weiterzugeben oder öffentlich mitzuteilen. Wenn er einmal verloren gegangen ist, kann der private Schlüssel von Google nicht wiederhergestellt werden. Informationen über das Generieren von reCAPTCHA-Schlüsseln finden Sie unter Erstellen öffentlicher und privater Schlüssel.
• Eingabe erforderlich: Geben Sie an, ob reCAPTCHA obligatorisch ist. Die Option ist nicht editierbar und standardmäßig ausgewählt.
• Farbschema: Geben Sie an, ob Sie das helle oder dunkle Farbschema für das reCAPTCHA-Feld auswählen möchten.
• Typ: Geben Sie an, ob Bildüberprüfung oder Audio-Wiedergabe für die reCAPTCHA-Überprüfung aktiviert werden sollen. Mit der Audio-Wiedergabe können blinde Benutzer oder Benutzer mit Sehschwäche einfach durch Ihre Website navigieren.
• Größe: Geben Sie an, ob die reCAPTCHA-Größe normal oder kompakt sein soll.
  
• Beschriftung: Aktivieren Sie dieses Kontrollkästchen, um eine Beschriftung des reCAPTCHA-Felds anzuzeigen. Sie können dieses Feld verwenden, um dem reCAPTCHA-Bereich des Formulars einen Titel hinzuzufügen.
• Meldungstext: Aktivieren Sie dieses Kontrollkästchen, um Meldungen anzuzeigen.

Öffnen Sie die Google-Admin-Konsole in einem Browser. Klicken Sie in der Google-Admin-Konsole auf „Sign Up Now“ (Jetzt anmelden), um sich bei Ihrem Google-Konto anzumelden, oder registrieren Sie sich über die Option zum Einrichten eines Benutzerkontos.

Nach der Anmeldung werden Sie zur Google reCAPTCHA-Startseite weitergeleitet.

Klicken Sie auf die Schaltfläche zum Abrufen von reCAPTCHA oben auf der Seite.

Geben Sie den Domänennamen Ihrer Website in das Domain-Feld ein. Geben Sie nicht die vollständige URL der Website an, sondern nur den Domänennamen. Beispielsweise mysamplemusewebsite.com.

Klicken Sie auf die Schaltfläche zum Registrieren, um eindeutige öffentliche und private Schlüssel für Ihre Website zu erzeugen.

Beachten Sie den öffentlichen Schlüssel (Site-Schlüssel) und den privaten Schlüssel („Geheimschlüssel“), die generiert werden.

Kopieren Sie den Site-Schlüssel und den Geheimschlüssel in die entsprechenden Felder für öffentliche und private Schlüssel in Adobe Muse.

Stellen Sie sicher, dass Sie die Schlüssel vollständig kopieren und keines der Zeichen auslassen.

Sobald Sie ein Schlüsselpaar für eine Domäne erhalten haben, wird dasselbe Paar in allen Formularen auf dieser Adobe Muse-Website freigegeben. Durch Ändern eines werden automatisch alle geändert. Planen Sie zudem einen erneuten Export aller Seiten und der entsprechenden PHP-Skripte. Wenn Sie ein Drittanbieter-Tool verwenden, um Dateien mittels FTP auf den Server zu übertragen, stellen Sie sicher, dass Sie alle HTML- und PHP-Dateien (PHP-Dateien befinden sich im Ordner „scripts/“) auf dem Server kopieren und nicht nur die aktualisierten.

Nutzen Sie die Seitenvorschau im Browser oder in Adobe Muse zum Testen des reCAPTCHA.