Självstudiekurs: Publicera ditt adaptiva formulär tutorial-publish-your-adaptive-form

Hero-image

Den här självstudiekursen är ett steg i serien Create Your First Adaptive Form . Vi rekommenderar att du följer serien i kronologisk ordning för att förstå, utföra och demonstrera det fullständiga självstudiekurserna.

När det adaptiva formuläret är klart kan du publicera det för att göra det tillgängligt för slutanvändarna. Slutanvändarna kan öppna det publicerade formuläret på vilken enhet och webbläsare som helst. När ett adaptivt formulär publiceras kopieras formuläret och tillhörande innehåll från en AEM-författarinstans till en AEM-publiceringsinstans. Formuläret görs tillgängligt för slutanvändaren via publiceringsinstansen.

Du kan publicera ett anpassat formulär på följande sätt:

Innan du börjar before-you-start

  • Konfigurera en AEM Forms-publiceringsinstans: Publiceringsinstansen är en offentlig instans av AEM Forms som körs i publiceringsläge. I en produktionsmiljö ligger publiceringsinstansen utanför organisationens brandvägg.
  • Konfigurera replikering och omvänd replikering: Replikering kopierar innehåll från författarinstansen till en publiceringsinstans och returnerar användarindata (till exempel formulärindata) från publiceringsinstansen till författarinstansen.

Publicera det adaptiva formuläret som en AEM-sida publish-the-adaptive-form-as-an-aem-page

När det adaptiva formuläret publiceras som en AEM-sida innehåller hela webbsidan bara det publicerade formuläret. Du kan använda URL:en för det adaptiva formuläret för att länka det från en annan webbsida. Så här publicerar du det adaptiva formuläret shipping-address-add-update-form som en AEM-sida:

  1. Logga in på författarinstansen för AEM Forms och leta upp formuläret shipping-address-add-update-form adaptive i AEM Forms UI.
    https://localhost:4502/aem/forms.html/content/dam/formsanddocuments
  2. Välj adaptiv blankett för leverans-adress-add-update-form och välj Publish. En dialogruta med resurser som är kopplade till det adaptiva formuläret visas. Välj Publish. Det anpassningsbara formuläret publiceras och en dialogruta visas.
  3. Öppna formuläret i publiceringsinstansen. Formuläret kan fyllas i och skickas av användaren.
    https://localhost:4503/content/forms/af/shipping-address-add-update-form.html

Bädda in det anpassningsbara formuläret på en AEM Sites-sida embed-the-adaptive-form-in-an-aem-sites-page

Med AEM Forms kan formulärutvecklare sömlöst bädda in adaptiva formulär på en AEM Sites -sida. Det inbäddade adaptiva formuläret fungerar fullt ut och användarna kan fylla i och skicka formuläret utan att behöva lämna sidan. Det hjälper användaren att stanna kvar i sitt sammanhang för andra element på webbsidan och interagera samtidigt med formuläret.

AEM Forms tillhandahåller en komponent, AEM Forms Container, som bäddar in ett adaptivt formulär på en AEM Sites -sida. Komponenten är som standard inte synlig i AEM Sites-behållaren. Utför följande steg för att aktivera behållarkomponenten för AEM Forms och bädda in det adaptiva formuläret på en AEM Sites -sida:

  1. Skapa och öppna en sida på webbplatsen We.Retail för redigering. Exempel: https://localhost:4502/editor.html/content/we-retail/us/en/user/shipping-and-billing-address.html. Det adaptiva formuläret är inbäddat på sidan Sites.

    Du kan även bädda in det adaptiva formuläret på en befintlig webbsida. Detaljhandel Site’s. Till exempel sidan OM USA https://localhost:4502/editor.html/content/we-retail/us/en/about-us.html. Du sparar tid när du skapar en sida. Stegen nedan använder den nya sidan.

    Webbplatsen We.Retail levereras med AEM. Om du inte har installerat webbplatsen We.Retail ska du läsa Implementering av referens för butik för att installera webbplatsen.

  2. Välj sidinformation för egenskaper och välj alternativet Edit Template på den nyligen skapade webbsidan för webb.butik. Sidmallen öppnas på en ny flik i webbläsaren.

  3. Markera i rutan layout container och välj feedmanagement . Expandera dragspelet General på fliken Allowed Components, markera alternativet AEM Form och välj save_icon . AEM Forms-behållarkomponenten är aktiverad för sidan.

  4. Öppna webbläsarfliken som innehåller AEM Sites-sidan som öppnats i steg 1. Markera rutan Drag components here och välj +. I rutan Insert New Component väljer du AEM Form. Komponenten AEM Forms Container läggs till på sidan.

  5. Markera komponenten AEM Forms container och välj configure-icon . En dialogruta med egenskaper för AEM Forms-behållaren visas. I fältet Asset Path bläddrar du till och väljer formuläret shipping-address-add-update-form adaptive. Välj save_icon . Det anpassningsbara formuläret är inbäddat på sidan.

  6. Publicera både det adaptiva formuläret och sidan Sites. Här är några saker att tänka på:

    • Om du publicerar AEM Sites-sidan för första gången och den innehåller ett inbäddat formulär publicerar du sidan Sites och det inbäddade formuläret.

    • Om du bara ändrar det inbäddade formuläret på en publicerad webbplatssida publicerar du det ursprungliga formuläret och ändringarna återspeglas på den publicerade webbplatssidan. Den publicerade webbplatssidan innehåller en referens till formuläret och behöver inte publicera om sidan.

    • Om du ändrar sidan Sites och det inbäddade formuläret publicerar du om sidan Sites och formuläret.

      embed-in-aem-sites

    Formuläret för ändring av leverans- och faktureringsadress har lagts till på en AEM Sites-sida.

Bädda in det anpassningsbara formuläret på en extern webbsida embed-the-adaptive-form-in-an-external-webpage

Du kan bädda in ett adaptivt formulär på en extern webbsida (en icke-AEM-webbsida som ligger utanför AEM) genom att infoga några rader med JavaScript på den externa webbsidan. JavaScript-koden skickar en HTTP-begäran till AEM Forms-servern för det adaptiva formuläret och relaterade resurser och lägger till det adaptiva formuläret på webbsidan. Detaljerade steg finns i Bädda in det adaptiva formuläret på en extern webbsida.

recommendation-more-help
51c6a92d-a39d-46d7-8e3e-2db9a31c06a2