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

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

hoofdafbeelding

Deze zelfstudie is een stap in de Uw eerste adaptieve formulier maken reeks. 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 een themaeditor aangepaste thema's maken. 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:

Formulier met een aangepast thema

Voordat u begint before-you-start

Download de koptekst- en logo-afbeeldingen hieronder op uw lokale computer. De koptekst van de shipping-address-add-update-form Het 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.

Een thema toepassen op het aangepaste formulier:

  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. Blader in de eigenschappenbrowser naar Basic > Adaptive Form Theme. De 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 menu Adaptive Form Theme veld. Bijvoorbeeld: Onderzoeken. Selecteren aem_6_3_forms_save zodat u het geselecteerde thema kunt toepassen.

    Aangepast formulier met het standaardthema

    Afbeelding: Aangepast formulier met het standaardthema

    Aangepast formulier met het thema Beoordeling

    Afbeelding: Aangepast formulier met het thema Beoordeling

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.

Het aangepaste formulier bijwerken:

  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. Logoafbeelding selecteren in het dialoogvenster header en selecteert u cmppr properties. In de image selecteert u X om de bestaande logoafbeelding te verwijderen.

    3. Selecteren upload selecteert u het bestand logo.png en selecteert u aem_6_3_forms_save om de wijzigingen op te slaan De afbeelding is gedownload in het dialoogvenster Voordat u begint sectie.

    4. Koptekst selecteren We.Retailen selecteert u aem_6_3_edit edit. Koptekst wijzigen in we retail. Alleen vette opmaak toepassen op wein we retail.

      we-retail-logo-text

  2. Titel verwijderen en plaatsaanduidingstekst toevoegen:

    1. Selecteer het veld Customer ID en selecteer cmppr eigenschappen.

    2. Kopieer de inhoud van de Title aan de Placeholder Text veld.

    3. De inhoud van het dialoogvenster Title veld 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.

      aangepast-vorm

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

U kunt de themaeditor aangepaste thema's maken. 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. De standaard-URL is http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.

  2. Selecteren Create en selecteert u Theme. De Create Theme Er verschijnt een pagina met de velden die u nodig hebt om een thema te maken. De Title en Name velden zijn verplicht:

    • Titel: Geef een titel van het thema op. Bijvoorbeeld: Globaal thema. Met de titel kunt u het thema herkennen aan de lijst met thema's.
    • Naam: Geef de naam van het thema op. 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. Selecteren Open om het nieuwe thema op een nieuw tabblad te openen. Het thema wordt geopend in de themaeditor. Voor het opmaken gebruikt de themaeditor een adaptief formulier dat niet in de doos is meegeleverd en dat wordt geleverd met AEM Forms.

    Voor informatie over het gebruiken van de interface van de themaredacteur, zie Informatie over de themaeditor.

  4. Selecteren Theme Options thema-opties > Configure. In de Preview Form veld selecteert u de verzendadres-add-update-form adaptief formulier, selecteer aem_6_3_forms_save , selecteert u Save. De themaeditor is nu geconfigureerd voor het gebruik van uw eigen adaptieve formulier in plaats van het standaard adaptieve formulier. Selecteren Cancel om terug te keren naar de themaeditor.

    aangepast thema

    Afbeelding: Thema-editor met het adaptieve formulier voor het verzendadres-add-update

    creëren-a-thema

    Afbeelding: Adaptief formulier met het standaardformulier

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. Navigeren door de Header > Text in het deelvenster Kiezers. Het deelvenster Kiezers bevindt zich links van de themaeditor. Als het deelvenster niet zichtbaar is, selecteert u schakelen tussen zijpaneel Zijpaneel in-/uitschakelen.

  2. Stel de volgende eigenschappen in in de Text accordeon 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 uit Dimensions & Position accordeon instellen Height tot 120pxen selecteert u aem_6_3_forms_save .

  4. Breid uit Background stelt de accordeon van de koptekstwidget in Background Color tot F6921E.

    Overslaan Image & Gradient > + Add, selecteert u Image. Stel de volgende eigenschappen in 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. De afbeelding is gedownload in het dialoogvenster Voordat u begint sectie.
    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

    Tip: Selecteer de koppelingspictogram als u voor elk veld een andere waarde wilt opgeven.

    Hoogte 4.75 rem
  6. Selecteer de voettekstwidget en selecteer Footer. Breid uit Background accordeon instellen Background Color tot F6921Een selecteert u 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 de Customer ID en selecteer de Field Widget -optie. Stel de volgende eigenschappen in 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 de Customer ID veld en selecteer Responsive Panel Container. Stel de Background > Background Color tot F1F2F2. Selecteren aem_6_3_forms_save .

    Container voor responsief deelvenster

De knoppen opmaken style-the-buttons

U kunt een aangepast thema gebruiken om een identieke stijl toe te passen op alle knoppen van het aangepaste formulier en inline styling om een stijl op een specifieke knoop toe te passen. U kunt als volgt de knoppen opmaken:

  1. Selecteer de Submit en selecteert u de Button -optie. Stel de volgende eigenschappen in 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. Het aangepaste thema toepassen, Global Theme, in uw adaptieve vorm. Als de stijl niet op het adaptieve formulier wordt weerspiegeld, maakt u de cache van de browser leeg en probeert u het opnieuw.

    style-data-capture-components

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 -optie.

    style-option

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

    table 0-row-2 1-row-2 2-row-2
    Eigenschap Waarde
    Float Links
    Breedte 10%
  4. Selecteer de Government approved address proof en selecteert u de 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 en selecteert u de 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

    styled-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 dienst van Webben Fonts. U kunt de service configureren en gebruiken met adaptieve formulieren. Te gebruiken Adobe Fonts in adaptieve vorm:

  1. Bladeren in het dialoogvenster bibliotheek met Adobe lettertypen en kies een font om het formulier op te maken.
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.

    select-font-from-font-library

    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.

    een lettertypebibliotheek toevoegen

  4. Selecteren Klikken om het project te maken.

  5. Kopieer de insluitcode en de URL van het scherm.
    code en URL insluiten

  6. Klikken Gereed 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. Een mapstructuur maken in bijvoorbeeld CRXDE /apps/[fontslibrary]/[customlibrary(clientlibrary)].

  9. Naar het nieuwe ontwerp gaan clientlibs en voeg de allowProxy en categories eigenschappen.

  10. Navigeren 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.
    Mapstructuur

  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 het dialoogvenster Client Library Category Hiermee wordt uitgelijnd op de naam die is opgegeven in de categorieoptie 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