Submitting AEM Forms Data to REST API via Client-Side Script

[krishna_sai]

Hi Team,

We are exploring the use of AEM Forms and have created a simple form with a few fields—such as First Name and Last Name—along with built-in validations.

Instead of using the default out-of-the-box (OOTB) submit action, we are looking to handle the form submission on the client side using a REST API endpoint. Our goal is to retain AEM’s native form validation functionality but customize the submission logic to call an external API directly from the front end.

Could you please share any best practices or guidance on how to achieve this using clientlibs? Specifically, we’re looking for an example of how to override the submit() method using GuideBridge JS, and the recommended way to load and structure this customization.

Any pointers or sample code would be greatly appreciated.

Thanks,
Krishna

[aravindS]

Hi @krishna_sai ,

Yes you can create a custom clientlibs for your form and write a code to declare custom methods and author that in your submit button action.

var guideBridgeData,

  rootPanel,

  firstName,

  lastName,

  submitButton;

function declareAllVariables() {

  $(function () {

    // one can directly access guideBridge object here.

    window.guideBridge.connect(function () {

      guideBridgeData = guideBridge;

      if (guideBridge && rootPanel) {

        (rootPanel = guideBridge.resolveNode(rootPanel)),

          (firstName = rootPanel.firstName),

          (lastName = rootPanel.lastName),

          (submitButton = rootPanel.submitButton);

      }

    });

  });

}

function initializeFormVariable(rootData) {

  rootPanel = rootData;

  declareAllVariables();

}

You can call "initializeFormVariable" in form container initialize or root panel initialize and pass your root panel as a param.
For Submit button action you can write a custom fetch method and servlet (java code), here i added the sample working code.

function submitClick() {

fetch(servletResourcePath, {

        method: 'post',

        headers: {

          Accept: 'application/json',

          'Content-Type': 'application/json',

        },

        //make sure to serialize your JSON body

        body: JSON.stringify({

          firstName: firstName.value,

          lastName: lastName.value,

        }),

      })

        .then(function (response) {

          if (response.status === 200) {

            // write your success logic

          } else {

            // write your failure logic

          }

        })

        .catch(function (err) {

                      // write your failure / error logic

        });

}

Please let me know if you need anything on this.

[krishna_sai]

Let me give it a try and reach out to you in case of any blockers.

Thanks,

Krishna

[aravindS · Accepted solution]

Hi @krishna_sai ,

If you find the answer helpful, please mark as correct reply. Thanks