Responsive HTML Form Lab Notes

|
Published

This lab is part of my Electronic Forms and Alternative SharePoint App Approaches and Power Platform Custom Connectors and Office 365 Forms Options Full Day Workshop sessions.

HTML forms can be built in many different ways.  For this lab we're going to focus less on how the form is built, and more on how to connect it to SharePoint Online. There are a number of options we're going to explore.

There are pros and cons to the different approaches. Here's a quick summary of them:
Approach
 Notes

Posting to Power Automate

HTTP POST trigger in Flow requires the premium licensing (https://flow.microsoft.com/en-us/pricing/) which can add up to thousands of dollars a month.

Direct post to a SharePoint list

Requires the user to be authenticated to SharePoint Online with contribute permissions to the SharePoint list. Can leverage the included Office 365 Forms licensing to add a workflow triggered off the list item creation.

Posting to Azure Logic Apps

Cost-effective licensing model where you pay $0.000032 per action (https://azure.microsoft.com/en-us/pricing/details/logic-apps/).

And here's the summary of what we're going to be doing in the lab:

  1. All lab files are available in 
  2. Create the SharePoint list to be updated
  3. Import the Flow workflow
  4. Connect the HTML form to the Flow workflow and test
  5. Connect the HTML form directly to the SharePoint list and test
  6. Import the Logic Apps workflow
  7. Connect the HTML form to the Logic Apps workflow and test

GitHub

The GitHub repository at https://github.com/petercarson/form-post-to-flow has the following files in it:

File
 Description

FormPOSTtoFlow_Flow.zip

The exported Flow package for the form posts to Flow scenario

FormPOSTtoFlow_LogicApps.json

The exported Logic Apps package for the form posts to Flow scenario (same as the flow above but within Logic Apps instead)

default.html

HTML form

form-post-to-flow.js

Supporting JavaScript to write the form values to either the Flow or Logic Apps workflow

form-post-to-flow.sln

Visual Studio solution file


The GitHub repository at https://github.com/petercarson/form-post-to-sharepoint has the following files in it: 

File
 Description

form-post-to-sharepoint.html

HTML form

form-post-to-sharepoint.js

Supporting JavaScript to write the form values directly to the SharePoint list

FormPOSTtoSharePoint.zip

The exported Flow package for the form posts to SharePoint scenario

SharePoint

  • Create a new SharePoint list with the following Single line of text columns
    • EventName
    • Status
    • FirstName
    • LastName
    • Email
    • Phone
    • JobTitle
    • Organization
    • StreetAddress
    • City
    • AcceptTerms
    • MailingList
  • This SharePoint list will be used by the forms we will create in the following steps to create a new item in the list

Microsoft Flow

  • Now that the SharePoint list has been created, go to Microsoft Flow (https://us.flow.microsoft.com/en-us/)
  • Here we will create our first workflow to write to the SharePoint list
  • Go to your My Flows
  • Import the 'FormPOSTtoFlow_Flow.zip' file into Flow
  • Update the connections
  • Edit the Flow and copy the HTTP POST URL in the first step - 'When a HTTP request is received'

HTML Form Posting to Flow

  • In Visual Studio open the 'form-post-to-flow.sln' from the form-post-to-flow repository
  • Open the form-post-to-flow.js
  • Update the var url line to point to the HTTP POST URL from the Flow steps above
  • Save and run the form in Visual Studio
  • Put in dummy data and click submit. Enter a valid email address to test the email send with:
    • HTTP POSTs to Flow workflow
    • Creates item in SharePoint list with the data from the form
    • Sends an email summary linking to the SharePoint item

HTML Form Posting to SharePoint

  • Import the 'FormPOSTtoSharePoint.zip' file into Flow
  • Update the connections and point the Flow at the SharePoint list
  • Create a folder in Site Assets for the HTML and JS files
  • Copy the form-post-to-sharepoint.html and form-post-to-sharepoint.js from the form-post-to-SharePoint repository to the folder
    • Update the JavaScript script tag within the HTML file
  • Create a SharePoint page and add a content editor web part
    • Set the Content Link to point to the uploaded HTML file
  • Publish the page
  • Put in dummy data and click submit. Enter a valid email address to test the email send with:
    • HTTP creates item in the SharePoint list
    • Flow workflow is triggered
    • Sends an email summary linking to the SharePoint item

Logic Apps

  • Get the 'FormPOSTtoFlow_LogicApps.json' file and go to https://portal.azure.com/
    • In the hamburger menu to the left, click 'Create a resource'
    • Once on this page, using search, find 'Template deployment (deploy using custom templates)'
      • Click on it. It will take you to a new page where you will create a new template by clicking the 'Create' button
      • Click on 'Build your own template in the editor' and then 'Load file'
      • Here you will import the 'FormPOSTtoFlow_LogicApps.json' file
      • Save and purchase
  • Once your logic app has been created, click edit and fix the connections using the Logic Apps Designer
  • Save and then copy the HTTP POST URL in the first step - 'When a HTTP request is received'
  • Go back and enable the logic app

HTML Form Posting to Logic App

  • In Visual Studio go back to the 'form-post-to-flow.sln'
  • Open the form-post-to-flow.js
  • Update the var url line to point to the HTTP POST URL from the Logic Apps steps above
  • Save and run the form in Visual Studio
  • Put in dummy data and click submit.  Enter a valid email address to test the email send with
    • HTTP POSTs to Logic Apps workflow
    • Creates item in SharePoint list with the data from the form
    • Sends an email summary linking to the SharePoint item


For full steps on recreating the lab with code examples and screenshots download the documentation here.

Latest Articles