DokumentationAEM 6.5Användarhandbok

Formatera ditt anpassningsbara formulär do-not-publish-style-your-adaptive-form

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Administratör
  • Användare
  • Utvecklare

Lär dig att skapa ett anpassat tema, formatera enskilda komponenter och använda Web Fonts i ett tema.

hjältebild

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

Om självstudiekursen about-the-tutorial

Du kan använda teman för att ge ett anpassat formulär ett unikt utseende och en unik stil. Du kan använda färdiga teman som medföljer den anpassningsbara formulärredigeraren eller skapa egna teman. AEM Forms tillhandahåller en temaredigerare för att skapa anpassade teman. Ett och samma tema kan ge olika utseenden till samma adaptiva formulär som öppnas på mobilen, surfplattan eller datorn. Du behöver inte ha någon tidigare kunskap om CSS eller LESS för att kunna använda temaredigeraren, men du vill ha den.

I slutet av självstudiekursen bör du kunna göra följande:

  • Använda ett tema i ett anpassat formulär
  • Skapa ett tema för anpassningsbara formulär med temaredigeraren
  • Formatera enskilda komponenter
  • Bonusavsnitt: Använd Web Fonts i ett anpassat tema

Formuläret ska se ut ungefär så här när du är klar med självstudiekursen:

Formulär med anpassat tema

Innan du börjar before-you-start

Ladda ned rubrikbilderna och logotypbilderna nedan på din dator. Rubriken för det anpassade formuläret shipping-address-add-update-form använder rubrikstilen och logotypbilderna. Bilden i sidhuvudsstil visas till höger om sidhuvudet.

Hämta fil

Hämta fil

Steg 1: Använd ett tema i det anpassade formuläret step-apply-a-theme-to-your-adaptive-form

Adaptiv formulärredigerare har flera färdiga teman. Om du inte tänker använda en anpassad stil för ditt adaptiva formulär kan du även publicera dina adaptiva formulär med ett användbart tema. Temana är oberoende av anpassningsbara formulär. Du kan använda samma tema för flera adaptiva formulär.

Så här använder du ett tema i ditt adaptiva formulär:

  1. Öppna det adaptiva formuläret för redigering.

    http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. Öppna egenskaper för Adaptive Form container. Navigera till Basic > Adaptive Form Theme i egenskapsläsaren. I fältet Adaptive Form Theme visas alla färdiga och anpassade teman. Som standard används Canvas-temat.

  3. Välj ett tema i fältet Adaptive Form Theme. Exempel: Undersökningstema. Välj aem_6_3_forms_save så att du kan använda det valda temat.

    Anpassat formulär med standardtemat

    Figur: Anpassat formulär med standardtemat

    Anpassat formulär med undersökningstemat

    Figur: Anpassat formulär med undersökningstemat

Steg 2: Uppdatera ditt anpassningsbara formulär step-update-your-adaptive-form

Den design som visas ovan kräver ändringar i platshållartext och logotyp i ditt befintliga adaptiva formulär.

Så här uppdaterar du ditt adaptiva formulär:

  1. Ändra den befintliga logotypen och texten för sidhuvudet. Så här tar du bort logotypen:

    1. Öppna formuläret i formulärredigeraren.

      http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

    2. Välj logotypbild i komponenten header och välj cmpr properties. I egenskapen image väljer du X för att ta bort den befintliga logotypbilden.

    3. Välj upload, välj logo.png och välj aem_6_3_forms_save för att spara ändringarna. Bilden hämtades i avsnittet Innan du börjar.

    4. Markera rubriktext, We.Retail, och välj aem_6_3_edit edit. Ändra rubriktext till we retail. Använd endast fet stil på we i we retail.

      we-retail-logo-text

  2. Ta bort rubrik och lägg till platshållartext:

    1. Markera fältet Kund-ID och välj cmpr -egenskaper.

    2. Kopiera innehållet i fältet Title till fältet Placeholder Text.

    3. Ta bort innehållet i fältet Title och välj aem_6_3_forms_save .

    4. Upprepa de tre föregående stegen för alla textrutor, numeriska rutor och e-postfält i formuläret.

      updated-adaptive-form

