DocumentatieAEM 6.5Handboek

Stijl uw adaptieve formulier do-not-publish-style-your-adaptive-form

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Gemaakt voor:

  • Beheerder
  • Gebruiker
  • Ontwikkelaar

Leer een aangepast thema te maken, afzonderlijke onderdelen op te maken en Webben Fonts in een thema te gebruiken.

held-beeld

Dit leerprogramma is een stap in creeert Uw Eerste AanpassingsVormreeksen. De Adobe raadt u aan de reeks in chronologische volgorde te volgen om de volledige Gebruikszaak van de zelfstudie te begrijpen, uit te voeren en te demonstreren.

Over de zelfstudie about-the-tutorial

U kunt thema's gebruiken om een adaptief formulier een unieke vormgeving en stijl te geven. U kunt kant-en-klare thema's toepassen die worden geleverd met de adaptieve formuliereditor of zelf aangepaste thema's maken. AEM Forms verstrekken a themaredacteurom douanethema's tot stand te brengen. Met één thema kunt u hetzelfde adaptieve formulier weergeven dat u op mobiele apparaten, tablets of desktops hebt geopend. Eerdere kennis van CSS of LESS is niet vereist voor het gebruik van de themaeditor, maar is wel gewenst.

Aan het einde van de zelfstudie moet u het volgende kunnen doen:

  • Een thema uit het vak toepassen op een adaptief formulier
  • Een thema maken voor een adaptief formulier met de themaeditor
  • Afzonderlijke componenten opmaken
  • Bonussectie: Webben Fonts gebruiken in een aangepast thema

Het formulier moet er ongeveer als volgt uitzien nadat u de zelfstudie hebt voltooid:

Vorm met een douanethema

Voordat u begint before-you-start

Download de koptekst- en logo-afbeeldingen hieronder op uw lokale computer. De koptekst van het shipping-address-add-update-form adaptieve formulier gebruikt de koptekst- en logo-afbeeldingen. De koptekstafbeelding wordt rechts van de koptekst weergegeven.

Bestand ophalen

Bestand ophalen

Stap 1: Een thema toepassen op het aangepaste formulier step-apply-a-theme-to-your-adaptive-form

De adaptieve vormenredacteur verstrekt veelvoudige uit-van-de-doos thema's. Als u geen aangepaste stijl wilt gebruiken voor het aangepaste formulier, kunt u ook uw aangepaste formulieren publiceren met een thema dat buiten de verpakking valt. Thema's zijn onafhankelijk van adaptieve vormen. U kunt hetzelfde thema toepassen op meerdere adaptieve formulieren.

om een thema op uw adaptieve vorm toe te passen:

  1. Open het aangepaste formulier voor bewerking.

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

  2. Open eigenschappen van Adaptive Form container . Navigeer in de eigenschappenbrowser naar Basic > Adaptive Form Theme . In het veld Adaptive Form Theme worden alle kant-en-klare thema's en aangepaste thema's weergegeven. Standaard wordt het thema Canvas toegepast.

  3. Selecteer een thema in het veld Adaptive Form Theme . Bijvoorbeeld, het thema van het Onderzoek. Selecteer name_6_3_forms_save zodat kunt u het geselecteerde thema toepassen.

    Aangepaste vorm met het standaardthema

    Cijfer: Aangepaste vorm met het standaardthema

    Aangepaste vorm met het thema van het Onderzoek

    Figuur: Aangepaste vorm met het thema van het Onderzoek

Stap 2: Werk het aangepaste formulier bij step-update-your-adaptive-form

Voor het hierboven weergegeven ontwerp zijn wijzigingen vereist in de plaatsaanduidingstekst en het logo van het bestaande adaptieve formulier.

om uw adaptieve vorm bij te werken:

  1. Wijzig het bestaande logo en de tekst van de koptekst. Het logo verwijderen:

    1. Open het formulier in de formuliereditor.

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

    2. Selecteer het embordbeeld in de header component en selecteer cmp properties. Selecteer in de eigenschap image de optie X om de bestaande logoafbeelding te verwijderen.

    3. Selecteer upload, selecteer logo.png, en selecteer aem_6_3_forms_save om de veranderingen te bewaren. Het beeld werd gedownload in alvorens usectie begint.

    4. Selecteer kopbaltekst, We.Retail, en selecteer aem_6_3_edit edit. Wijzig de koptekst in we retail . Pas vette opmaak alleen toe op we in we retail .

      wij-retail-logo-text

  2. Titel verwijderen en plaatsaanduidingstekst toevoegen:

    1. Selecteer het gebied van identiteitskaart van de Klant en selecteer cmp eigenschappen.

    2. Kopieer de inhoud van het veld Title naar het veld Placeholder Text .

    3. Schrap de inhoud van het Title gebied en selecteer aem_6_3_forms_save .

    4. Herhaal de vorige drie stappen voor alle tekstvakken, het numerieke vak en het e-mailveld in het formulier.

      update-adaptive-form

