Calling a Logic App from an HTML form

Recently my brother was interested in testing out a concept for a business/website. One of his first steps was the assess interest, so we wanted to get a quick page out that people could find and potentially sign-up for to see if the idea was viable. Bringing Logic Apps into the picture made the entire dev experience very fast and simple. I started with a basic Bootstrap template, customized it a bit, but then got to the hardest part – how to let people submit a form that they are interested?

Using Azure Logic Apps to trigger on a form submit

At the end of the day when someone submitted a form I only needed two things to happen:

1. Record added somewhere so my brother could see who was signing up
2. Email sent to the user that the submission was received

I was able to accomplish both of those within minutes by calling an Azure Logic App from the form. Here’s how it worked.

Building the Logic App

The first step was to get a logic app up and running. This was relatively simple. I added a Request trigger to fire whenever an HTTP Request was sent to the URL, added an Add Row to Google Sheet action to add the persons form data, and a Send Email action to email a confirmation.

Now anytime this app was triggered the information I needed would all be in my Google Sheet I could share with my brother.

Calling the logic app from HTML

Calling the logic app from HTML was simple - I just needed a basic form, and in the javascript of the page I called the logic app above with the information required:

 function processForm(e) {
   if (e.preventDefault) e.preventDefault();
  
   var xhr = new XMLHttpRequest();
   xhr.open("POST", "https://prod-21.westus.logic.azure.com:443/workflows/8b60aedbf2da45138fdadc48b761a4b9/triggers/manual/run?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=xxxxx");
   xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
   var item = {
        email: document.getElementById("email_field").value
   };
   document.getElementById("submission_receieved").classList.remove("hidden");
   xhr.send(JSON.stringify(item));

   return false;
}

That’s it - now anytime the form was submitted this javascript would run and send the object with the information I needed to the logic app. Within minutes I had the full scenario working end-to-end, with email and Google Sheet integration working seamlessly.

Logic Apps increases developer agility

This was a small real-world example in how serverless cloud tools like Azure Logic Apps can take out much of the complexity of deploying solutions, allowing developers to focus more on the core systems and services they are providing.