Unanswered

Getting data from HTTP form using POST into Flow

(0) Share

Report

Posted on by joeyeamigh

Hello, I want to use an HTTP form in my website to have people sign into a sports game that they attend. I want to make the form send data to Microsoft Flow, which using conditions would sort the data, then place data that makes the cut into an excel file. I have done this same thing using a Microsoft Form, but that will not work for my needs, as there is a bug in iOS that does not allow scrolling in iFrames. Microsoft forms is no longer an option. What commands would I use on my HTML side to POST data to the Flow, which Flow triggers to use, and how to POST to flow without reloading the page. Is this possible, and if so, any help is appriciate. Thank you! Here is a photo of what I have so far. Thanks!

Categories:

Building flows

I have the same question (0)

All responses (8)

Answers (0)

v-alzhan-msft on at

Like (0)

Report

Hi @joeyeamigh ,

Could your please explain more details about your issue?

Best regards,

Alice

Community Support Team _ Alice Zhang
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Was this reply helpful? Yes No
MatthewHolmes 25 on at

Like (0)

Report

Hi @joeyeamigh ,

Firstly you will need some sort of API to send HTTP Requests, generally this is done using REST Api - you can find some more information on that here: https://restfulapi.net/

Your flow could then have an automatic trigger using the 'When a HTTP Request is received' trigger. More info here: https://docs.microsoft.com/en-us/azure/logic-apps/logic-apps-http-endpoint

Unfortunately setting up your own REST API can be quite a challening prospect for begginers, so I would lean heavily towards using something like Microsoft Forms with a built in HTTP API.

Was this reply helpful? Yes No
joeyeamigh 14 on at

Like (0)

Report

Thank you very much for the response @MatthewHolmes. Can you please explain the inbetween stages? As displayed in the below photo, I am already using the "When an HTTP request is recived trigger". How would I go about setting up a REST API, and from there how do I set ut up to POST to Flow? Is there a way to set it up through Azure? I would just like more information in general. Thank you! To clarify, all I want to do is for something to pass the HTML form data to Flow. That is it.

Was this reply helpful? Yes No
joeyeamigh 14 on at

Like (0)

Report
I apologize that I was not clear enough @v-alzhan-msft. I want to use something; literally anything, to pass information imputted into an HTML form created by the HTML <form> tag to my Flow. I have read that using something like AJAX might work. Is this true? HTML form data usually POSTs data to a php file, but I would like to bypass this and get the form data into a format that Flow could use. Is it possible to use AJAX to post the data to Flow or does there have to be an inbetween step such as an API, SQL database, XML file? I want to be able to make this completly autonomous, and very very fast, so anytime that someone submits the form it instantly sends info to the Flow. I am adding a copy of my HTML form code as well as the AJAX and JS info. Please ask if you need more info. Any help is appriciated. Thank you.

<div class="wow fadeInUp" data-wow-delay="0.2s" style="text-align: center;"> <input class="wow fadeInUp" data-wow-delay="0.2s" id="button" type="button" value="Check In!" onclick="getLocation()" style="font-size : 30px; color:blue;"> </div> <h4 id="loc" style="text-align:center;"></h4><br> <h4 id="word" style="text-align:center;"></h4><br> <div class="wow fadeInUp" data-wow-delay="0.2s" style="text-align:center;"> <form id="yummyfood" style="display:none;" action="javascript&colon;void(0);" name="CheckIn" method="post"> <p><label for="name">First Last Name. (Use same name every time or you won't get your points.)</label> <input type="text" name="name" id="name"></p> <p><label for="email">School Email Address</label> <input type="text" name="email" id="email"></p> <p><label for="grade">What Grade are you in?</label> <input type="text" name="grade" id="grade"></p> <p><label for="game">Which game are you at?</label> <input type="text" name="game" id="game"></p> </form> <button value="Submit" type="button" onclick="formdone()"> </div>  <script> function submit(){ console.log("i win") } function submitform() { console.log("one") var form = document.getElementById("yummyfood") var formData = JSON.stringify($("#myForm").serializeArray()); $.ajax({ type: "POST", url: "https://api.azure.---------------------------------------uN2k", data: formData, success: function(formdone){}, dataType: "json", contentType : "application/json" console.log(formData) }); } function formdone() { yummyfood.style.display = 'none' } </script>

Was this reply helpful? Yes No
ExtremeLeadProg 16 on at

Like (0)

Report

I am curious to know if you ever got this working properly as I have a very similar type of need?

Was this reply helpful? Yes No
joeyeamigh 14 on at

Like (0)

Report

I was able to by changing how ajax json encoded.

Was this reply helpful? Yes No
CU04091925-0 3 on at

Like (0)

Report

I was researching something similar, do we have any solutions?

Was this reply helpful? Yes No
jdoss 458 on at

Like (1)

Report

You do not need a REST api to do this. It seems to be set up properly. You just have to send your form data with JSON.Stringify like in the above example. You will need to get a sample of your data first though before it will post successfully to Power Automate so that you can have a JSON Schema. You can just log the data in the browser and copy it. Once you have it set up it should accept responses and you can use Power Automate to sort through them and do whatever you need to.

Was this reply helpful? Yes No