Zelfstudie: Een adaptief formulier maken

02-create-adaptive-form-main-image

Deze zelfstudie is een stap in de serie Uw eerste adaptieve vorm maken. 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.

Informatie over de zelfstudie

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. Zie Inleiding tot het ontwerpen van adaptieve formulieren voor meer informatie over adaptieve formuliermogelijkheden.

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:

[ ![](do-not-localize/form-preview-mobile.gif)](assets/form-preview-mobile.gif)

Stap 1: Het adaptieve formulier maken

  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. Tik Maken en selecteer Adaptief formulier. Er verschijnt een optie voor het selecteren van een sjabloon. Tik op de Lege-sjabloon om deze te selecteren en tik Volgende.

  3. Er wordt een optie voor Eigenschappen toevoegen weergegeven. De velden Title en Name zijn verplicht:

    • Titel: Geef Add new or update shipping address op in het veld Titel. In het titelveld wordt de weergavenaam van het formulier opgegeven. Met de titel kunt u het formulier identificeren in de AEM Forms-gebruikersinterface.
    • Naam: Geef shipping-address-add-update-form op in 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.

  4. Tik Maken. Er wordt een adaptief formulier gemaakt en er wordt een dialoogvenster weergegeven om het formulier te openen voor bewerking. Tik Open om het nieuwe formulier op een nieuw tabblad te openen. Het formulier wordt geopend voor bewerking. De zijbalk wordt ook weergegeven om het nieuwe formulier aan te passen aan de behoeften.

    Zie Inleiding tot het ontwerpen van adaptieve formulieren voor informatie over de adaptieve ontwerpinterface en de beschikbare componenten.

    nieuw aanpasbare vorm

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.

  1. Tik in-/uitschakelen van zijpaneel > treeexpandall. De componentbrowser wordt geopend. Sleep de component Koptekst van de componentbrowser naar het adaptieve formulier.

  2. Tik Logo. De werkbalk wordt weergegeven. Tik aem_6_3_edit op de werkbalk, typ We.Retail en tik aem_6_3_forms_save.

  3. Tik op de afbeelding. De werkbalk wordt weergegeven. Tik cmp. De eigenschappenbrowser wordt links van het scherm geopend. Blader en upload de logoafbeelding. Tik aem_6_3_forms_save. De afbeelding wordt in de koptekst weergegeven.

    Tik op Bestand ophalen om het logo te downloaden dat in dit artikel wordt gebruikt als u er geen hebt.

    Bestand ophalen

  4. Sleep de Voettekst component van treeexpandall naar het adaptieve formulier. In dit stadium ziet het formulier er als volgt uit:

    adaptieve vorm met kop- en voetteksten

Stap 3: Componenten toevoegen voor het vastleggen en weergeven van informatie

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 van treeexpandall aan een vorm slepen. Zie Inleiding tot het ontwerpen van adaptieve formulieren voor meer informatie over beschikbare componenten en de bijbehorende functionaliteit.

  1. Sleep de component Numerieke box naar het aangepaste formulier. Plaats het voor de voettekstcomponent. Open eigenschappen van de component, wijzig Titel van de component in Customer ID, wijzig Elementnaam in customer_ID, schakel de optie Vereist veld in, schakel de optie HTML5 Number Input Type in en tik 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.:
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

  1. Sleep een component Numeriek vak voor de voettekstcomponent. Open eigenschappen van de component, stel waarden in die in de onderstaande tabel worden vermeld, en tik aem_6_3_forms_save.

    Eigenschap Waarde
    Titel Postcode
    Elementnaam customer_ZIPCode
    Maximum aantal cijfers 6
    Vereist veld Ingeschakeld
    Type weergavepatroon Geen patroon

  2. Sleep een E-mail component voor de voettekstcomponent. Open eigenschappen van de component, stel waarden in die in de onderstaande tabel worden vermeld en tik aem_6_3_forms_save.

    Eigenschap Waarde
    Titel E-mail
    Elementnaam customer_Email
    Vereist veld Ingeschakeld

  3. Sleep een Bestandsbijlage component voor de voettekstcomponent. Open eigenschappen van de component, stel waarden in die in de onderstaande tabel worden vermeld en tik aem_6_3_forms_save.

Eigenschap Waarde
Titel Door de overheid goedgekeurd adresbewijs
Elementnaam customer_Address_Proof
Vereist veld Ingeschakeld

  1. Sleep een component Submit Button naar het aangepaste formulier. Plaats het voor de voettekstcomponent. Open eigenschappen van de component, wijzig de elementnaam in address_adding_update_submit, tik name_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: Verzendactie configureren voor het aangepaste formulier

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. Voor gedetailleerde informatie, zie Vormend de Submit actie.

Met de volgende stappen kunt u de handeling voor het verzenden van e-mail configureren en demo-verzendactie van het formulier configureren:

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

    /content/help/en/experience-manager/6-4/sites-administering/notification.html

  2. Tik Formuliercontainer in de Inhoudsbrowser en tik cmp. De eigenschappenbrowser wordt aan de linkerkant geopend.

  3. Ga naar Verzending > Handeling verzenden. Selecteer E-mail verzenden. Geef de volgende waarden op en tik aem_6_3_forms_save.

    Eigenschap Waarde
    Van donotreply@weretail.com
    Naar ${customer_Email}
    Subject 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 uw account:
    ${customer_Name}, ${customer_Shipping_Address}, ${customer_State}, ${customer_ZIPCode}
    Regards, We.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 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

Met de optie Voorvertoning kunt u de weergave en het gedrag van een formulier 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 zowel de opties Voorvertoning als Emulator liniaal in combinatie gebruiken om een formulier voor apparaten van verschillende schermgrootten voor te vertonen.

  1. Tik op de optie Voorvertoning aan de rechterkant van de formuliereditor. Het formulier wordt geopend in de voorbeeldmodus. Als u de naam hebt gebruikt die in de zelfstudie wordt vermeld, is de voorbeeld-URL van het formulier http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
  2. Met liniaal kunt u zien hoe het formulier er op verschillende apparaten uitziet.
  3. Vul de velden van het formulier in en tik Verzenden. Het formulier wordt verzonden en u wordt omgeleid naar de standaardpagina Dankuwel. U kunt ook een aangepaste pagina voor bedankt opgeven. Voor details, zie Het vormen opnieuw richten pagina.

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.

Op deze pagina