Office 365 has good form and survey functionality provided by Microsoft Forms. This post is details a completely different method to collect form data into Microsoft Power Automate, using a jQuery library provided by SurveyJS, which provides greatly enhanced functionality.
So why the need for an alternative method? There are a number of features, which are considered basic form based functionality missing from Microsoft Forms, such as:
- Ability to upload a file with the form submission (10k Votes)
- Basic functionality to be able to manipulate fonts etc (4K Votes)
- Support for additional controls, checkboxes etc (3K Votes)
- Conditional Logic
- Timer for questions to create a quiz
- Regular Expression Support for field validation
And many more. I suspect that Microsoft have to draw a fine line between functionality, ease of use and treading on the toes of business partners.
Microsoft Forms is incredibly easy to use, but that ease of use does seem to come at the expense of functionality. Check out the video demo where I build this flow from scratch:
Building better form functionality for Office 365 with Power Automate
Before getting into this solution in detail, It is worth pointing out that to build this solution you must have a Power Automate Premium license. That, and a little patience and you will have amazing form functionality in no time at all. Essentially this solution consists of two Power Automate Flows:
- One that delivers the form or survey to the browser.
- One that collects the data from the form submission.
This solution leverages the Power Automate trigger “When a HTTP Request is received” to serve a form. The form is really easy to build using the form creator on SurveyJS.
Click here to see an example form I built in no time. Note, that form is not being delivered via this blog, but served directly from Power Automate. It is worth noting, that although it is being served from Power Automate, the survey itself could be hosted anywhere, it is the data collection that has to be directed to Power Automate.
Using the form creator on SurveyJS takes care of the majority of the work for you. You simply need to put it together in a HTML page. The source of my HTML form looks like this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Power Platform Survey</title> <style> </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://unpkg.com/[email protected]/survey.jquery.min.js"></script> <link href="https://unpkg.com/[email protected]/modern.css" rel="stylesheet" type="text/css"> </head> <body> <div id="surveyContainer"></div> <script> $(document).ready(function() { Survey.StylesManager.applyTheme("modern"); var surveyJSON = {title:"TachyTelic Power Platform Survey Demo"...} function sendDataToServer(survey) { //send Ajax request to your web server. console.log("The results are:" + JSON.stringify(survey.data)); $.ajax({ url: 'https://prod-137.westeurope.logic.azure.com:443/workflows/...', type: 'post', dataType: 'json', contentType: 'application/json', success: function (data) { console.log(data.msg);}, data: JSON.stringify(survey.data) }); } var survey = new Survey.Model(surveyJSON); $("#surveyContainer").Survey({ model: survey, onComplete: sendDataToServer }); }); </script> </body> </html>
As you can see, there is very little code. The form is simply added to a div called surveyContainer. I have highlighted and truncated two sections above:
- Line 17 : This JSON is the entire form definition (The full text is pretty printed below).
- Lines 22-30 : This is where the form results are submitted to the flow that collects and processes the results.
Both of these things deserve a bit more consideration…
The form definition is just a JSON string
Before talking about this point any further, let’s view the form JSON in a neater format:
{
title: "TachyTelic Power Platform Survey Demo",
logo: "http://tachytelic.net/wp-content/uploads/Logo-TTNet-blue-small.png",
pages: [{
name: "PowerPlatformSurvey",
elements: [{
type: "text",
name: "emailAddress",
title: "Your email address",
isRequired: true,
validators: [{
type: "email"
}],
inputType: "email",
autoComplete: "email",
placeHolder: "Please enter a valid email address"
}, {
type: "text",
name: "twitterID",
title: "If you have one, what is your Twitter handle"
}, {
type: "text",
name: "youTubeChannel",
title: "If you have one, what is your YouTube Channel",
requiredErrorText: "Please Enter a Valid URL",
validators: [{
type: "regex",
text: "Please Enter a Valid URL",
regex: "^(http:\\/\\/www\\.|https:\\/\\/www\\.|http:\\/\\/|https:\\/\\/)?[a-z0-9]+([\\-\\.]{1}[a-z0-9]+)*\\.[a-z]{2,5}(:[0-9]{1,5})?(\\/.*)?$"
}]
}, {
type: "rating",
name: "powerAutomateEase",
title: "Overall, how easy do you find Power Platform to work with.",
description: "1 = Very Difficult, 10 = Very Easy",
rateMax: 10
}, {
type: "imagepicker",
name: "powerPlatformFavourite",
title: "What is your favourite Power Platform Product",
choices: [{
value: "PowerAutomate",
text: "Power Automate",
imageLink: "http://tachytelic.net/wp-content/uploads/powerautomate.png"
}, {
value: "PowerApps",
text: "Power Apps",
imageLink: "http://tachytelic.net/wp-content/uploads/powerapps.png"
}, {
value: "PowerBI",
text: "Power BI",
imageLink: "http://tachytelic.net/wp-content/uploads/powerbi.png"
}, {
value: "PowerVA",
text: "Power Virtual Agents",
imageLink: "http://tachytelic.net/wp-content/uploads/powervirtualagents.png"
}],
choicesByUrl: {
titleName: "Power "
},
showLabel: true
}]
}]
}
If you take a look at line 38 for example, you can see the definition for the picker. Because this is being delivered via Power Automate, you can generate choices to be displayed on the form dynamically from a data source sitting in your Office 365 Environment. Which is another highly requested feature for Microsoft Forms! This would be simple to setup and you could create some very cool functionality with this.
Submission of the data to Power Automate
Line 22 of the code listing is where the code is submitted to second Power Automate Flow, designed to receive the data from the form. But that small section of code shows you how simple it is to submit data from a browser based client capable of running jQuery to Power Automate.
Build the Flows
As stated at the beginning of this post, this solution consists of two flows. One which delivers the form to the client, and another which receives data from the client.
The second flow, which receives the data must be hosted on Power Automate. But the first one can sit anywhere you like. But if you want to change the form contents dynamically as described above, then run it from Power Automate.
First Flow – Deliver the Form to the Browser
In its not dynamic form, this flow is very simple. In my example just a few steps:
The Important bits to note:
- Ensure the method in the first action is set to GET.
- Ensure the headers in the response action are configured to provide Content-Type set to text/html.
The second action in the flow can either be “Get file content using path” as I have done, or a simple compose action. The file that I am retrieving is the HTML source from above. This is probably slightly slower, but makes editing the HTML easier as you can use a proper editor, such as visual studio code.
Second Flow – Receive the results from the client
The second flow can be as simple or as complicated as you choose to make it. The important part is making sure you receive the data. In this simple example, the data is received and added to a SharePoint list:
My flow looks like this:
The important part to note in this flow, is the method of the first action, must be set to post. The video demo at the top of the page makes this step much easier to understand.
Conclusion
Microsoft Forms is a great, easy to use product. If you have more sophisticated requirements, you can get the functionality you need with very little effort by combining Power Automate and SurveyJS. It’s got some incredibly functionality and it is very easy to use.
untitlednumber12 says
Hey Paulie, bloody loved this tutorial and the video! I’ve got an example up and running at the moment, but I can’t figure out how to have a file upload on the survey that is then uploaded to a sharepoint folder… is that possible? Thanks so much for sharing this awesome work! Cheers
Paulie says
Hey, glad you enjoyed it. I didn’t try the file upload option, but I guess it would come through as a base64 encoded file. I will have a look at the option then come back to you. It might result in multipart form data. Upload a very small file and show me what the HTTP connector receives.
Danny says
Any advice from the author or authors on getting the time picker option for the text input to work properly on Android phones? When testing on my Pixel 4a, the time picker gives a millisecond option. I saw some other guides about other input systems where there’s a ‘step’ variable for input pickers, but there’s not really an easy setting in the builder to accomplish this.
Danny says
I don’t know of a way to update a comment, but I just figured it out. The SurveyJS reference docs mention here:
https://surveyjs.io/Documentation/Library?id=QuestionTextModel#step
And says “The property is serializable. It is stored in survey json and you can edit it in the SurveyJS Creator.”
The JSON Editor tab lets you add that line in for the element.
So I added step: 60 at the end of that item and it worked.
Paulie says
Sounds good, well done. What’s your use case for the form? (as opposed to using Microsoft Forms)
Danny says
I was attempting to capture availability time ranges for some people. After playing around more today, my original comment is not quite accurate. Adding the step attribute in the json editor for a regular textbox works fine, but it does not work for the multiple text option.
Fred says
Than you for sharing, you rock!
Yash says
Using this approch can we pre populate some field values that are present in survey by passing them in URL and later on when fetching the details in power automate we can also fetch the details that we pass in URL.
Paulie says
Yes, it is dead useful.
Paulie says
Yes, you could do that
Yash says
Thanks for replying.
Can you please explain that how we can achieve that
Chris says
Hey Paulie, this solution looks ideal for a few business cases I can think of.
Do we require a premium SurveyJS account to do this?
Thanks.
Mikael Petersson says
The form is not very responsive, and is very hard to use on mobile devices, do you have any hints or help for how to make this responsive to work with both desktop and mobile?