User Enablement Demo

Description

This workflow was originally presented at the February 2022 n8n Meetup.

Requirements
In order to use this workflow, you will need the following in place:
A configured Baserow account
A group in Baserow called User Empowerment Demo
A database in the User Empowerment Demo called Office Shopping List
Inside the Office Shopping List database, you will need two tables:
Shopping List:
Column 1 - Single line text column named Item
Shopper:
Column 1 - Single line text column named Name
Column 2 - Email column named Email
An email account for sending out alerts

Customization
To make this workflow work for you, please customize the following items:
All Baserow nodes will need to be updated with your own credentials, database, tables and fields
The Send Shopping List node will need to be configured with your email credentials and email addresses
The Create Shopper Form Set node will need to have the code in the HTML value modified to reflect your Production URL from the Submit Shopper node (See instructions below)
The Cron node will need to be modified to reflect the timing that you wish to use

Modifying the Webform
The webform is the piece that people normally want to customize but is often the most complex because it is raw HTML. Here are some quick tips for making changes to the form.

Webform Nodes
There are two nodes that control what you see in the form:
Create Shopper Form - displays the form and submits it to the correct webhook
Create Response Page - displays the results when the form is submitted

Editing the Webform
The easiest way that I have found to edit the webform is to:
Open up the Set node (Create Shopper Form or Create Response Page) that contains the HTML you wish to edit.
Copy the contents of the HTML value to your favourite HTML editor
Make your changes
Paste the updated HTML back into the Set node

Changing the Webhook URL the Webform Posts To
In order for the webform to work properly, do the following:
Determine the Production URL for the Submit Shopper webhook node
In the Create Shopper Form node, look for the following line in the HTML value:
form action="https://tephlon.app.n8n.cloud/webhook/submit-shopper" method="POST"
Replace https://tephlon.app.n8n.cloud/webhook/submit-shopper with your Production URL

Changing the Webform Image
The image that is in the webform is actually embedded in the HTML in each of the Create Shopper Form or Create Response Page Set nodes and can be modified from there using these steps:
Open up the appropriate Set node
In the HTML value, find the line that starts with background-image:. It will be followed by a long string that looks like random characters
Using a tool like Image to Base64 Converter, upload your image and generate a new CSS background source
Replace the original background-image: line (including all the "random" characters) with the new generated CSS background source