Lesbestand: een adaptief formulier maken do-not-publish-tutorial-create-an-adaptive-form

02-create-adaptive-form-main-image

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 adaptieve formulieren ook integreren met Adobe Analytics voor gebruiksstatistieken en Adobe Campaign voor campagnebeheer. Zie voor meer informatie over adaptieve formuliermogelijkheden 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:
Formuliervoorbeeld in mobiele apparaten

Stap 1: Maak het adaptieve formulier step-create-the-adaptive-form

  1. Meld u aan bij de AEM auteur en navigeer naar Adobe Experience Manager > Forms > Forms & Documents. De standaard-URL is http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.

  2. Selecteren Create en selecteert u Adaptive Form. Er verschijnt een optie voor het selecteren van een sjabloon. Selecteer de Blank sjabloon om het te selecteren en te selecteren Next.

  3. Een optie voor Add Properties wordt weergegeven. De Title en Name velden zijn verplicht:

    • Titel: Opgeven Add new or update shipping address in de Title veld. In het titelveld wordt de weergavenaam van het formulier opgegeven. Met de titel kunt u het formulier identificeren in de AEM Forms gebruikersinterface.
    • Naam: Opgeven shipping-address-add-update-form in de Name veld. 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.
  4. Selecteer Create. Er wordt een adaptief formulier gemaakt en er wordt een dialoogvenster weergegeven om het formulier te openen voor bewerking. Selecteren Open 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.

    Een nieuw, adaptief formulier.

AEM Forms biedt veel componenten om informatie weer te geven op een adaptief formulier. 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.

  1. Selecteren schakelen tussen zijpaneel > uitvouwen . De componentbrowser wordt geopend. Sleep de Header van componentbrowser naar het adaptieve formulier.

  2. Selecteer Logo. De werkbalk wordt weergegeven. Selecteren aem_6_3_edit op de werkbalk typt u Wij.Detailhandel en selecteert u aem_6_3_forms_save .

  3. Selecteer Afbeelding. De werkbalk wordt weergegeven. Selecteren cmppr . De eigenschappenbrowser wordt links van het scherm geopend. Browse en uploadt u de logoafbeelding. Selecteren aem_6_3_forms_save . De afbeelding wordt in de koptekst weergegeven.

    U kunt de optie Bestand ophalen selecteren om het logo te downloaden dat in dit artikel wordt gebruikt als u er geen hebt.

Bestand ophalen

  1. Sleep de Footer component van uitvouwen op het adaptieve formulier. In dit stadium ziet het formulier er als volgt uit:

    adaptieve vorm met kop- en voetteksten

Stap 3: Voeg componenten toe aan het vastleggen en weergeven van informatie step-add-components-to-capture-and-display-information

Componenten zijn bouwstenen van een adaptief formulier. AEM Forms biedt veel componenten voor het vastleggen en weergeven van informatie in een adaptieve vorm. U kunt de componenten slepen vanuit uitvouwen op een formulier. Zie voor meer informatie over beschikbare componenten en de bijbehorende functionaliteit Inleiding tot het ontwerpen van adaptieve formulieren.

  1. Sleep de Numeric Box component op het adaptieve formulier. Plaats het voor de voettekstcomponent. Eigenschappen van component openen, wijzigen Title van de component aan Customer ID, wijzigen Element Name tot customer_ID de Required Field optie, inschakelen Use HTML5 Number Input Type en selecteert u aem_6_3_forms_save .

  2. Sleep drie tekstvakcomponenten naar het aangepaste formulier. Plaats deze voor de voettekstcomponent. Stel de volgende eigenschappen in voor deze tekstvakken.:

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 html-authored no-header
    Eigenschap Tekstvak 1 Tekstvak 2 Tekstvak 3
    Titel Naam Verzendadres Staat
    Elementnaam customer_Name customer_Shipping_Address customer_State
    Vereist veld Ingeschakeld Ingeschakeld Ingeschakeld
    Meerdere regels toestaan Uitgeschakeld Ingeschakeld Uitgeschakeld
  3. Sleep een Numeric Box voor de voettekstcomponent. Open eigenschappen van de component, stel waarden in die in de onderstaande tabel worden vermeld, selecteer aem_6_3_forms_save .

    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
  4. Sleep een Email voor de voettekstcomponent. Open eigenschappen van de component, stel waarden in die in de onderstaande tabel worden vermeld en selecteer aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Eigenschap Waarde
    Titel E-mail
    Elementnaam customer_Email
    Vereist veld Ingeschakeld
  5. Sleep een File Attachment voor de voettekstcomponent. Open eigenschappen van de component, stel waarden in die in de onderstaande tabel worden vermeld en selecteer aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header
    Eigenschap Waarde
    Titel Door de overheid goedgekeurd adresbewijs
    Elementnaam customer_Address_Proof
    Vereist veld Ingeschakeld
  6. Sleep een Submit Button aan het adaptieve formulier. Plaats het voor de voettekstcomponent. Eigenschappen van component openen, elementnaam wijzigen in address_addition_update_submit, selecteert u aem_6_3_forms_save . De indeling van het formulier is voltooid en het formulier ziet er als volgt uit:

    adaptief-form-with-all-the-components

Stap 4: de verzendactie voor het aangepaste formulier configureren 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:

  1. De e-mailserver configureren. Zie voor meer informatie E-mailmelding configureren.

  2. Selecteren Form Container in de Inhoudsbrowser en selecteer cmppr . De eigenschappenbrowser wordt aan de linkerkant geopend.

  3. Ga naar Submission > Submit Action. Selecteer Send Email. Geef de volgende waarden op en selecteer aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Eigenschap Waarde
    Van donotreply@weretail.com
    Naar ${customer_Email}
    Onderwerp Bevestiging: je hebt 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.Retail
    Bijlagen opnemen Ingeschakeld

    Uw formulier is klaar. U kunt nu een voorbeeld van het formulier bekijken en de functionaliteit testen. Als u de naam hebt gebruikt die in de zelfstudie wordt genoemd en als u het formulier hebt geopend op de computer waarop AEM Forms server, dan 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 Preview option 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 gebruiken Preview en Emulator liniaal in combinatie met elkaar een voorbeeld van een formulier bekijken voor apparaten van verschillende schermgrootten.

  1. Selecteer de Preview 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
  2. Gebruiken liniaal om te zien hoe het formulier er op verschillende apparaten uitziet.
  3. Vul velden van het formulier in en selecteer Submit. 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 in de zelfstudie vermelde naam hebt gebruikt en het formulier hebt geopend 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.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2