Een headless-formulier maken en voorvertonen met een React-app introduction

Met de startkit kunt u snel aan de slag met een React-app. U hebt de vrijheid om Zwaardeloze adaptieve vormen in een Angular, Vanilla JS, en andere ontwikkelomgevingen van uw keus te ontwikkelen en te gebruiken.

Begin met de adaptieve vorm zonder koptekst. Dit is heel eenvoudig en snel. Kloon het kant-en-klare React project, installeer de gebiedsdelen, en stel het project in werking. U hebt een Headless adaptive-formulier dat in een React-app is geïntegreerd. U kunt het voorbeeldreactieproject gebruiken om adaptieve formulieren zonder koppen te maken en te testen voordat u het in een productieomgeving implementeert.

Laten we beginnen:

Voordat u begint pre-requisites

Als u een React-app wilt maken en uitvoeren, moet het volgende op uw computer zijn geïnstalleerd:

Aan de slag

Wanneer u aan de vereisten voldoet, voert u de volgende stappen uit om aan de slag te gaan:

1. Startkit voor het instellen van hulpformulieren zonder koptelefoon install

De startkit is een React-app met een voorbeeld van een hoofdloos adaptief formulier en de bijbehorende bibliotheken. Gebruik de kit om uw Headless adaptieve formulieren en bijbehorende React-componenten te ontwikkelen en te testen. Voer de volgende opdrachten uit om Hoofdloze adaptieve formulieren in te stellen, startkit:

2. Voorbeeld van het adaptieve formulier zonder koptekst preview

Nadat u de startkit hebt ingesteld, kunt u een voorbeeld bekijken van het hulpformulier Koploos, en dit vervangen door uw eigen aangepaste formulier. U kunt ook de startkit configureren om een formulier op te halen van een AEM Forms-server. Een voorbeeld van het formulier bekijken

3. Maak en geef uw eigen, blokloze adaptieve vorm custom

Een Headless adaptief formulier vertegenwoordigt het formulier en de componenten ervan, zoals velden en knoppen, in JSON-indeling (JavaScript Object Notation). Het voordeel van JSON-indeling is dat deze eenvoudig kan worden geparseerd en gebruikt door verschillende programmeertalen, waardoor het een handige manier is om formuliergegevens uit te wisselen tussen systemen. Open het /react-starter-kit-aem-headless-forms/form-definations/form-model.json -bestand als u het voorbeeldformulier wilt bekijken dat zich zonder koptekst bij de app bevindt.

Maak een contactformulier met vier velden: "Naam", "E-mail", "Contactnummer" en "Bericht". De velden worden gedefinieerd als objecten (items) in de JSON, waarbij elk object (item) eigenschappen heeft zoals type, label, naam en vereiste waarden. Het formulier heeft ook een knop van het type "submit". Hier is JSON voor het formulier.

{
  "afModelDefinition": {
    "adaptiveform": "0.10.0",
    "items": [
      {
        "fieldType": "text-input",
        "label": {
          "value": "Name"
        },
        "name": "name"
      },
      {
        "fieldType": "text-input",
        "format": "email",
        "label": {
          "value": "Email"
        },
        "name": "email"
      },
      {
        "fieldType": "text-input",
        "format": "phone",
        "pattern": "[0-9]{10}",
        "label": {
          "value": "Contact Number"
        },
        "name": "Phone"
      },
      {
        "fieldType": "multiline-input",
        "label": {
          "value":"Message"
        },
        "name": "message"
      },
      {
        "fieldType": "button",
        "label":{
          "value": "Submit"
        },
        "name":"submit",
        "events":{
          "click": "submitForm()"
        }
      }
    ],
    "action": "https://eozrmb1rwsmofct.m.pipedream.net",
    "description": "Contact Us",
    "title": "Contact Us",
    "metadata": {
      "grammar": "json-formula-1.0.0",
      "version": "1.0.0"
    }
  }
}

Als u het formulier wilt weergeven, vervangt u het als voorbeeld aanpasbare formulier JSON zonder koptekst /react-starter-kit-aem-headless-forms/form-definations/form-model.json door de bovenstaande JSON, slaat u het bestand op, wacht u tot de startkit het formulier heeft gecompileerd en vernieuwt u het.

U hebt met succes het Zwaarloze Aangepaste Vorm teruggegeven.

Bonus

Stel de titel van de webpagina waarop het formulier zich bevindt in op Contact Us | WKND Adventures and Travel . Om de titel te veranderen, open het react-starter-kit-aem-headless-forms/public/index.html dossier voor het uitgeven en plaats de titel.

Volgende stap

Door gebrek, gebruikt de aanzetuitrusting 🔗 componenten van het Spectrum van de Adobe om de vorm terug te geven. U kunt uw eigen componenten of componenten van derden maken en gebruiken. Bijvoorbeeld met Google Material UI of Chakra UI.

Laten wij materiaal UI van Googlegebruiken om onze vorm van het Contact van ons terug te geven.