Zelfstudie: Een adaptief formulier maken do-not-publish-tutorial-create-an-adaptive-form
Deze zelfstudie is een stap in de Uw eerste adaptieve formulier maken reeks. U wordt aangeraden de reeks in chronologische volgorde te volgen om het volledige gebruik van de zelfstudie te begrijpen, uit te voeren en aan te tonen.
Over de zelfstudie about-the-tutorial
Adaptieve formulieren zijn formulieren van de nieuwe generatie die dynamisch zijn en reageren. U kunt adaptieve formulieren gebruiken om persoonlijke ervaringen te bieden. U kunt ook adaptieve formulieren integreren met Adobe Analytics voor gebruiksstatistieken en Adobe Campaign voor campagnebeheer. Voor meer informatie over adaptieve formuliermogelijkheden raadpleegt u Inleiding tot het ontwerpen van adaptieve formulieren.
Het is eenvoudiger om formulieren te maken en te beheren wanneer een correct proces wordt gevolgd. In dit artikel leert u hoe u:
Aan het einde van het artikel hebt u een formulier dat vergelijkbaar is met het volgende:
[ ](assets/form-preview-mobile.gif)
Stap 1: Het adaptieve formulier maken step-create-the-adaptive-form
-
Meld u aan bij de AEM auteur en navigeer naar Adobe Experience Manager > Forms > Forms & Documenten. De standaard-URL is http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.
-
Tikken Maken en selecteert u Adaptief formulier. Er verschijnt een optie voor het selecteren van een sjabloon. Tik op de knop Leeg sjabloon om te selecteren en te tikken Volgende.
-
Een optie voor Eigenschappen toevoegen wordt weergegeven. De Titel en Naam velden zijn verplicht:
- Titel: Opgeven
Add new or update shipping addressin het veld Titel. In het titelveld wordt de weergavenaam van het formulier opgegeven. Met de titel kunt u het formulier identificeren in de gebruikersinterface van AEM Forms. - Naam: Opgeven
shipping-address-add-update-formin het veld Naam. In het veld Naam wordt de naam van het formulier opgegeven. Er wordt een knooppunt met de opgegeven naam gemaakt in de repository. Wanneer u een titel begint te typen, wordt automatisch een waarde voor het naamveld gegenereerd. U kunt de voorgestelde waarde wijzigen. Het naamveld mag alleen alfanumerieke tekens, afbreekstreepjes en onderstrepingstekens bevatten. Alle ongeldige invoer wordt vervangen door een afbreekstreepje.
- Titel: Opgeven
-
Tikken Maken. Er wordt een adaptief formulier gemaakt en er wordt een dialoogvenster weergegeven om het formulier te openen voor bewerking. Tikken Openen om het nieuwe formulier te openen op een nieuw tabblad. Het formulier wordt geopend voor bewerking. De zijbalk wordt ook weergegeven om het nieuwe formulier aan te passen aan de behoeften.
Voor informatie over de adaptieve interface voor formulierontwerp en de beschikbare componenten raadpleegt u Inleiding tot het ontwerpen van adaptieve formulieren.
Stap 2: Kop- en voettekst toevoegen step-add-header-and-footer
AEM Forms biedt veel componenten om informatie op een adaptief formulier weer te geven. De componenten Koptekst en Voettekst geven een formulier een consistent uiterlijk. Een koptekst bevat doorgaans het logo van een bedrijf, de titel van het formulier en het overzicht. Een voettekst bevat doorgaans copyrightinformatie en koppelingen naar andere pagina's.
-
Tikken
-
Tikken Logo. De werkbalk wordt weergegeven. Tikken
-
Tik op de afbeelding. De werkbalk wordt weergegeven. Tikken
Tik op Bestand ophalen om het logo te downloaden dat in dit artikel wordt gebruikt als u er geen hebt.
-
Sleep de Voettekst component van
Stap 3: Componenten toevoegen om gegevens vast te leggen en weer te geven step-add-components-to-capture-and-display-information
Componenten zijn bouwstenen van een adaptief formulier. AEM Forms biedt veel componenten om informatie in een adaptieve vorm vast te leggen en weer te geven. U kunt de componenten slepen vanuit
- Sleep de component Numerieke box naar het aangepaste formulier. Plaats het voor de voettekstcomponent. Eigenschappen van component openen, wijzigen Titel van de component
Customer ID, wijzigen Elementnaam totcustomer_IDde Vereist veld , schakelt u de optie HTML5-getalinvoertype gebruiken en tikken - Sleep drie tekstvakcomponenten naar het aangepaste formulier. Plaats deze voor de voettekstcomponent. Stel de volgende eigenschappen in voor deze tekstvakken.:
-
Sleep een Numeriek vak voor de voettekstcomponent. Open eigenschappen van de component, stel waarden in die in de onderstaande tabel worden vermeld, en tik
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 Eigenschap Waarde Titel Postcode Elementnaam customer_ZIPCode Maximum aantal cijfers 6 Vereist veld Ingeschakeld Type weergavepatroon Geen patroon -
Sleep een E-mail voor de voettekstcomponent. Open eigenschappen van de component, stel waarden in die in de onderstaande tabel worden vermeld en tik
table 0-row-2 1-row-2 2-row-2 3-row-2 Eigenschap Waarde Titel E-mail Elementnaam customer_Email Vereist veld Ingeschakeld -
Sleep een Bestandsbijlage voor de voettekstcomponent. Open eigenschappen van de component, stel waarden in die in de onderstaande tabel worden vermeld en tik
-
Sleep een Verzendknop aan het adaptieve formulier. Plaats het voor de voettekstcomponent. Eigenschappen van component openen, elementnaam wijzigen in address_adding_update_submit, tikken
Stap 4: Verzendactie configureren voor het aangepaste formulier step-configure-submit-action-for-the-adaptive-form
Een verzendactie wordt geactiveerd wanneer een gebruiker op de knop Verzenden tikt op een adaptief formulier. Met een verzendactie kunt u formuliergegevens opslaan in de lokale gegevensopslagruimte, formuliergegevens verzenden naar een REST-eindpunt, formuliergegevens verzenden als e-mail, enzovoort. Aangepaste formulieren bieden een paar extra verzendacties die buiten de box vallen. Zie voor meer informatie De handeling Verzenden configureren.
Met de volgende stappen kunt u de handeling voor het verzenden van e-mail configureren en demo-verzendactie van het formulier configureren:
-
Configureer de e-mailserver. Zie voor meer informatie E-mailmelding configureren.
/content/help/en/experience-manager/6-4/sites-administering/notification.html
-
Tikken Formuliercontainer in de Inhoudsbrowser en tik op
-
Ga naar Indiening > Handeling verzenden. Selecteren E-mail verzenden. Geef de volgende waarden op en tik op
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 Eigenschap Waarde Van donotreply@weretail.comNaar ${customer_Email}Onderwerp Bevestiging: Je hebt een verzendadres toegevoegd op de website We.Retail. E-mailsjabloon Hallo ${customer_Name}, Het volgende adres wordt toegevoegd als het verzendadres voor je account:${customer_Name},${customer_Shipping_Address},${customer_State},${customer_ZIPCode}
Met vriendelijke groeten, wij.RetailBijlagen opnemen Ingeschakeld Uw formulier is klaar. U kunt nu een voorbeeld van het formulier bekijken en de functionaliteit testen. Als u de naam gebruikt die in de zelfstudie wordt genoemd en het formulier opent op de computer waarop de AEM Forms-server wordt uitgevoerd, is het formulier beschikbaar op http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.
Stap 5: Het adaptieve formulier voorvertonen en verzenden step-preview-and-submit-the-adaptive-form
U kunt de Voorvertoning, optie om de weergave en het gedrag van een formulier te evalueren. U kunt een formulier verzenden in de voorbeeldmodus en ook de validaties controleren die op een formulier zijn toegepast. Als bijvoorbeeld een fout wordt weergegeven wanneer een verplicht veld leeg blijft.
Aangepaste formulieren bieden ook een optie om een formulier voor verschillende apparaten te emuleren. Bijvoorbeeld iPhone, iPad en Desktop. U kunt beide Voorvertoning en Emulator
- Tik op de knop Voorvertoning aan de rechterkant van de formuliereditor. Het formulier wordt geopend in de voorbeeldmodus. Als u de in de zelfstudie vermelde naam hebt gebruikt, wordt een voorbeeld van de URL van het formulier weergegeven met http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
- Gebruiken
- Vul velden van het formulier in en tik op Verzenden. Het formulier wordt verzonden en u wordt omgeleid naar de standaardversie Bedankt pagina. U kunt ook een aangepaste pagina voor bedankt opgeven. Zie voor meer informatie Omleidingspagina configureren.
Het aangepaste formulier voor het toevoegen van een adres is gereed. Als u de naam gebruikt die in de zelfstudie wordt genoemd en het formulier opent op de computer waarop de AEM Forms-server wordt uitgevoerd, is het formulier beschikbaar op http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.