Stijl uw adaptieve formulier

Leer hoe u een aangepast thema maakt, afzonderlijke componenten opmaakt en weblettertypen in een thema gebruikt

Deze zelfstudie is een stap in de serie Uw eerste adaptieve vorm maken. U wordt aangeraden de reeks in chronologische volgorde te volgen om het volledige gebruik van de zelfstudie te begrijpen, uit te voeren en aan te tonen.

Informatie over de zelfstudie

U kunt thema's gebruiken om een adaptief formulier een unieke vormgeving en stijl te geven. U kunt thema's uit de doos toepassen die van de adaptieve redacteur van vormen worden voorzien of douanethema's van uw tot stand brengen. AEM Forms biedt een themaeditor om aangepaste thema's te 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 leert u:

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

Het formulier ziet er ongeveer als volgt uit nadat u de zelfstudie hebt voltooid:

Formulier met een aangepast thema

Voordat u begint

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

Bestand ophalen

Bestand ophalen

Stap 1: Een thema toepassen op uw aangepaste formulier

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 een adaptief 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 Aangepaste formuliercontainer. Navigeer in de eigenschappenbrowser naar Basic > Adaptief formulierthema. In het veld Adaptief formulierthema worden alle kant-en-klare en aangepaste thema's weergegeven. Standaard wordt het thema Canvas toegepast.

  3. Selecteer een thema in het veld Adaptief formulierthema. Bijvoorbeeld Beoordelingsthema. Tik aem_6_3_forms_save om het geselecteerde thema toe te passen.

Aangepast formulier met het standaardthema

Afbeelding: Adaptief formulier met standaardthema

Aangepast formulier met het thema Beoordeling

Afbeelding: Adaptief formulier met het thema Beoordeling

Stap 2: Het aangepaste formulier bijwerken

Voor het hierboven weergegeven ontwerp zijn wijzigingen vereist in de plaatsaanduidingstekst en het logo van het bestaande adaptieve formulier. Voer de volgende stappen uit om de vereiste wijzigingen aan te brengen:

  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. Tik op de afbeelding met het logo in de koptekstcomponent en tik op cmpr-eigenschappen. Tik in de afbeeldingseigenschap op X om de bestaande logoafbeelding te verwijderen.

    3. Tik op Uploaden, selecteer het bestand logo.png en tik op aem_6_3_forms_save om de wijzigingen op te slaan. De afbeelding is gedownload in de sectie Voordat u start.

    4. Tik op koptekst, We.Retail en tik aem_6_3_edit edit. Wijzig de koptekst in we retail. Pas vette opmaak alleen toe op wein we retail.

    we-retail-logo-text

  2. Titel verwijderen en plaatsaanduidingstekst toevoegen:

    1. Tik op het veld Klantnummer en tik op cmpr eigenschappen.
    2. Kopieer de inhoud van het veld Title naar het veld Plaatsaanduiding tekst.
    3. Verwijder de inhoud van het veld Title en tik op 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 uw aangepaste formulier

U kunt themaeditor gebruiken om aangepaste thema's te 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

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

  2. Tik Create en selecteer Theme. De pagina Thema maken met de velden die nodig zijn om een thema te maken, wordt weergegeven. De velden Titel en Naam 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 Global-Theme. Er wordt een knooppunt met de opgegeven naam gemaakt in de repository. Wanneer u een titel begint te typen, wordt automatisch een 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. Tik Maken. Er wordt een thema gemaakt en er verschijnt een dialoogvenster waarin u het formulier kunt openen om het te bewerken. Tik Open om het zojuist gemaakte 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 bij AEM Forms wordt geleverd.

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

  4. Tik Thema-opties theme-options > Configure. Selecteer in het veld Voorvertoning van formulier het adaptieve formulier Verzendadres-add-update-form, tik aem_6_3_forms_save op Opslaan. De themaeditor is nu geconfigureerd voor het gebruik van uw eigen adaptieve formulier in plaats van het standaard adaptieve formulier. Tik op Annuleren om terug te keren naar de themaeditor.

    aangepast thema

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

    thema maken

    Afbeelding: Adaptief formulier met 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. Navigeer de optie Koptekst > Tekst in het deelvenster Kiezers. Het deelvenster Kiezers bevindt zich links van de themaeditor. Tik Zijpaneel in-/uitschakelen Zijpaneel in-/uitschakelen als het deelvenster niet zichtbaar is.

  2. Stel de volgende eigenschappen in de accordeon Text in en tik aem_6_3_forms_save.

    Eigenschap Waarde
    Lettertypefamilie Arial
    Lettertypekleur FFFFFF
    Fontgrootte 54 px
  3. Tik op de koptekstwidget en tik Koptekst. De opties voor het opmaken van de koptekstwidget worden links weergegeven. Breid Dimension & Positie accordeon uit, plaats Hoogte aan 120px, en tik aem_6_3_forms_save.

  4. Breid de achtergrondaccordeon van de kopbalwidget uit, plaats Achtergrondkleur aan F6921E.

    Houd de cursor boven Afbeelding en verloop > + Toevoegen, tik Afbeelding. Stel de volgende eigenschappen in en tik op aem_6_3_forms_save.

    Eigenschap Waarde
    afbeelding Upload header-style.png. De afbeelding is gedownload in de sectie Voordat u start.
    Positie Rechts onder
    Naast elkaar Niet herhalen
  5. Tik in de themaeditor op het logo in de koptekst en tik Koptekstlogo. Vouw de accordeon Dimension en positie uit, stel de volgende eigenschappen in en tik aem_6_3_forms_save.

Marge Waarde
Marge
  • Boven: 1.5 rem
  • Onder: -35 px
  • Links: 1rem

