Site Loader

 SEND CUSTOM FORM DATA INTO MICROSOFT POWER AUTOMATE


In this article, I will be explaining the steps to send form data directly to Microsoft Power Automate and trigger the Flow using PHP cURL and HTML.

STEP – 1

First, you will have to create a Custom HTML file and name it index.html 

Also, Read –  How to get and Set a Look up field using JavaScript in MS Dynamics 365


In the index.html file please must include Jquery CDN 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

This is CSS Style for the form. You can also include Bootstrap as  I have used it in the form 

<style>
.php-email-form {
height: auto;
background-color: #eee;
box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
padding: 25px;
}
.validation{color:red;font-size: small;}
.loading {
display: none;
background: #fff;
text-align: center;
padding: 15px;
}
.error-message {
display: none;
color: #fff;
background: #ed3c0d;
text-align: left;
padding: 15px;
font-weight: 600;
}
.sent-message {
display: none;
color: #fff;
background: #18d26e;
text-align: center;
padding: 15px;
font-weight: 600;
}
.btn-color {
padding: 10px 15px;
background-color: #4e90cd;
border-color: #4e90cd;
color: #fff;
border-bottom: none;
border-right: none;
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
letter-spacing: normal;
word-spacing: normal;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: center;
font: 500 15px roboto;
border-width: 2px;
border-style: outset;
border-image: initial;
overflow: visible;
text-transform: none;
text-decoration: none;
border-radius: .25rem;
border-bottom: none;
border-right: none;
align-items: center;
justify-content: center;
}
.btn-color:hover {
color: #ffffff;
background-color: #5376ab;
border-color: #5376ab;
}
.small, small {
font-size: 80%;
font-weight: 400;
color: red;
}
</style>

HTML code will look like this 

<div class="col-lg-12" data-aos="fade-up" data-aos-delay="400">
<h2 style="text-align:center">Send data to Microsoft Power Automate using PHP</h2>
<form action="javascript:void(0);" method="post" role="form" id="contactForm" class="php-email-form">
<div class="row">
<div class="col-lg-12 form-group">
<input type="email" name="to" class="form-control" id="to" placeholder="Email Address" data-rule="minlen:4" data-msg="Please enter your email" />
<div class="validation"></div>
</div>
<div class="col-lg-12 form-group">
<input type="text" name="subject" class="form-control" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter your subject" />
<div class="validation"></div>
</div>

<div class="form-group col-lg-12">
<textarea class="form-control" name="body" id="body" rows="4" data-rule="required" data-msg="Please write your message" placeholder="Message" spellcheck="false"></textarea>
<div class="validation"></div>
</div>

<div class="col-lg-12">
<div class="loading">Loading...</div>
<div class="error-message">Failed. please try again later!</div>
<div class="sent-message">Your request has been sent. Thank you!</div>
</div>
<div class="text-center">
<button id="submit" name="submit" class="btn-color content-center">Send Request</button>
</div>
</form>
</div>

Also, Read –  How to Connect SharePoint Using PHP

Also, Read – How to Sync custom fields in Outlook from SharePoint Task List

Now we need to send the Request without refreshing the page so we will have to use Jquery Ajax to achieve it .. So here is the Jquery code to send a request to our backend file 

<script>

jQuery(document).ready(function($) {
"use strict";

//Contact
$('#contactForm').submit(function(){
var f = $(this).find('.form-group'),
ferror = false,
emailExp = /^[^s()<>@,;:/]+@w[w.-]+.[a-z]{2,}$/i;

f.children('input').each(function(){ // run all inputs

var i = $(this); // current input
var rule = i.attr('data-rule');

if( rule !== undefined ){
var ierror=false; // error flag for current input
var pos = rule.indexOf( ':', 0 );
if( pos >= 0 ){
var exp = rule.substr( pos+1, rule.length );
rule = rule.substr(0, pos);
}else{
rule = rule.substr( pos+1, rule.length );
}

switch( rule ){
case 'required':
if( i.val()==='' ){ ferror=ierror=true; }
break;

case 'minlen':
if( i.val().length<parseInt(exp) ){ ferror=ierror=true; }
break;

case 'email':
if( !emailExp.test(i.val()) ){ ferror=ierror=true; }
break;

case 'checked':
if( !i.attr('checked') ){ ferror=ierror=true; }
break;

case 'regexp':
exp = new RegExp(exp);
if( !exp.test(i.val()) ){ ferror=ierror=true; }
break;
}
i.next('.validation').html( ( ierror ? (i.attr('data-msg') !== undefined ? i.attr('data-msg') : 'wrong Input') : '' ) ).show('blind');
}
});
f.children('textarea').each(function(){ // run all inputs

var i = $(this); // current input
var rule = i.attr('data-rule');

if( rule !== undefined ){
var ierror=false; // error flag for current input
var pos = rule.indexOf( ':', 0 );
if( pos >= 0 ){
var exp = rule.substr( pos+1, rule.length );
rule = rule.substr(0, pos);
}else{
rule = rule.substr( pos+1, rule.length );
}

switch( rule ){
case 'required':
if( i.val()==='' ){ ferror=ierror=true; }
break;

case 'minlen':
if( i.val().length<parseInt(exp) ){ ferror=ierror=true; }
break;
}
i.next('.validation').html( ( ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') : 'wrong Input') : '' ) ).show('blind');
}
});
if( ferror ) return false;
else var str = $(this).serialize();
$.ajax({
// alert("enterd the loop")
type: "POST",
url: "sendRequest.php",
data: str,
success:function(data){
$('.loading').css('display','none');
$('.sent-message').css('display','block');
$("#contactForm")[0].reset();
},
error:function (data){
$('.loading').css('display','none');
$('.error-message').css('display','block');
$("#contactForm")[0].reset();
}


});
return false;
});

});

</script>

The above codes are for the index.html file now we are going to work on the PHP file.

So we are using PHP cURL to send the request to Microsoft Power Automate but before doing that we will have to generate a URL from flow to use on PHP

Also, Read – How to connect Quikbooks Online using Microsoft Power Automate

Our goal is to send the request to flow using our form so for that we will need request formate to send so we are going to use JSON for it.

{
"emailaddress":"<your address goes here>",
"emailSubject": "Test Subject",
"emailBody": "Request from custom HTML form"
}

We will also need a JSON schema defining the format of the request.  So we are going to use some JSON Schema Generator online tool. 

I used Liquid JSON Schema Generator

Copy Paste the above code and click on Generate Schema button. The tool will generate a schema like this  

{
"$schema": "http://json-schema.org/draft-04/schema#",
"type": "object",
"properties": {
"emailaddress": {
"type": "string"
},
"emailSubject": {
"type": "string"
},
"emailBody": {
"type": "string"
}
},
"required": [
"emailaddress",
"emailSubject",
"emailBody"
]
}

We will discuss STEP -2 in the Next Blog. 

Also, Read – How to connect Tsheets using Microsoft Power Automate

Also, Read –  How to change the Activity Status value using JavaScript in MS Dynamics 365

Also, Read – How to clone record using JavaScript and Open it in New Window in MS Dynamics 365

If you find this blog post helpful then please share it with your friends on Social media. Thank you.

Post Author: admin

Leave a Reply

Your email address will not be published. Required fields are marked *