Stap 3: Een aangepast thema maken voor het aangepaste formulier step-create-a-custom-theme-for-your-adaptive-form

U kunt de themaredacteurgebruiken om douanethema's tot stand te brengen. De themaredacteur is een almachtige redacteur WYSIWYG. Het is een visuele methode om CSS op diverse componenten van een adaptieve vorm toe te passen. Het biedt fijnere besturingselementen voor stijlcomponenten en deelvensters van een adaptieve vorm.

Een thema is een afzonderlijke entiteit, zoals adaptieve formulieren. Deze bevat stijlen (CSS) voor de componenten en deelvensters van een adaptief formulier. Stijlen omvatten CSS-eigenschappen zoals achtergrondkleuren, statuskleuren, transparantie, uitlijning en grootte. Wanneer u een thema toepast, wordt de opgegeven stijl toegepast op de corresponderende componenten van een adaptief formulier.

In deze zelfstudie maakt u een stijl van de kop- en voettekst, tekst en numerieke componenten, de bijlage en knoppen. Laten we beginnen met het maken van een thema:

Een thema maken create-a-theme

  1. Meld u aan bij de AEM auteur en navigeer naar Adobe Experience Manager > Forms > Themes . Het gebrek URL is http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.

  2. Selecteer Create en selecteer Theme . De pagina Create Theme met de velden die nodig zijn om een thema te maken, wordt weergegeven. De velden Title en Name zijn verplicht:

    • Titel: specificeer een titel van het thema. Bijvoorbeeld, Globaal Thema. Met de titel kunt u het thema herkennen aan de lijst met thema's.
    • Naam: specificeer de naam van het thema. Bijvoorbeeld, globaal-Thema. Er wordt een knooppunt met de opgegeven naam gemaakt in de repository. Wanneer u een titel begint te typen, wordt automatisch de waarde voor het naamveld gegenereerd. U kunt de voorgestelde waarde wijzigen. Het naamveld mag alleen alfanumerieke tekens, afbreekstreepjes en onderstrepingstekens bevatten. Alle ongeldige invoer wordt vervangen door een afbreekstreepje.

  3. Selecteer Create. Er wordt een thema gemaakt en er verschijnt een dialoogvenster waarin u het formulier kunt openen om het te bewerken. Selecteer Open om het nieuwe thema op een nieuw tabblad te openen. Het thema wordt geopend in de themaeditor. Voor de opmaak gebruikt de themaeditor een adaptief formulier dat niet meer in de doos wordt geleverd bij AEM Forms .

    Voor informatie over het gebruiken van de themaredacteur UI, zie Ongeveer de themaredacteur.

  4. Selecteer Theme Options thema-opties > Configure. Op het Preview Form gebied, selecteer verschepen-adres-toe:voegen-update-vorm adaptieve vorm, uitgezochte aem_6_3_forms_save , Save. De themaeditor is nu geconfigureerd voor het gebruik van uw eigen adaptieve formulier in plaats van het standaard adaptieve formulier. Selecteer Cancel om terug te keren naar de themaeditor.

    douane-thema

    Cijfer: de redacteur van het Thema met het verschepen-adres-toe:voegen-update-vorm adaptieve vorm

    creeer-a-thema

    Cijfer: Aangepaste vorm met de standaardvorm

Stijlkop- en voettekst style-header-and-footer

