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

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

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

Öppna egenskaper för Adaptiv formulärbehållare. I egenskapswebbläsaren går du till Grundläggande > Adaptivt formulärtema. The Adaptivt formulärtema I visas alla färdiga och anpassade teman. Som standard används Canvas-temat.

Välj ett tema på menyn Adaptivt formulärtema fält. Till exempel: Undersökningstema. Tryck för att använda det valda temat.

Ä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. Tryck på logotypbilden i rubrikkomponenten och tryck på egenskaper. Tryck på X i egenskapen image för att ta bort den befintliga logotypbilden.

3. Tryck på upload, välj logo.png och tryck sedan på för att spara ändringarna. Bilden hämtades i Innan du börjar -avsnitt.

4. Tryck på rubriktext, We.Retailoch trycka redigera. Ändra rubriktext till we retail. Använd endast fet stil på wein we retail.

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

1. Tryck på fältet Kund-ID och tryck på egenskaper.
2. Kopiera innehållet i Titel fält till Platshållartext fält.
3. Ta bort innehållet i Titel fält och knacka .
4. Upprepa de tre föregående stegen för alla textrutor, numeriska rutor och e-postfält i formuläret.

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

Tryck Create och markera Theme. Sidan Skapa tema med de fält som krävs för att skapa ett tema visas. Fälten Titel och Namn är obligatoriska:

• Titel: Ange en titel på temat. Till exempel: Globalt tema. 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 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.

Tryck Skapa. Ett tema skapas och en dialogruta visas där du kan öppna formuläret för redigering. Tryck Öppna 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.

Tryck Temaalternativ > Konfigurera. I Förhandsgranska formulär välj shipping-address-add-update-form adaptiv form, knacka , trycka Spara. Nu är temaredigeraren konfigurerad att använda ditt eget adaptiva formulär i stället för det adaptiva standardformatet. Tryck Avbryt för att gå tillbaka till temaredigeraren.

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

Bild: Anpassningsbart formulär med standardformuläret

Navigera i Sidhuvud > Text på panelen Väljare. Väljarpanelen är till vänster om temaredigeraren. Om panelen inte visas trycker du på Växla sidopanel.

Ange följande egenskaper i dialogrutan Text dragspelspanel och tryck .

Tryck på sidhuvudswidgeten och tryck på Sidhuvud. Alternativen för att formatera sidhuvudswidgeten visas till vänster. Expandera Dimensioner och position dragspelspanel, ange Höjd till 120pxoch trycka .

Expandera bakgrundsdragspelspanelen för sidhuvudswidgeten och ange Bakgrundsfärg till F6921E.

Hovra över Bild och övertoning > + Lägg till, trycka Bild. Ange följande egenskaper och tryck .

Tryck på logotypen i sidhuvudet i temaredigeraren och tryck på Rubriklogotyp. Expandera dragspelet Dimensioner och position, ange följande egenskaper och tryck .

Tryck på det tomma området ovanför fältet Kund-ID och tryck på Behållare för responsiv panel. Ange Bakgrund > Bakgrundsfärg till F1F2F2. Tryck .

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.

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

I det övre fältet väljer du Stil alternativ.

Tryck på Bifoga och tryck på ikon. Ange följande egenskaper i dialogrutan Dimensioner och position dragspelspanel:

Tryck på Myndighetens adressbevis har godkänts och tryck på ikon. Ange följande egenskaper:

Skapa en Adobe Typekit skapar du ett kit, lägger till Myriad Pro-teckensnitt i paketet, publicerar paketet och hämtar Kit-ID:t. Du måste använda Adobe Typekit-teckensnitt (webbteckensnitt) i en anpassningsbar form.

På AEM Forms-servern går du till Adobe Experience Manager > verktyg > Distribution > Cloud Services. På sidan Cloud Services navigerar du till Tjänster från tredje part > Typekit och klicka Konfigurera Nu under Typekit. Om det redan finns en konfiguration klickar du på plusknappen (+) för att skapa en ny instans.

I dialogrutan Skapa konfiguration anger du en Titel för konfigurationen och klicka på Skapa. Du omdirigeras till konfigurationssidan. Dialogrutan Redigera komponent visas. Paket-ID och klicka OK.

Konfigurera temat så att det använder TypeKit-konfigurationen. Öppna på författarinstansen Globalt tema i temaredigeraren. Gå till Temaalternativ i temaredigeraren > Konfigurera. I Typekit-konfiguration markerar du paketet och klickar på Spara.

Teckensnitten som lagts till i Typekit kan väljas i Text dragspelspanelen för alla komponenter.