Steg 3: Skapa ett anpassat tema för ditt anpassade formulär step-create-a-custom-theme-for-your-adaptive-form

Du kan använda temaredigeraren för att skapa anpassade teman. Temats redigerare är en kraftfull WYSIWYG-redigerare. Det är en visuell metod att använda CSS på olika komponenter i ett adaptivt formulär. Den ger finare kontroller för att formatera komponenter och paneler i ett adaptivt formulär.

Ett tema är en separat enhet som anpassningsbara formulär. Den innehåller format (CSS) för komponenterna och panelerna i ett anpassat formulär. Formaten innehåller CSS-egenskaper som bakgrundsfärger, lägesfärger, genomskinlighet, justering och storlek. När du använder ett tema används det angivna formatet på motsvarande komponenter i ett anpassat formulär.

I den här självstudiekursen formaterar du sidhuvud och sidfot, text och numeriska komponenter, bilagekomponenter och knappar. Låt oss börja med att skapa ett tema:

Skapa ett tema create-a-theme

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

  2. Välj Create och välj Theme. Sidan Create Theme med de fält som krävs för att skapa ett tema visas. Fälten Title och Name är obligatoriska:

    • Titel: Ange temats titel. Exempel: Global Theme. Titeln hjälper dig att identifiera temat från listan med teman.
    • Namn: Ange namnet på temat. Exempel: Global-Theme. En nod med det angivna namnet skapas i databasen. När du börjar skriva en titel genereras namnfältets värde 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.

  3. Välj Create. Ett tema skapas och en dialogruta visas där du kan öppna formuläret för redigering. Välj Open om du vill öppna det nya temat på en ny flik. Temat öppnas i temaredigeraren. För formatering använder temaredigeraren ett anpassat formulär som levereras med AEM Forms.

    Mer information om hur du använder gränssnittet för temaredigeraren finns i Om temaredigeraren.

  4. Välj Theme Options temaalternativ > Configure. I fältet Preview Form markerar du det adaptiva formuläret shipping-address-add-update-form, väljer aem_6_3_forms_save och väljer Save. Nu är temaredigeraren konfigurerad att använda ditt eget adaptiva formulär i stället för det adaptiva standardformatet. Välj Cancel om du vill gå tillbaka till temaredigeraren.

    anpassat tema

    Figur: Temeredigeraren med anpassat formulär för leverans-address-add-update-form

    create-a-theme

    Figur: Anpassat formulär med standardformuläret

Sidhuvud och sidfot ger ett konsekvent och distinkt utseende i en adaptiv form. I allmänhet innehåller sidhuvudet organisationens logotyp och namn, sidfoten innehåller copyrightinformation och dessa är identiska i flera former i en organisation. Så här formaterar du sidhuvud och sidfot i anpassat formulär för leverans-address-add-update-form:

  1. Navigera till alternativet Header > Text på panelen Väljare. Väljarpanelen är till vänster om temaredigeraren. Om panelen inte visas väljer du växlingspanel växlingspanel.

  2. Ange följande egenskaper i dragspelet Text och välj aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Egenskap Värde
    Font Family Arial®
    Teckenfärg FFFFFF
    Teckenstorlek 54 px

  3. Markera header-widgeten och välj Header. Alternativen för att formatera sidhuvudswidgeten visas till vänster. Expandera dragspelet Dimensions & Position, ange Height till 120px och välj aem_6_3_forms_save .

  4. Expandera dragspelswidgeten Background och ställ in Background Color på F6921E.

    Hovra över Image & Gradient > + Add, välj Image. Ange följande egenskaper och välj aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Egenskap Värde
    image Överför header-style.png. Bilden hämtades i avsnittet Innan du börjar.
    Position Höger nerifrån
    Passram Ingen upprepning

  5. Välj logotypen i rubriken i temaredigeraren och välj Header Logo. Expandera dragspelet Dimensioner och position, ange följande egenskaper och välj aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 html-authored no-header
    Marginal Värde
    Marginal
    • Överkant: 1,5 rem
    • Nederkant: -35px
    • Vänster: 1rem

    Tips! Välj länkikonen om du vill ange olika värden för varje fält.

    Höjd 4,75rem

  6. Markera sidfotswidgeten och välj Footer. Expandera dragspelet Background, ange Background Color till F6921E och välj aem_6_3_forms_save .

