Självstudiekurs: Skapa ett anpassat formulär do-not-publish-tutorial-create-an-adaptive-form

02-create-adaptive-form-main-image

Den här självstudiekursen är ett steg i Skapa ditt första adaptiva formulär serie. Vi rekommenderar att du följer serien i kronologisk ordning för att förstå, utföra och demonstrera det fullständiga självstudiekurserna.

Om självstudiekursen about-the-tutorial

Adaptiva formulär är nya generationer som är dynamiska och responsiva. Ni kan använda adaptiva formulär för att leverera personaliserade upplevelser. Du kan även integrera adaptiva formulär med Adobe Analytics för användningsstatistik och Adobe Campaign för kampanjhantering. Mer information om funktioner för adaptiva formulär finns i Introduktion till utveckling av anpassningsbara formulär.

Det är enklare att skapa och hantera formulär när man följer en lämplig process. I den här artikeln får du lära dig att:

Du kommer att ha ett formulär som liknar följande i slutet av artikeln:
Förhandsgranska formulär i mobilen

Steg 1: Skapa det anpassade formuläret step-create-the-adaptive-form

  1. Logga in på AEM författarinstans och navigera till Adobe Experience Manager > Forms > Forms & Documents. Standardwebbadressen är http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.

  2. Välj Create och markera Adaptive Form. Ett alternativ för att välja en mall visas. Välj Blank mall för att markera den och välja Next.

  3. Ett alternativ till Add Properties visas. The Title och Name fält är obligatoriska:

    • Titel: Ange Add new or update shipping address i Title fält. Titelfältet anger formulärets visningsnamn. Titeln hjälper dig att identifiera formuläret i AEM Forms användargränssnitt.
    • Namn: Ange shipping-address-add-update-form i Name fält. Fältet Namn anger formulärets namn. En nod med det angivna namnet skapas i databasen. När du börjar skriva en titel genereras värdet för namnfältet automatiskt. Du kan ändra det föreslagna värdet. Namnfältet får endast innehålla alfanumeriska tecken, bindestreck och understreck. Alla ogiltiga indata ersätts med ett bindestreck.
  4. Välj Create. Ett anpassat formulär skapas och en dialogruta öppnas där du kan öppna formuläret för redigering. Välj Open om du vill öppna det nya formuläret på en ny flik. Formuläret öppnas för redigering. Här visas också sidlisten där du kan anpassa det nya formuläret efter behov.

    Mer information om gränssnittet för att skapa adaptiva formulär och tillgängliga komponenter finns i Introduktion till utveckling av anpassningsbara formulär.

    Ett nytt anpassat formulär.

AEM Forms innehåller många komponenter som visar information i ett adaptivt formulär. Komponenterna för sidhuvud och sidfot ger formuläret ett enhetligt utseende och en enhetlig känsla. En rubrik innehåller vanligtvis ett företags logotyp, formulärets rubrik och sammanfattning. En sidfot innehåller vanligtvis copyrightinformation och länkar till andra sidor.

  1. Välj växlingspanel > treeexpandall . Komponentwebbläsaren öppnas. Dra Header från komponentwebbläsaren till det adaptiva formuläret.

  2. Välj Logo. Verktygsfältet visas. Välj aem_6_3_edit i verktygsfältet skriver du Vi.butik och markera aem_6_3_forms_save .

  3. Välj Bild. Verktygsfältet visas. Välj cmppr . Egenskapsläsaren öppnas till vänster på skärmen. Browse och ladda upp logotypbilden. Välj aem_6_3_forms_save . Bilden visas i sidhuvudet.

    Du kan välja Hämta fil för att hämta logotypen som används i den här artikeln om du inte har någon.

Hämta fil

  1. Dra Footer komponent från treeexpandall till den anpassningsbara formen. I det här skedet ser formuläret ut så här:

    adaptive-form-with-headers-and-footers

Steg 3: Lägga till komponenter för att hämta och visa information step-add-components-to-capture-and-display-information

