Create and preview a Headless Form using a React app introduction

The starter kit helps you get started quickly using a React app. You are free to develop and use Headless adaptive forms in an Angular, Vanilla JS, and other development environments of your choice.

Starting with Headless adaptive forms is quite easy and quick. Clone the ready-made React project, install the dependencies, and run the project. You have a Headless adaptive form integrated in a React app up and running. You can use the sample react project to build and test Headless adaptive forms before deploying it in a production environment.

Let’s start:

Before you start pre-requisites

To create and run a React app, you should have the following installed on your computer:

Get Started

Once you fulfill the requirements, perform the following steps to get started:

1. Setup Headless adaptive forms starter kit install

The starter kit is a React app with a sample Headless adaptive form and corresponding libraries. Use the kit to develop and test your Headless adaptive forms and corresponding React components. Run the following commands to set up Headless adaptive forms starter kit:

2. Preview the Headless adaptive form preview

After setting up the starter kit, you can preview the sample Headless adaptive form, replace it with your own custom form. You can also configure the starter kit to retrieve a form from an AEM Forms Server. To preview the form

3. Create and render your own Headless adaptive form custom

A Headless adaptive form represents the form and its components, such as fields and buttons, in JSON (JavaScript Object Notation) format. The advantage of using JSON format is that it can be easily parsed and used by various programming languages, making it a convenient way to exchange form data between systems. To view the sample Headless adaptive form included with the app, open the /react-starter-kit-aem-headless-forms/form-definations/form-model.json file.

Let’s create a contact us form with four fields: “Name”, “Email”, “Contact Number”, and “Message”. The fields are defined as objects (items) within the JSON, with each object (item) having properties such as type, label, name, and required. The form also has a button of type “submit”. Here is JSON for the form.

{
  "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"
    }
  }
}

To render the form, replace the sample Headless adaptive form JSON /react-starter-kit-aem-headless-forms/form-definations/form-model.json with the above JSON, save the file, wait for the starter-kit to compile and refresh the form.

You have sucessfully rendered the Headless Adaptive Form.

Bonus

Let’s set the title of the webpage hosting the form to Contact Us | WKND Adventures and Travel. To change the title, open the react-starter-kit-aem-headless-forms/public/index.html file for editing and set the title.

Next step

By default, the starter kit uses Adobe’s Spectrum components to render the form. You can use create and use your own components or third-party components. For example, using Google Material UI or Chakra UI.

Let’s use Google Material UI to render our Contact Us form.