cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
joeyeamigh
Regular Visitor

Getting data from HTTP form using POST into Flow

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!

8 REPLIES 8
v-alzhan-msft
Community Support
Community Support

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.

MatthewHolmes
Frequent Visitor

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.

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.Screenshot 2019-09-12 at 10.42.27 AM.png

 

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>


        <!--FormScript-->
        <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>

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

I was able to by changing how ajax json encoded.

Dainner
New Member

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

jdoss
Resolver III
Resolver III

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.

Helpful resources

Announcements
MPA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

Learn to digitize and optimize business processes and connect all your applications to share data in real time.

New Process Advisor Capabilities carousel.png

Read the blog for the latest news

Read the latest about new experiences and capabilities in the Power Automate product blog.

PA Survey Carousel Image.png

We want to hear from you!

If you are a small business ISV/Reseller, share your thoughts with our research team.

Users online (2,933)