Komponenter är byggstenar i en adaptiv form. AEM Forms innehåller många komponenter för att samla in och visa information i en adaptiv form. Du kan dra komponenterna från treeexpandall till ett formulär. Mer information om tillgängliga komponenter och motsvarande funktioner finns i Introduktion till utveckling av anpassningsbara formulär.

  1. Dra Numeric Box component till den anpassningsbara formen. Placera den före sidfotskomponenten. Öppna komponentens egenskaper, ändra Title för komponenten till Customer ID, ändra Element Name till customer_ID, aktivera Required Field alternativ, aktivera Use HTML5 Number Input Type och markera aem_6_3_forms_save .

  2. Dra tre textrutekomponenter till det adaptiva formuläret. Placera dessa före sidfotskomponenten. Ange följande egenskaper för dessa textrutor.:

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 html-authored no-header
    Egenskap Textruta 1 Textruta 2 Textruta 3
    Titel Namn Leveransadress Läge
    Elementnamn customer_Name customer_Shipping_Address customer_State
    Obligatoriskt fält Aktiverad Aktiverad Aktiverad
    Tillåt flera rader Handikappade Aktiverad Handikappade
  3. Dra en Numeric Box före sidfotskomponenten. Öppna komponentens egenskaper, ange värden i tabellen nedan, Välj aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Egenskap Värde
    Titel Postnummer
    Elementnamn customer_ZIPCode
    Maximalt antal siffror 6
    Obligatoriskt fält Aktiverad
    Visa mönstertyp Inget mönster
  4. Dra en Email före sidfotskomponenten. Öppna komponentens egenskaper, ange värden i tabellen nedan och markera aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Egenskap Värde
    Titel E-post
    Elementnamn customer_Email
    Obligatoriskt fält Aktiverad
  5. Dra en File Attachment före sidfotskomponenten. Öppna komponentens egenskaper, ange värden i tabellen nedan och markera aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header
    Egenskap Värde
    Titel Myndigheter godkänd adresskontroll
    Elementnamn customer_Address_Proof
    Obligatoriskt fält Aktiverad
  6. Dra en Submit Button till det adaptiva formuläret. Placera den före sidfotskomponenten. Öppna komponentens egenskaper, ändra elementnamn till address_addition_update_submit, markera aem_6_3_forms_save . Formulärets layout är fullständig och formuläret ser ut så här:

    adaptive-form-with-all-the-components

Steg 4: Konfigurera skicka-åtgärd för det adaptiva formuläret step-configure-submit-action-for-the-adaptive-form

En skicka-åtgärd aktiveras när en användare trycker på Skicka-knappen på ett anpassat formulär. Du kan använda en skicka-åtgärd för att spara formulärdata i den lokala databasen, skicka formulärdata till en REST-slutpunkt, skicka formulärdata som e-post och mycket mer. Adaptiva formulär innehåller några fler färdiga åtgärder för att skicka. Mer information finns i Konfigurera åtgärden Skicka.

Med hjälp av följande steg kan du konfigurera e-poståtgärd för att skicka och demo för formuläret:

  1. Konfigurera e-postservern. Mer information finns i Konfigurerar e-postmeddelande.

  2. Välj Form Container i innehållsläsaren och väljer cmppr . Egenskapsläsaren öppnas till vänster.

  3. Gå till Submission > Submit Action. Välj Send Email. Ange följande värden och välj aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Egenskap Värde
    Från donotreply@weretail.com
    Till ${customer_Email}
    Ämne Bekräftelse: Du har lagt till leveransadress på webbplatsen We.Retail.
    E-postmall Hej ${customer_Name}, läggs följande adress till som leveransadress för ditt konto:
    ${customer_Name}, ${customer_Shipping_Address}, ${customer_State}, ${customer_ZIPCode}
    Med vänlig hälsning, vi.detaljhandel
    Inkludera bifogade filer Aktiverad

    Formuläret är klart. Nu kan du förhandsgranska formuläret och testa funktionen. Om du har använt namnet som nämns i självstudiekursen och har åtkomst till formuläret på den dator där AEM körs Forms server, finns formuläret tillgängligt på http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

Steg 5: Förhandsgranska och skicka det anpassade formuläret step-preview-and-submit-the-adaptive-form

Du kan använda Preview option för att utvärdera ett formulärs utseende och beteende. Du kan skicka ett formulär i förhandsgranskningsläge och även kontrollera valideringar som används i ett formulär. Om till exempel ett fel visas när ett obligatoriskt fält lämnas tomt.

Med adaptiva formulär kan du också emulera upplevelsen av ett formulär för olika enheter. Exempel: iPhone, iPad och Desktop. Du kan använda båda Preview och Emulator linjal tillsammans med varandra för att förhandsgranska ett formulär för enheter med olika skärmstorlekar.

  1. Välj Preview till höger om formulärredigeraren. Formuläret öppnas i förhandsgranskningsläget. Om du har använt namnet som anges i självstudiekursen är URL:en för förhandsgranskning av formuläret http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
  2. Använd linjal för att visa hur formuläret ser ut på olika enheter.
  3. Fyll i formulärfält och markera Submit. Formuläret skickas och du omdirigeras till standardinställningarna Tack sida. Du kan också ange en anpassad tacksida. Mer information finns i Konfigurerar omdirigeringssida.

Det adaptiva formuläret för att lägga till en adress är klart. Om du har använt det namn som anges i självstudiekursen och har åtkomst till formuläret på den dator där AEM Forms-servern körs, finns formuläret tillgängligt på http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

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