Kernkomponenten für adaptive Formulare
Die Kernkomponenten für adaptive Formulare bestehen aus 30 BEM-kompatiblen Open-Source-Komponenten, die auf der Grundlage der Adobe Experience Manager-WCM-Kernkomponenten basieren. Sie wurden speziell für die Erstellung von adaptiven Formularen entwickelt. Hierbei handelt es sich um Formulare, die sich an die Geräte-, Browser- und Bildschirmgröße der Benutzenden anpassen.
Diese Komponenten können verwendet werden, um außergewöhnliche Datenerfassungs- und Registrierungserlebnisse zu schaffen, indem sie eine breite Palette von Formularfeldoptionen bereitstellen, darunter Textfelder, Kontrollkästchen, Dropdown-Menüs und mehr. Sie beinhalten auch Funktionen wie Validierung, konditionelle Logik und responsives Design, die zum Erstellen benutzerfreundlicher Formulare verwendet werden können.
Da es sich bei diesen Komponenten um Open-Source-Elemente handelt, können Entwickler und Entwicklerinnen die Komponenten einfach erweitern und an die spezifischen Anforderungen ihrer Organisation anpassen. Zusätzlich basieren diese Komponenten auf der BEM-Methode, was sicherstellt, dass sie skalierbar und wartbar sind.
Funktionen
Produktionsbereit | Die Kernkomponenten für adaptive Formulare umfassen 24 zuverlässige WCM-Komponenten. |
Cloud-fähig | Verfügbar für AEM Forms as a Cloud Service. |
Vielseitig | Die Komponenten bieten allgemeine Konzepte, mit denen Autoren und Autorinnen von Formularen nahezu jedes beliebige Layout zusammenstellen können. |
Konfigurierbar | Die Inhaltsrichtlinien auf Vorlagenebene definieren, welche Funktionen verwendet oder nicht verwendet werden dürfen. |
Barrierefrei | Sie bieten ARIA-Attribute, unterstützen die Tastaturnavigation und Text für Hilfstechnologien wie Bildschirmlesehilfen. |
Designbar | Die Komponenten implementieren das Stilsystem und das Markup folgt den BEM-CSS-Konventionen. |
Anpassbar | Verschiedene Muster ermöglichen eine einfache Anpassung, von der Bearbeitung des HTML-Codes bis hin zur Wiederverwendung erweiterter Funktionen. |
Versionierung | Die Versionierungsrichtlinie stellt sicher, dass die Kernkomponenten Ihre Website nicht beschädigen, wenn Funktionen verbessert werden, die sich auf Sie auswirken könnten. |
Open Source | Wenn etwas nicht so ist, wie es sein sollte, verbessern Sie es. |
Vorteile
Die Datenerfassung ist für die Lead-Generierung und die Registrierung von entscheidender Bedeutung, und die Kernkomponenten von Adaptive Forms bieten eine leistungsstarke Lösung für die Erstellung von Formularen, die für die Datenerfassung optimiert sind. Einige der Gründe für die Verwendung von Kernkomponenten zum Erstellen dieser Customer Experiences sind:
-
Verfügbarkeit auf GitHub: Die Kernkomponenten für adaptive Formulare in AEM sind Open-Source-Komponenten und auf GitHub verfügbar. Darüber hinaus steht eine umfassende Dokumentation bereit. Dies hilft Entwicklern, die Komponenten und ihre Funktionsweise zu verstehen, und unterstützt sie bei der Entwicklung. Die Website aemcomponents.dev ist auch eine wertvolle Ressource, über die Entwickler die Komponenten in Verwendung sehen und auf die Dokumentation zugreifen können.
-
BEM-Modell für die Stilgestaltung: Für die Stilgestaltung der Kernkomponenten wird das BEM-Modell (Block Element Modifier) verwendet, bei dem es sich um eine bewährte und häufig verwendete Methode für die Organisation von CSS handelt. Dadurch wird es für Entwickler und Entwicklerinnen einfacher, die Organisation der Stile zu verstehen und diese an ihre spezifischen Anforderungen anzupassen.
-
Keine Abhängigkeit von Bibliotheken von Drittanbietern: Einer der Vorteile der Kernkomponenten besteht darin, dass sie keine Abhängigkeit von JavaScript-Bibliotheken von Drittanbietern, einschließlich JQuery und Underscore, aufweisen. Dadurch können die Komponenten mit weniger Aufwand schneller erstellt und einfacher in eine vorhandene AEM-Implementierung integriert werden.
-
Fokus auf Leistung und Barrierefreiheit: Die Kernkomponenten werden unter Berücksichtigung von Leistung und Barrierefreiheit erstellt, was sich in ihren hohen Google Lighthouse- und Web-Vitalwerten widerspiegelt. Dies erleichtert Entwicklern und Entwicklerinnen das Erstellen barrierefreier und leistungsstarker Web-Seiten, die in der heutigen digitalen Landschaft immer wichtiger werden.
-
Formularkomponenten in Sites 30-Vorlage und Designs: Die Kernkomponenten bieten Unterstützung für Formularkomponenten in der Sites 30-Vorlage und den Designs, wodurch Entwickende Formulare in AEM einfacher erstellen und anpassen können.
-
Einfachere Gestaltung: Die Kernkomponenten sind einfacher zu gestalten als ihre Gegenstücke, die Foundation-Komponenten. Der Design-Erstellungsprozess ähnelt jenem von Sites und bietet die Möglichkeit, das Design/die CSS der übergeordneten Sites-Seite zu übernehmen. Darüber hinaus vereinfacht das BEM-Modell die Gestaltung und Veränderung von Stilen.
-
Barrierefreiheit: Kernkomponenten in adaptiven Formularen unterstützen Standards und Richtlinien für die Barrierefreiheit, um sicherzustellen, dass Formulare von Menschen mit Behinderungen verwendet werden können, einschließlich solcher, die Hilfstechnologien wie Bildschirmlesehilfen verwenden.
-
Versionierung: Sie können mehrere Versionen eines adaptiven Formulars auf der Basis von Kernkomponenten erstellen und verwalten, an kollaborativen Diskussionen teilnehmen, indem Sie Kommentare abgeben, und Anmerkungen zu bestimmten Formularkomponenten hinzufügen, um die Erfahrung bei der Formularerstellung insgesamt zu verbessern.
Verfügbare Komponenten: Aufschlüsselung nach Komponententyp
Die aktuelle Version von AEM Forms enthält die folgenden Kernkomponenten: Foundation-Komponenten und Formularblock-Komponenten (Edge Delivery Services).
Komponenten | Foundation-Komponenten | Kernkomponenten | Formularblock-Komponenten | Zusätzliche Informationen |
---|---|---|---|---|
Adobe Sign Block | ✔️ | Die Adobe Sign-Integration ist nur für Foundation-Komponenten verfügbar. | ||
Akkordeon | ✔️ | ✔️ | Für Foundation-Komponenten können Sie das Akkordeon-Layout in den Eigenschaften der Bedienfeldkomponenten konfigurieren. | |
Adaptives Formularfragment | ✔️ | ✔️ | Für Foundation-Komponenten können Sie aus dem Asset-Browser ein Fragment hinzufügen. | |
Adaptives Formular – reCAPTCHA | ✔️ | ✔️ | ✔️ | Verwenden Sie für Foundation-Komponenten die Captcha-Komponente, um Google reCaptcha zu einem Formular hinzuzufügen. |
Schaltfläche | ✔️ | ✔️ | ✔️ | |
Diagramm | ✔️ | |||
Kontrollkästchen | ✔️ | ✔️ | ||
Kontrollkästchengruppe | ✔️ | ✔️ | ✔️ | Verwenden Sie für Foundation-Komponenten die Kontrollkästchen-Komponente, um mehrere Kontrollkästchen hinzuzufügen |
Feld zur Datumseingabe | ✔️ | Für Kernkomponenten verwenden Sie die Komponente Datumsauswahl. Sie können auch die separaten Komponenten Textfeld oder numerisches Feld hinzufügen, um den Tag, den Monat und das Jahr zu erfassen. | ||
Datumsauswahl | ✔️ | ✔️ | ✔️ | |
Dropdown-Liste | ✔️ | ✔️ | ✔️ | |
✔️ | ✔️ | ✔️ | ||
Dateianhang | ✔️ | ✔️ | ✔️ | |
Auflistung der Dateianhänge | ✔️ | |||
Fußzeile | ✔️ | ✔️ | ✔️ | |
Fußnoten-Platzhalter | ✔️ | |||
Formular-Container | ✔️ | ✔️ | ✔️ | Verwenden Sie für Foundation-Komponenten die Stamm-Bedienfeld-Komponente. |
Formulartitel | ✔️ | ✔️ | Verwenden Sie für Foundation-Komponenten die Titelkomponente. | |
hCaptcha | ✔️ | ✔️ | Bei Foundation-Komponenten und auf Foundation-Komponenten basierenden Formularen können Sie Ihre adaptiven Formulare mit hCaptcha verbinden. | |
Kopfzeile | ✔️ | ✔️ | ✔️ | |
Horizontale Registerkarten | ✔️ | ✔️ | Für Foundation-Komponenten können Sie das Layout der Registerkarten oben (horizontale Registerkarten) in den Eigenschaften der Bedienfeldkomponenten konfigurieren. | |
Bild | ✔️ | ✔️ | ✔️ | |
Schaltfläche „Weiter“ | ✔️ | ✔️ | Verwenden Sie die Assistentenkomponente für die Schaltflächen „Weiter“ und „Zurück“, um zwischen mehreren Bedienfeldern zu wechseln. | |
Numerisches Feld | ✔️ | ✔️ | ✔️ | |
Numerische Schritte | ✔️ | |||
Panel | ✔️ | ✔️ | ✔️ | |
Telefon/Mobiltelefon | ✔️ | ✔️ | ✔️ | |
Schaltfläche „Zurück“ | ✔️ | ✔️ | Verwenden Sie die Assistentenkomponente für die Schaltflächen „Weiter“ und „Zurück“, um zwischen mehreren Bedienfeldern zu wechseln. | |
Optionsfeldgruppe | ✔️ | ✔️ | ✔️ | |
Schaltfläche „Zurücksetzen“ | ✔️ | ✔️ | ✔️ | |
Überprüfung | ✔️ | |||
Freihändige Unterschrift | ✔️ | |||
Trennzeichen | ✔️ | Verwenden Sie die WCM-Trennzeichenkomponente. | ||
Schaltfläche „Senden“ | ✔️ | ✔️ | ✔️ | |
Zusammenfassungsschritt | ✔️ | |||
Schalter | ✔️ | ✔️ | ||
Tabelle | ✔️ | |||
Geschäftsbedingungen | ✔️ | ✔️ | ||
Text | ✔️ | ✔️ | ✔️ | |
Textfeld | ✔️ | ✔️ | ✔️ | |
Turnstile Captcha | ✔️ | Turnstile Captcha ist nur für Foundation-Komponenten verfügbar. | ||
Vertikale Registerkarten | ✔️ | ✔️ | Für Foundation-Komponenten können Sie das Layout der Registerkarten links (vertikale Registerkarten) in den Eigenschaften der Bedienfeldkomponenten konfigurieren | |
Assistent | ✔️ | ✔️ | ✔️ | Für Foundation-Komponenten können Sie das Assistenten-Layout in den Eigenschaften der Bedienfeldkomponenten konfigurieren |
- Zusätzlich zu den oben aufgeführten Komponenten unterstützt der Formularbaustein alle gültigen HTML5-Eingabetypen und Textbereiche als Komponenten.
- Benötigen Sie eine Komponente, die oben nicht aufgeführt ist? Fordern Sie sie per E-Mail an aem-forms-ea@adobe.com von Ihrer offiziellen Adresse an.