User enablement demo

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:

1. Open up the Set node (Create Shopper Form or Create Response Page) that contains the HTML you wish to edit.
2. Copy the contents of the HTML value to your favourite HTML editor
3. Make your changes
4. 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:

1. Determine the Production URL for the Submit Shopper webhook node
2. 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"
3. 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:

1. Open up the appropriate Set node
2. 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
3. Using a tool like Image to Base64 Converter, upload your image and generate a new CSS background source
4. Replace the original background-image: line (including all the "random" characters) with the new generated CSS background source