Formatera datainhämtningskomponenten och använd en bakgrund i det anpassade formuläret style-the-data-capture-component-and-apply-a-background-to-the-adaptive-form

Du kan använda flera komponenter i ett adaptivt formulär för att hämta data. Till exempel textruta och numerisk ruta. Du kan ange ett identiskt format för alla datainhämtningskomponenter eller ett separat format för varje komponent. I den här självstudiekursen används ett identiskt format för numeriska rutor (Kund-ID, Postnummer) och textrutor (Kund-ID, Namn, Leveransadress, Tillstånd, E-post). Så här formaterar du komponenter för datainhämtning:

  1. Markera fältet Customer ID och välj alternativet Field Widget. Ange följande egenskaper och välj aem_6_3_forms_save .

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 html-authored no-header
    Dragspel Egenskap Värde
    Kant Kantfärg A7A9AC
    Kant Kantradie
    • Överkant: 7 px
    • Höger: 7 px
    • Nederkant: 7 px
    • Vänster: 7 px
    Text Font Family Arial®
    Text Teckenfärg 939598
    Text Teckenstorlek 18 px
    Dimensioner och position Bredd 60 %
    Dimensioner och position Marginal
    • Vänster: 10 rem

  2. Markera det tomma området ovanför fältet Customer ID och välj Responsive Panel Container. Ange Background > Background Color som F1F2F2. Välj aem_6_3_forms_save .

    Behållare för responsiv panel

Formatera knapparna style-the-buttons

Du kan använda ett anpassat tema för att tillämpa ett identiskt format på alla knappar i det adaptiva formuläret och intern formatering för att tillämpa ett format på en viss knapp. Så här formaterar du knapparna:

  1. Markera knappen Submit och välj alternativet Button. Ange följande egenskaper och välj aem_6_3_forms_save .

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 html-authored no-header
    Dragspel Egenskap Värde
    Bakgrund Bakgrundsfärg F6921E
    Kant Kantfärg F6921E
    Kant Kantradie
    • Överkant: 7 px
    • Höger: 7 px
    • Nederkant: 7 px
    • Vänster: 7 px
    Text Font Family Arial®
    Text Teckenfärg FFFFFF
    Text Teckenstorlek 18 px

  2. Använd det anpassade temat, Global tema, på ditt adaptiva formulär. Om formatet inte återspeglas i det adaptiva formuläret rensar du webbläsarcachen och försöker igen.

    style-data-capture-components

Steg 4: Formatera enskilda komponenter step-style-individual-components

