How to perform multiple actions on an adaptive form submission

[wizard04wsu]

I have an adaptive form with a single submit button. When the form is submitted, I'd like it to both (1) POST to an external REST endpoint and (2) send an email. I tried creating a workflow to perform the two actions, but found that to be far less straightforward and beyond my current understanding.

[Pradeep_Kumar_Srivastav]

Hi @wizard04wsu , You can do this using multiple ways. Also, have a look at https://experienceleague.adobe.com/en/docs/experience-manager-65/content/forms/adaptive-forms-basic-...

1-AEM Workflow:

• Create a workflow: Design a workflow with two steps:
  • Send to REST Endpoint: Use the HTTP Client service to send form data to the external endpoint.
  • Send Email: Utilize the Email service to send the notification.

2- Custom Sling Servlet:

• Create a Sling Servlet: Develop a custom Sling servlet to handle form submissions.
• Process Data: Extract form data, send it to the REST endpoint, and trigger email notification.
• Expose Servlet as a Service: Expose the servlet as a service to be called from the form's submit action.

3- Customize the Form Submission.

You can customize the form submit action something like below

document.getElementById('submit-button-id').addEventListener('click', function(event) {
event.preventDefault();

// Post to REST endpoint
fetch('https://external-api.com/endpoint', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
// After posting to the REST endpoint, trigger the email sending
sendEmail();
})
.catch(error => {
console.error('Error:', error);
});
});

function sendEmail() {
// Custom code to send the email or trigger a server-side process to do so
console.log('Email sent!');
}

[wizard04wsu]

Thank you for the suggestions.

[ksh_ingole7 · Accepted solution]

Hi @wizard04wsu 

I would recommend create a custom Submit action. 

Refer to the Submit Action part on the following document

https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/forms/adaptive-f...

Your custom Submit action dialog would look something like this. 

This way you would be able to store data at some REST endpoint as well as trigger an email. Check the implementation on the above Document. 

Thanks.

[wizard04wsu]

This looks like what I need. Thank you!