Koptekst en voettekst geven een consistent en duidelijk beeld van een adaptief formulier. Over het algemeen bevat de koptekst het logo en de naam van de organisatie, bevat de voettekst copyrightinformatie en deze blijven in meerdere vormen van een organisatie identiek. De kop- en voettekst van het adaptieve formulier voor het verzendadres-add-update-formulier opmaken:

  1. Navigeer in het deelvenster Kiezers naar de optie Header > Text . Het deelvenster Kiezers bevindt zich links van de themaeditor. Als het paneel niet zichtbaar is, uitgezochte knevel-zij-paneel Knevel paneel.

  2. Plaats de volgende eigenschappen in Text accordion en selecteer aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Eigenschap Waarde
    Lettertypefamilie Arial®
    Lettertypekleur FFFFFF
    Tekengrootte 54 px

  3. Selecteer de header -widget en selecteer Header . De opties voor het opmaken van de koptekstwidget worden aan de linkerkant weergegeven. Breid Dimensions & Position accordion uit, plaats Height aan 120px, en selecteer aem_6_3_forms_save .

  4. Vouw de accordeon Background van de koptekstwidget uit, stel de Background Color in op F6921E.

    Houd de cursor boven Image & Gradient > + Add en selecteer Image . Plaats de volgende eigenschappen en selecteer aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Eigenschap Waarde
    image Upload header-style.png. Het beeld werd gedownload in alvorens usectie begint.
    Positie Rechts onder
    Naast elkaar Niet herhalen

  5. Selecteer in de themaeditor het logo in de koptekst en selecteer Header Logo . Breid de Dimensionen & de accordeon van de Positie uit, plaats de volgende eigenschappen en selecteer aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 html-authored no-header
    Marge Waarde
    Marge
    • Boven: 1,5 rem
    • Onder: -35 px
    • Links: 1rem

    Uiteinde: selecteer het verbindingspictogram om een verschillende waarde aan elk gebied te verstrekken.

    Hoogte 4.75 rem

  6. Selecteer de voettekstwidget en selecteer Footer . Breid Background accordion uit, plaats Background Color aan F6921E, en selecteer aem_6_3_forms_save .

De component voor gegevensvastlegging opmaken en een achtergrond op het adaptieve formulier toepassen style-the-data-capture-component-and-apply-a-background-to-the-adaptive-form

U kunt meerdere componenten in een adaptief formulier gebruiken om gegevens vast te leggen. Bijvoorbeeld tekstvak en numeriek vak. U kunt voor elke component een identieke stijl opgeven voor alle componenten voor het vastleggen van gegevens of een aparte stijl. In deze zelfstudie wordt een identieke stijl toegepast op numerieke vakken (Customer ID, ZIP Code) en tekstvakken (Customer ID, Name, Shipping Address, State, Email). De componenten voor gegevensvastlegging opmaken:

  1. Selecteer het veld Customer ID en selecteer de optie Field Widget . Plaats de volgende eigenschappen en selecteer 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
    Accordeon Eigenschap Waarde
    Rand Randkleur A7A9AC
    Rand Straal rand
    • Boven: 7 px
    • Rechts: 7 px
    • Onder: 7 px
    • Links: 7 px
    Tekst Lettertypefamilie Arial®
    Tekst Lettertypekleur 939598
    Tekst Tekengrootte 18 px
    Dimensionen en positie Breedte 60%
    Dimensionen en positie Marge
    • Links: 10 rem

  2. Selecteer het lege gebied boven het veld Customer ID en selecteer Responsive Panel Container . Stel Background > Background Color in op F1F2F2. Selecteer name_6_3_forms_save .

    Responsieve paneelcontainer

De knoppen opmaken style-the-buttons

U kunt een douanethema gebruiken om een identieke stijl op alle knopen van de adaptieve vorm toe te passen en gealigneerd het stilerenom een stijl op een specifieke knoop toe te passen. U kunt als volgt de knoppen opmaken:

  1. Selecteer de knop Submit en selecteer de optie Button . Plaats de volgende eigenschappen en selecteer 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
    Accordeon Eigenschap Waarde
    Achtergrond Achtergrondkleur F6921E
    Rand Randkleur F6921E
    Rand Straal rand
    • Boven: 7 px
    • Rechts: 7 px
    • Onder: 7 px
    • Links: 7 px
    Tekst Lettertypefamilie Arial®
    Tekst Lettertypekleur FFFFFF
    Tekst Tekengrootte 18 px

  2. pas het douanethema, Globaal Thema, op uw adaptieve vorm toe. Als de stijl niet op het adaptieve formulier wordt weerspiegeld, maakt u de cache van de browser leeg en probeert u het opnieuw.

    stijl-gegeven-vangst-componenten

Stap 4: afzonderlijke onderdelen opmaken step-style-individual-components

