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

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

hero-image

Den här självstudiekursen är ett steg i Skapa ditt första adaptiva formulär serie. 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 temaredigerare för att skapa egna 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 på shipping-address-add-update-form adaptiva formulär använder rubrikbilder och logotypbilder. 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. I egenskapswebbläsaren går du till Basic > Adaptive Form Theme. The Adaptive Form Theme I visas alla färdiga och anpassade teman. Som standard används Canvas-temat.

  3. Välj ett tema på menyn Adaptive Form Theme fält. Till exempel: Undersökningstema. Välj aem_6_3_forms_save så att du kan använda det valda temat.

    Adaptiv form med standardtemat

    Bild: Adaptiv form med standardtemat

    Adaptiv form med Undersökningstemat

    Bild: Adaptiv form 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 header -komponent och markera cmppr properties. I image väljer du X för att ta bort den befintliga logotypbilden.

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

    4. Markera rubriktext, We.Retailoch markera aem_6_3_edit edit. Ändra rubriktext till we retail. Använd endast fet stil på wein 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 cmppr egenskaper.

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

    3. Ta bort innehållet i Title fält och markera 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 temaredigerare för att skapa egna 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 markera Theme. The Create Theme visas en sida med de fält som krävs för att skapa ett tema. The Title och Name fält är obligatoriska:

    • Titel: Ange en titel på temat. Till exempel: Global Theme. Titeln hjälper dig att identifiera temat från listan med teman.
    • Namn: Ange namnet på temat. Till 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änds 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 Preview Form fält, välj shipping-address-add-update-form adaptiv form, välj aem_6_3_forms_save , markera Save. Nu är temaredigeraren konfigurerad att använda ditt eget adaptiva formulär i stället för det adaptiva standardformatet. Välj Cancel för att gå tillbaka till temaredigeraren.

    anpassat tema

    Bild: Theme editor with the shipping-address-add-update-form adaptive form

    create-a-theme

    Bild: Anpassningsbart 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 i Header > Text på panelen Väljare. Väljarpanelen är till vänster om temaredigeraren. Om panelen inte visas väljer du växlingspanel Växla sidopanel.

  2. Ange följande egenskaper i dialogrutan Text dragspelspanel och markera 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. Välj header widget och markera Header. Alternativen för att formatera sidhuvudswidgeten visas till vänster. Expandera Dimensions & Position dragspelspanel, ange Height till 120pxoch markera aem_6_3_forms_save .

  4. Expandera Background dragspelspanel för sidhuvudswidgeten, ange Background Color till F6921E.

    Hovring Image & Gradient > + Add, markera Image. Ange följande egenskaper och markera 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 Innan du börjar -avsnitt.
    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 markera 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: 1 rem

    Tips: Välj länkikon för att ange olika värden för varje fält.

    Höjd 4,75rem
  6. Välj sidfotswidgeten och välj Footer. Expandera Background dragspelspanel, ange Background Color till F6921Eoch markera 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. Välj Customer ID och välj Field Widget alternativ. Ange följande egenskaper och markera 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 Customer ID fält och markera Responsive Panel Container. Ange Background > Background Color till 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 en identisk stil på alla knappar i det adaptiva formuläret och infogad formatering om du vill använda ett format på en viss knapp. Så här formaterar du knapparna:

  1. Välj Submit och väljer Button alternativ. Ange följande egenskaper och markera 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 Theme, till din anpassningsbara form. 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. I det övre fältet väljer du Style alternativ.

    style-option

  3. Välj Attach och väljer aem_6_3_edit -ikon. Ange följande egenskaper i dialogrutan Dimensions and Position dragspelspanel:

    table 0-row-2 1-row-2 2-row-2
    Egenskap Värde
    Float Vänster
    Bredd 10 %
  4. Välj Government approved address proof och väljer aem_6_3_edit -ikon. 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. Välj Submit och väljer aem_6_3_edit -ikon. 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 tjänst i Web Fonts. Du kan konfigurera och använda tjänsten med adaptiva formulär. Används Adobe Fonts i adaptiv form:

  1. Sök i bibliotek 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ägga till ett teckensnittsbibliotek

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

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

  6. Klicka Klar för att stänga webbprojektfönstret.

  7. Logga in i 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 nyskapade clientlibs mapp och lägg till allowProxy och categories egenskaper.

  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 klientbibliotekets namn finns i Client Library Category justerar med det namn 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