Tip: Tik op het koppelingspictogram om voor elk veld een andere waarde in te stellen.

Hoogte 4.75 rem
  1. Tik op de voettekstwidget en tik Voettekst. Breid Achtergrond accordeon uit, plaats Achtergrondkleur aan F6921E, en tik aem_6_3_forms_save.

Maak de component voor gegevensvastlegging op en pas een achtergrond toe op het adaptieve formulier

U kunt meerdere componenten in een adaptief formulier gebruiken om gegevens vast te leggen. Bijvoorbeeld tekstvak en numeriek vak. U kunt identieke stijl aan alle gegevens verstrekken vangt componenten of afzonderlijke stijl voor elke component. 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. Tik op het veld Customer ID en tik op de optie Widget veld. Stel de volgende eigenschappen in en tik op aem_6_3_forms_save.
Accordeon Eigenschap Waarde
Rand Randkleur A7A9AC
Rand Straal rand
  • Boven: 7px
  • Rechts: 7px
  • Onder: 7px
  • Links: 7px
Tekst Lettertypefamilie Arial
Tekst Lettertypekleur 939598
Tekst Fontgrootte 18 px
Dimension en positie Breedte 60%
Dimension en positie Marge
  • Links: 10rem
  1. Tik op het lege gebied boven het veld Customer ID en tik op Responsive Panel Container. Stel de Achtergrond > Achtergrondkleur in op F1F2F2. Tik aem_6_3_forms_save.

De knoppen opmaken

U kunt een aangepast thema gebruiken om een identieke stijl toe te passen op alle knoppen van het adaptieve formulier en inline styling om een stijl toe te passen op een specifieke knop. De knoppen opmaken:

  1. Tik op de knop Verzenden en tik op de optie Knop. Stel de volgende eigenschappen in en tik op aem_6_3_forms_save.
Accordeon Eigenschap Waarde
Achtergrond Achtergrondkleur F6921E
Rand
Randkleur F6921E
Rand Straal rand
  • Boven: 7px
  • Rechts: 7px
  • Onder: 7px
  • Links: 7 px
Tekst
Lettertypefamilie Arial
Tekst Lettertypekleur FFFFFF
Tekst Fontgrootte 18 px
  1. Pas het aangepaste thema Global Theme toe op het aangepaste formulier. 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 componenten opmaken

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

    style-option

  3. Tik op de knop Koppelen en tik op het pictogram aem_6_3_edit. Stel de volgende eigenschappen in de accordeon Dimension en Position in:

    Eigenschap Waarde
    Zwevend Links
    Breedte 10%
  4. Tik op de optie Door de overheid goedgekeurde adresproef en tik op het pictogram aem_6_3_edit. Stel de volgende eigenschappen in:

Accordeon Eigenschap Waarde
Dimension en positie Zwevend Links
Dimension en positie Breedte 73%
Dimension en positie Opvulling
  • Links: 10 px
Dimension en positie Hoogte 40 px
Dimension en positie
Marge
  • Rechts: 2rem
  • Links: 10rem
Achtergrond Achtergrondkleur FFFFFF
Rand Randbreedte 1 px
Rand Randstijl Een ononderbroken lijn
Rand Randkleur A7A9AC
Rand Straal rand 7 px
Tekst Lettertypefamilie Arial
Tekst Lettertypekleur BCBEC0
Tekst Fontgrootte 18 px
Tekst Lijnhoogte 2
  1. Tik op de knop Verzenden en tik op het pictogram aem_6_3_edit. Stel de volgende eigenschappen in:
Accordeon Eigenschap Waarde
Dimension en positie Zwevend Rechts
Dimension en positie Marge
  • Boven: 5rem
  • Rechts: 14rem
  • Onder: 20 px
  • Links: 20px
Achtergrond Achtergrondkleur F6921E
Rand Randkleur F6921E

styled-adaptive-form-1

Stap 5: Bonussectie: Weblettertypen gebruiken in een aangepast thema

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 Typekit is een service voor weblettertypen. U kunt de service configureren en gebruiken met adaptieve formulieren. Adobe Typekit in een adaptieve vorm gebruiken:

OPMERKING

typekit-to-adobe- fontsTypekit wordt nu Adobe Fonts genoemd en wordt geleverd bij Creative Cloud- en andere abonnementen. Meer informatie.

  1. Maak een Adobe Typekit-account, maak een kit, voeg Myriad Pro-lettertype toe aan de kit, publiceer de kit en verkrijg de kit-id. U hebt Adobe Typekit-lettertypen (weblettertypen) in een adaptieve vorm nodig.

  2. Navigeer op de AEM Forms-server naar adobeexperienceManager Adobe Experience Manager > Tools hammer > Deployment > Cloud Services. Navigeer op de pagina Cloud Services naar Services van derden > Typekit en klik Configure nu onder Typekit. Als er al een configuratie beschikbaar is, klikt u op de knop + om een nieuwe instantie te maken.

    Voor de Create dialoog van de Configuratie, specificeer Titel voor de configuratie, en klik Create. U wordt opnieuw gericht aan de configuratiepagina. Geef in het dialoogvenster Component bewerken dat wordt weergegeven uw kit-id op en klik OK.

  3. Vorm uw thema om de configuratie te gebruiken TypeKit. Voor de auteurinstantie, open Globaal Thema in de themaredacteur. Navigeer in de themaeditor naar Thema-opties theme-options > Configure. Selecteer de kit in het veld Typekit Configuration en klik op Save.

    De lettertypen die aan de Typekit worden toegevoegd, zijn beschikbaar voor selectie in de accordeon Text van alle componenten.

Op deze pagina