Sommige stijlen zijn alleen van toepassing op een bepaalde component. Dergelijke componenten worden opgemaakt in de editor voor adaptieve formulieren.

  1. Open het aangepaste formulier voor bewerking. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. Selecteer op de bovenste balk de optie Style .

    stijl-optie

  3. Selecteer de Attach knoop en selecteer aem_6_3_edit pictogram. Stel de volgende eigenschappen in in de accordeon Dimensions and Position :

    table 0-row-2 1-row-2 2-row-2
    Eigenschap Waarde
    Float Links
    Breedte 10%

  4. Selecteer de Government approved address proof optie en selecteer aem_6_3_edit pictogram. Stel de volgende eigenschappen in:

    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
    Accordeon Eigenschap Waarde
    Dimensionen en positie Float Links
    Dimensionen en positie Breedte 73%
    Dimensionen en positie Opvulling
    • Links: 10 px
    Dimensionen en positie Hoogte 40 px
    Dimensionen en positie Marge
    • Recht: 2 rem
    • Links: 10 rem
    Achtergrond Achtergrondkleur FFFFFF
    Rand Randbreedte 1 px
    Rand Randstijl Effen
    Rand Randkleur A7A9AC
    Rand Straal rand 7 px
    Tekst Lettertypefamilie Arial®
    Tekst Lettertypekleur BCBEC0
    Tekst Tekengrootte 18 px
    Tekst Lijnhoogte 2

  5. Selecteer de Submit knoop en selecteer aem_6_3_edit pictogram. Stel de volgende eigenschappen in:

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 html-authored no-header
    Accordeon Eigenschap Waarde
    Dimensionen en positie Float Rechts
    Dimensionen en positie Marge
    • Boven: 5 rem
    • Rechts: 14 rem
    • Onder: 20 px
    • Links: 20 px
    Achtergrond Achtergrondkleur F6921E
    Rand Randkleur F6921E

    stiled-adaptive-form-1

Stap 5: Sectie van de beurs: Het gebruiken van Webben Fonts in een douanethema step-bonus-section-using-web-fonts-in-a-custom-theme

U kunt verschillende lettertypen gebruiken om een adaptief formulier te ontwerpen. Op alle apparaten waarop het adaptieve formulier wordt weergegeven, worden mogelijk niet de fonts gebruikt om het adaptieve formulier te ontwerpen. U kunt een service voor weblettertypen gebruiken om de vereiste lettertypen aan het doelapparaat te leveren.

Adobe Fonts is een service Webben Fonts. U kunt de service configureren en gebruiken met adaptieve formulieren. U kunt Adobe Fonts als volgt aanpassen:

  1. Blader de bibliotheek van de doopvonten van de Adobeen kies doopvont om uw vorm te stileren.
NOTE
U kunt labels of filters toevoegen om de lijst met lettertypen te verfijnen.

  1. Klik op de knop </> om de familie aan een webproject toe te voegen, voor het geval u een lettertype vindt dat u bevalt.

    selecteren-doopvont-van-doopvont-bibliotheek

    Er verschijnt een dialoogvenster Lettertypen toevoegen aan een webproject.

    note note
    NOTE
    U kunt alleen lettertypen aan uw webproject toevoegen als de knop </> beschikbaar is.

  2. Noem uw Webproject.

  3. Schakel de selectievakjes in om de tekendikten en -stijlen te selecteren die u wilt opnemen.

    voeg een doopvontbibliotheek toe

  4. Selecteer klik om het project tot stand te brengen.

  5. Kopieer de insluitcode en de URL van het scherm.
    bed code en URL in

  6. Klik Gedaan om het venster van het Webproject te sluiten.

  7. Meld u aan bij uw AEM en ga naar de URL http://server:port/crx/de/index.jsp#

  8. Maak bijvoorbeeld een mapstructuur in CRXDE /apps/[fontslibrary]/[customlibrary(clientlibrary)] .

  9. Ga naar de nieuwe map clientlibs en voeg de eigenschappen allowProxy en categories toe.

  10. Navigeer naar /apps/[fontslibrary]/[customlibrary(clientlibrary)] en maak een css-map.

  11. Ga naar de gemaakte CSS-map en maak een bestand. Maak bijvoorbeeld een bestand als fonts.css en plak de insluitcode samen met de URL.
    de structuur van de Omslag

  12. Sla de wijzigingen op.

NOTE
Als u de toegevoegde aangepaste lettertypen in een adaptief formulier wilt gebruiken, moet u ervoor zorgen dat de naam van de clientbibliotheek in de Client Library Category wordt uitgelijnd met de naam die is opgegeven in de categoriesoptie van de clientlib-map.

De opgenomen lettertypen zijn nu toegankelijk voor het adaptieve formulier via de volgende aangepaste clientbibliotheek voor lettertypen.

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