Vissa format gäller bara för en viss komponent. Sådana komponenter är formaterade i en adaptiv formulärredigerare.

  1. Öppna det adaptiva formuläret för redigering. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. Välj alternativet Style i det övre fältet.

    style-option

  3. Markera knappen Attach och välj ikonen aem_6_3_edit . Ange följande egenskaper i dragspelet Dimensions and Position:

    table 0-row-2 1-row-2 2-row-2
    Egenskap Värde
    Float Vänster
    Bredd 10 %

  4. Markera alternativet Government approved address proof och välj ikonen aem_6_3_edit . Ange följande egenskaper:

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 8-row-3 9-row-3 10-row-3 11-row-3 12-row-3 13-row-3 14-row-3 html-authored no-header
    Dragspel Egenskap Värde
    Dimensioner och position Float Vänster
    Dimensioner och position Bredd 73 %
    Dimensioner och position Utfyllnad
    • Vänster: 10 px
    Dimensioner och position Höjd 40 px
    Dimensioner och position Marginal
    • Höger: 2 rem
    • Vänster: 10 rem
    Bakgrund Bakgrundsfärg FFFFFF
    Kant Kantbredd 1 px
    Kant Kantstil Heldragen
    Kant Kantfärg A7A9AC
    Kant Kantradie 7 px
    Text Font Family Arial®
    Text Teckenfärg BCBEC0
    Text Teckenstorlek 18 px
    Text Radhöjd 2

  5. Markera knappen Submit och välj ikonen aem_6_3_edit . Ange följande egenskaper:

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 html-authored no-header
    Dragspel Egenskap Värde
    Dimensioner och position Float Höger
    Dimensioner och position Marginal
    • Överkant: 5 rem
    • Höger: 14 rem
    • Nederkant: 20 px
    • Vänster: 20 px
    Bakgrund Bakgrundsfärg F6921E
    Kant Kantfärg F6921E

    styled-adaptive-form-1

Steg 5: Bonusavsnitt: Använda Web Fonts i ett anpassat tema step-bonus-section-using-web-fonts-in-a-custom-theme

Du kan använda olika teckensnitt för att utforma ett anpassat formulär. Alla enheter som det adaptiva formuläret visas på kanske inte har de teckensnitt som används för att utforma det adaptiva formuläret. Du kan använda en webbteckensnittstjänst för att leverera nödvändiga teckensnitt till målenheten.

Adobe Fonts är en Web Fonts-tjänst. Du kan konfigurera och använda tjänsten med adaptiva formulär. Så här använder du Adobe Fonts i en adaptiv form:

  1. Bläddra i biblioteket med Adobe-teckensnitt och välj teckensnitt för att formatera formuläret.
NOTE
Du kan lägga till taggar eller filter för att förfina teckensnittslistan.

  1. Klicka på knappen </> för att lägga till familjen i ett webbprojekt, om du skulle hitta ett typsnitt du gillar.

    select-font-from-font-libary

    Dialogrutan Lägg till teckensnitt i ett webbprojekt visas.

    note note
    NOTE
    Du kan bara lägga till teckensnitt i ditt webbprojekt om knappen </> är tillgänglig.

  2. Ge webbprojektet ett namn.

  3. Markera kryssrutorna för de teckensnittsvikter och format som du vill använda.

    lägg till ett teckensnittsbibliotek

  4. Välj Klicka på för att skapa projektet.

  5. Kopiera inbäddningskoden och URL-adressen från skärmen.
    bädda in kod och URL

  6. Klicka på Klar för att stänga webbprojektsfönstret.

  7. Logga in i din AEM och gå till URL http://server:port/crx/de/index.jsp#

  8. Skapa en mappstruktur i CRXDE, till exempel /apps/[fontslibrary]/[customlibrary(clientlibrary)].

  9. Gå till den nyligen skapade mappen clientlibs och lägg till egenskaperna allowProxy och categories.

  10. Navigera till /apps/[fontslibrary]/[customlibrary(clientlibrary)] och skapa en css-mapp.

  11. Gå till den skapade CSS-mappen och skapa en fil. Skapa till exempel en fil som fonts.css och klistra in inbäddningskoden tillsammans med URL:en.
    Mappstruktur

  12. Spara ändringarna.

NOTE
Om du vill använda de tillagda anpassade teckensnitten i ett adaptivt formulär måste du se till att klientbiblioteksnamnet i Client Library Category justeras mot namnet som anges i kategorialternativet i mappen clientlib.

De medföljande teckensnitten är nu tillgängliga för det adaptiva formuläret via följande anpassade teckensnittsklientbibliotek.

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