# How to build an AI Maintenance and IT Request Form: step-by-step guide with screenshots

> Build an AI Maintenance and IT Request Form in Lovable and n8n, in 87 steps with a screenshot of each one. A free how-to guide, plus a free hands-on…

Source: https://learn.ynteractive.com/content/ai-maintenance-it-request-form-lovable-n8n/guide · Updated 2026-10-02 · Free from Stepthrough (https://learn.ynteractive.com)

Updated October 2, 2026

Build an internal maintenance and IT request form in Lovable for Ridgeline Supply Co. and connect it to n8n — the AI agent sets the priority, assigns a team, saves the request to Google Sheets and emails a confirmation.

**About the screenshots.** They come from Stepthrough’s simulated practice environment (a practice copy of Lovable and n8n), not the live tool, so no real account appears. The buttons and labels match the real screens the lesson was built against. Practice it yourself free at learn.ynteractive.com.

## How do you want to learn?

- [Practice it step by step: Interactive, in a practice copy of Lovable and n8n, about 15 min](https://learn.ynteractive.com/modules/lovable-n8n-operations)
- [Read the guide: 87 steps with screenshots](https://learn.ynteractive.com/content/ai-maintenance-it-request-form-lovable-n8n/guide)

Lesson overview: [Build an AI Maintenance and IT Request Form](https://learn.ynteractive.com/content/ai-maintenance-it-request-form-lovable-n8n)

- Tools: Lovable and n8n
- Time: about 15 minutes, 87 steps in 14 parts
- Level: beginner, no coding needed

## Part 1: Sign up

### Step 1: Get started with Lovable

In the first module you built a Custom GPT. In the second, you built an AI agent inside n8n. Now you are going to combine a real web app with an AI-powered backend. Lovable is a tool that builds web apps from a text description.

![Lovable in Stepthrough’s practice copy, step 1 of 87 (Get started with Lovable): the cursor is on “Get started for free”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-01.webp)

**Step 1 of 87.** Lovable lets you build web apps by describing what you want. Click **Get started for free**.

## Part 2: Build the form

### Step 2: Start a new project

This is your Lovable dashboard. Every project you build shows up here.

![Lovable in Stepthrough’s practice copy, step 2 of 87 (Start a new project): the cursor is on “Start with a prompt”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-02.webp)

**Step 2 of 87.** This is your Lovable dashboard. Click **Start with a prompt** to create a new project.

### Step 3: Describe the form

This prompt tells Lovable what to build: a clean internal request form with name, email, what needs fixing, and location, sending each request to an n8n webhook URL pulled from a secret config — not hardcoded.

![Lovable in Stepthrough’s practice copy, step 3 of 87 (Describe the form): the prompt is filled in (“Build a simple, clean internal maintenance and…”).](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-03.webp)

**Step 3 of 87.** This prompt tells Lovable exactly what to build — a maintenance and IT request form that sends data to an n8n webhook. Paste in the prompt on the box.

```text
Build a simple, clean internal maintenance and IT request form for a small warehouse business.

The page should be modern, minimal, and professional.

Include these fields:

Name
Email
What needs fixing?
Location

Use a clear heading such as:
Report a Problem

Add a short supporting line like:
Tell us what's broken and where. We'll set the priority and confirm by email.

WEBHOOK
When the form is submitted, send the data as a POST request to the n8n webhook URL.
The data should be sent as JSON with keys: name, email, request, location.
Do not ask me to paste the webhook URL into the page or source code.

SUBMISSION STATES
While submitting, change the button text to something like:
Sending...

After a successful submission, show:
Request received! Check your email for the priority.

If the webhook request fails, show a simple friendly error:
Something went wrong. Please tell your supervisor.

VALIDATION
All four fields are required.
Validate the email format.

Make it responsive for desktop and mobile.

Do not add unnecessary sections, navigation, pricing, testimonials, or other marketing content.

The main purpose of this project is to send internal requests from Lovable to an n8n webhook.

IMPORTANT
Do not hard-code any webhook URL.
Reference the N8N_WEBHOOK_URL secret/config value when sending the form submission.
The actual secret will be added manually later through Lovable Settings.
```

### Step 4: Build the app

Lovable reads your prompt, generates the code, and deploys a live web app. In a few seconds you have a working request form. Now we build the AI workflow that handles each request.

![Lovable in Stepthrough’s practice copy, step 4 of 87 (Build the app): the cursor is on “Build”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-04.webp)

**Step 4 of 87.** Click **Build** — Lovable generates the app from your prompt. Then we switch to n8n to build the backend.

## Part 3: New workflow

### Step 5: Start a new workflow

Now you are in n8n. This is the workflow automation tool you used in the last module. This time, instead of a chat trigger, we are going to use a webhook — so the form can send data directly to n8n.

![The n8n overview page in Stepthrough’s practice copy, step 5 of 87 (Start a new workflow): the cursor is on “Create workflow”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-05.webp)

**Step 5 of 87.** Now you are in n8n. Click **Create workflow** to start building the backend.

## Part 4: Webhook trigger

### Step 6: Add the first step

Every workflow starts with a trigger. Last time we used a chat trigger. This time we want a webhook — an HTTP endpoint the form can POST to.

![The n8n workflow canvas in Stepthrough’s practice copy, step 6 of 87 (Add the first step): the cursor is on “Add first step…”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-06.webp)

**Step 6 of 87.** Click **Add first step…** to choose a trigger.

### Step 7: Webhook trigger

On webhook call. A webhook is just a URL that waits for incoming data. When someone submits the form, it sends their name, email, request, and location as JSON to this webhook.

![The n8n node list in Stepthrough’s practice copy, step 7 of 87 (Webhook trigger): the cursor is on “On webhook call”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-07.webp)

**Step 7 of 87.** Click **On webhook call** — the form will send data to this endpoint.

### Step 8: Change the response mode

One important setting. By default, the webhook responds immediately, before the AI agent even runs. We need it to wait until the agent is done, so the form knows the submission succeeded.

![An n8n node’s settings window in Stepthrough’s practice copy, step 8 of 87 (Change the response mode): the cursor is on “Respond”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-08.webp)

**Step 8 of 87.** By default the webhook responds immediately. We need it to wait. Click the **Respond** dropdown.

### Step 9: Use a Respond node

Using respond to webhook node. This tells n8n: do not send a response yet. Wait until you hit a dedicated respond node further down the chain. That way the form gets a real confirmation after the AI agent has processed everything.

![A dropdown menu in n8n in Stepthrough’s practice copy, step 9 of 87 (Use a Respond node): the cursor is on “Using 'Respond to Webhook' Node”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-09.webp)

**Step 9 of 87.** Click **Using 'Respond to Webhook' Node** — this lets the workflow finish before responding.

### Step 10: Back to the canvas

That is the webhook set up. Close the node.

![An n8n node’s settings window in Stepthrough’s practice copy, step 10 of 87 (Back to the canvas): the cursor is on “×”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-10.webp)

**Step 10 of 87.** Webhook is configured. Close the node with the **×**.

## Part 5: AI Agent

### Step 11: Add the next node

Now we decide what happens when the form data arrives.

![The n8n workflow canvas in Stepthrough’s practice copy, step 11 of 87 (Add the next node): the cursor is on “+”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-11.webp)

**Step 11 of 87.** Click the **+** on the right edge of the webhook node.

### Step 12: Add the AI Agent

AI Agent. Same node as last time, but now it handles form submissions instead of chat messages. It will read the form data, save it to Google Sheets, and send a personalized reply via Gmail.

![The n8n node list in Stepthrough’s practice copy, step 12 of 87 (Add the AI Agent): the cursor is on “AI Agent”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-12.webp)

**Step 12 of 87.** Click **AI Agent** — it will process the form data, save it to a sheet, and send an email.

### Step 13: Change the prompt source

This time the prompt does not come from a chat trigger — it comes from the webhook. We need to change the source so we can write our own prompt template.

![An n8n node’s settings window in Stepthrough’s practice copy, step 13 of 87 (Change the prompt source): the cursor is on “Source”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-13.webp)

**Step 13 of 87.** This time we are not using a chat trigger. Click the **Source** dropdown.

### Step 14: Define it manually

Define below. This lets us write a prompt that pulls the form fields directly from the webhook data.

![A dropdown menu in n8n in Stepthrough’s practice copy, step 14 of 87 (Define it manually): the cursor is on “Define below”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-14.webp)

**Step 14 of 87.** Click **Define below** so we can write a custom prompt template.

### Step 15: Write the prompt template

Here is the prompt template. Those double curly braces are n8n expressions that pull the name, email, request, and location from the webhook body, so the agent gets the real details every time.

![An n8n node’s settings window in Stepthrough’s practice copy, step 15 of 87 (Write the prompt template): the prompt template is filled in (“Name: {{ $json.body.name }} Email: {{…”).](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-15.webp)

**Step 15 of 87.** This template pulls the form fields from the webhook data. Paste in the prompt template.

### Step 16: Add an option

Now we need a system message — the standing instruction that tells the agent what to do with every submission.

![An n8n node’s settings window in Stepthrough’s practice copy, step 16 of 87 (Add an option): the cursor is on “+ Add Option”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-16.webp)

**Step 16 of 87.** Scroll down and click **+ Add Option** to add a system message.

### Step 17: System Message

System message. This is where we tell the agent how to prioritize each request, save it to Google Sheets, and email a confirmation via Gmail.

![A dropdown menu in n8n in Stepthrough’s practice copy, step 17 of 87 (System Message): the cursor is on “System Message”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-17.webp)

**Step 17 of 87.** Click **System Message**.

### Step 18: Write the system message

Here is the system message. It tells the agent to mark each request urgent, this week, or backlog, assign it to facilities, IT, or equipment, save it with the Google Sheets tool, and email the requester a confirmation.

![An n8n node’s settings window in Stepthrough’s practice copy, step 18 of 87 (Write the system message): the system message is filled in (“You are the maintenance and IT request…”).](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-18.webp)

**Step 18 of 87.** This tells the agent to set the priority, assign a team, save the request to Sheets and email a confirmation. Paste in the system message.

```text
You are the maintenance and IT request assistant for Ridgeline Supply Co., a small warehouse business.

Set a priority: Urgent (safety risk, or it stops shipping or receiving), This week, or Backlog. Assign one team: Facilities, IT, or Equipment.

Use the google sheets tool to add the request to the google sheet.

Use the gmail tool to email the requester a short confirmation with the priority and team.
```

### Step 19: Back to the canvas

The agent is configured. It knows to save to Sheets and reply via Gmail. Close the node.

![An n8n node’s settings window in Stepthrough’s practice copy, step 19 of 87 (Back to the canvas): the cursor is on “×”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-19.webp)

**Step 19 of 87.** The agent knows what to do. Close the node with the **×**.

## Part 6: Chat model

### Step 20: Give the agent a brain

The agent needs a model to think with.

![The n8n workflow canvas in Stepthrough’s practice copy, step 20 of 87 (Give the agent a brain): the cursor is on “+”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-20.webp)

**Step 20 of 87.** The agent still needs a language model. Click the **+** under **Chat Model**.

### Step 21: Pick OpenAI

OpenAI Chat Model. If you did the last module, this part will feel familiar.

![The n8n node list in Stepthrough’s practice copy, step 21 of 87 (Pick OpenAI): the cursor is on “OpenAI Chat Model”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-21.webp)

**Step 21 of 87.** Click **OpenAI Chat Model**.

### Step 22: Open the credentials

![An n8n node’s settings window in Stepthrough’s practice copy, step 22 of 87 (Open the credentials): the cursor is on “Credential”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-22.webp)

**Step 22 of 87.** Click the **Credential** dropdown.

### Step 23: Create a new credential

Create new credential. If you already made one in the last module, you could pick it from the list. We will create a fresh one here.

![A dropdown menu in n8n in Stepthrough’s practice copy, step 23 of 87 (Create a new credential): the cursor is on “+ Create new credential”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-23.webp)

**Step 23 of 87.** Click **+ Create new credential**.

### Step 24: Paste the key

If you followed the previous module, you already have one. If not, go to platform dot openai dot com, add credit, and create a key.

![The n8n credential window in Stepthrough’s practice copy, step 24 of 87 (Paste the key): the api key is filled in (“sk-proj-EXAMPLE-not-a-real-key-0000”).](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-24.webp)

**Step 24 of 87.** Paste in the API key to drop in your OpenAI key.

### Step 25: Save the credential

n8n tests the connection and stores the key.

![The n8n credential window in Stepthrough’s practice copy, step 25 of 87 (Save the credential): the cursor is on “Save”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-25.webp)

**Step 25 of 87.** Click **Save**.

### Step 26: Pick the model

Now the model dropdown.

![An n8n node’s settings window in Stepthrough’s practice copy, step 26 of 87 (Pick the model): the cursor is on “Model”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-26.webp)

**Step 26 of 87.** Click the **Model** dropdown.

### Step 27: gpt-5-mini

GPT five mini. Fast, cheap, and plenty smart for processing form submissions.

![A dropdown menu in n8n in Stepthrough’s practice copy, step 27 of 87 (gpt-5-mini): the cursor is on “gpt-5-mini”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-27.webp)

**Step 27 of 87.** Pick **gpt-5-mini** — fast and cheap.

### Step 28: Back to the canvas

Model is wired up. Close it.

![An n8n node’s settings window in Stepthrough’s practice copy, step 28 of 87 (Back to the canvas): the cursor is on “×”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-28.webp)

**Step 28 of 87.** Close the model node with the **×**.

## Part 7: Sheets tool

### Step 29: Add a tool

Now the tools. The system message told the agent to use Google Sheets and Gmail — but it cannot do either until we give it the actual tools.

![The n8n workflow canvas in Stepthrough’s practice copy, step 29 of 87 (Add a tool): the cursor is on “+”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-29.webp)

**Step 29 of 87.** The agent needs tools to do things. Click the **+** under **Tool**.

### Step 30: Add Google Sheets

Google Sheets Tool. This lets the agent save form submissions as rows in a spreadsheet.

![The n8n node list in Stepthrough’s practice copy, step 30 of 87 (Add Google Sheets): the cursor is on “Google Sheets Tool”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-30.webp)

**Step 30 of 87.** Click **Google Sheets Tool**.

## Part 8: Create the spreadsheet

### Step 31: Back to the canvas

Before we configure this node, we need to create the actual spreadsheet. Close this for now — we will come right back.

![An n8n node’s settings window in Stepthrough’s practice copy, step 31 of 87 (Back to the canvas): the cursor is on “Back to the canvas”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-31.webp)

**Step 31 of 87.** Before configuring this, create the spreadsheet it will write to. Close the node for now.

### Step 32: Open Google Sheets

Switch to the Google Sheets tab. You need to create the spreadsheet that the Sheets node will write to.

![An n8n node’s settings window in Stepthrough’s practice copy, step 32 of 87 (Open Google Sheets): the cursor is on “Google Sheets”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-32.webp)

**Step 32 of 87.** Click the **Google Sheets** tab to create a new blank spreadsheet.

### Step 33: Name the spreadsheet

Name it Requests — this is where every maintenance and IT request will go.

![Google Sheets in Stepthrough’s practice copy, step 33 of 87 (Name the spreadsheet): the cursor is on “Requests”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-33.webp)

**Step 33 of 87.** Click the title and rename it to **Requests**.

### Step 34: Type the first column header

Now set up the column headers. These need to match the form fields. In A1, type Name.

![Google Sheets in Stepthrough’s practice copy, step 34 of 87 (Type the first column header): the cursor is on “A1”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-34.webp)

**Step 34 of 87.** In cell **A1**, type **Name**.

### Step 35: Email

B1 — Email.

![Google Sheets in Stepthrough’s practice copy, step 35 of 87 (Email): the cursor is on “B1”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-35.webp)

**Step 35 of 87.** In cell **B1**, type **Email**.

### Step 36: Request

C1 — Request.

![Google Sheets in Stepthrough’s practice copy, step 36 of 87 (Request): the cursor is on “C1”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-36.webp)

**Step 36 of 87.** In cell **C1**, type **Request**.

### Step 37: Location

And D1 — Location. Four columns, matching exactly what the form sends: name, email, request, location.

![Google Sheets in Stepthrough’s practice copy, step 37 of 87 (Location): the cursor is on “D1”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-37.webp)

**Step 37 of 87.** In cell **D1**, type **Location**. That is all four columns — matching the form.

### Step 38: Back to n8n

The spreadsheet is ready. Switch back to n8n and connect the Google Sheets node to it.

![Google Sheets in Stepthrough’s practice copy, step 38 of 87 (Back to n8n): the cursor is on “n8n”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-38.webp)

**Step 38 of 87.** The spreadsheet is ready. Click the **n8n** tab to go back and connect it.

### Step 39: Open the Sheets node

Double click the Google Sheets node to open it up again. Now we can connect it to the Requests spreadsheet.

![The n8n workflow canvas in Stepthrough’s practice copy, step 39 of 87 (Open the Sheets node): the cursor is on “Google Sheets”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-39.webp)

**Step 39 of 87.** Double-click the **Google Sheets** node to configure it.

## Part 9: Sheets tool

### Step 40: Add a credential

![An n8n node’s settings window in Stepthrough’s practice copy, step 40 of 87 (Add a credential): the cursor is on “Credential”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-40.webp)

**Step 40 of 87.** Click the **Credential** dropdown.

### Step 41: Create a new credential

Create new credential. This one uses Google OAuth, so it opens a credential window.

![A dropdown menu in n8n in Stepthrough’s practice copy, step 41 of 87 (Create a new credential): the cursor is on “+ Create new credential”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-41.webp)

**Step 41 of 87.** Click **+ Create new credential** to sign in with Google.

### Step 42: Sign in with Google

This opens the Google account chooser.

![The Google sign-in window in Stepthrough’s practice copy, step 42 of 87 (Sign in with Google): the cursor is on “Sign in with Google”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-42.webp)

**Step 42 of 87.** Click **Sign in with Google** to connect your account.

### Step 43: Choose your account

Pick the Google account that owns the Requests spreadsheet.

![The Google sign-in window in Stepthrough’s practice copy, step 43 of 87 (Choose your account): the cursor is on “Google account”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-43.webp)

**Step 43 of 87.** Click your **Google account** to continue.

### Step 44: Allow Sheets access

Google is asking for permissions. Check the first box — this lets n8n read and write your spreadsheets.

![The Google sign-in window in Stepthrough’s practice copy, step 44 of 87 (Allow Sheets access): the cursor is on “See, edit, create, and delete all your Google Sheets…”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-44.webp)

**Step 44 of 87.** Check **See, edit, create, and delete all your Google Sheets spreadsheets**.

### Step 45: Allow Drive access

Second box — Drive access so n8n can find your spreadsheets by name.

![The Google sign-in window in Stepthrough’s practice copy, step 45 of 87 (Allow Drive access): the cursor is on “See, edit, create, and delete all of your Google Drive files”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-45.webp)

**Step 45 of 87.** Check **See, edit, create, and delete all of your Google Drive files**.

### Step 46: Allow external service

Last one — this lets Google connect to n8n as an external service.

![The Google sign-in window in Stepthrough’s practice copy, step 46 of 87 (Allow external service): the cursor is on “Connect to an external service”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-46.webp)

**Step 46 of 87.** Check **Connect to an external service**.

### Step 47: Sign in

All three checked.

![The Google sign-in window in Stepthrough’s practice copy, step 47 of 87 (Sign in): the cursor is on “Continue”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-47.webp)

**Step 47 of 87.** Click **Continue** to complete the Google sign-in.

### Step 48: Pick the spreadsheet

Now pick the spreadsheet.

![An n8n node’s settings window in Stepthrough’s practice copy, step 48 of 87 (Pick the spreadsheet): the cursor is on “Document”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-48.webp)

**Step 48 of 87.** Click the **Document** dropdown.

### Step 49: Requests

Requests — this is the spreadsheet where every form submission gets saved as a row.

![A dropdown menu in n8n in Stepthrough’s practice copy, step 49 of 87 (Requests): the cursor is on “Requests”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-49.webp)

**Step 49 of 87.** Click **Requests** — the spreadsheet where every request goes.

### Step 50: Pick the sheet tab

![An n8n node’s settings window in Stepthrough’s practice copy, step 50 of 87 (Pick the sheet tab): the cursor is on “Sheet”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-50.webp)

**Step 50 of 87.** Click the **Sheet** dropdown.

### Step 51: Sheet1

Sheet one. That is the only tab.

![A dropdown menu in n8n in Stepthrough’s practice copy, step 51 of 87 (Sheet1): the cursor is on “Sheet1”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-51.webp)

**Step 51 of 87.** Click **Sheet1**.

### Step 52: Map the Name column

Now the column mapping. Each column in the spreadsheet has a purple button.

![An n8n node’s settings window in Stepthrough’s practice copy, step 52 of 87 (Map the Name column): the cursor is on “Values to Send”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-52.webp)

**Step 52 of 87.** Under **Values to Send**, click the **✦** button next to **Name** — the AI agent will fill this in automatically.

### Step 53: Map the Email column

Email.

![An n8n node’s settings window in Stepthrough’s practice copy, step 53 of 87 (Map the Email column): the cursor is on “✦”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-53.webp)

**Step 53 of 87.** Click the **✦** button next to **Email**.

### Step 54: Map the Request column

Request.

![An n8n node’s settings window in Stepthrough’s practice copy, step 54 of 87 (Map the Request column): the cursor is on “✦”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-54.webp)

**Step 54 of 87.** Click the **✦** button next to **Request**.

### Step 55: Map the Location column

And Location. All four columns are now set to defined automatically by the model.

![An n8n node’s settings window in Stepthrough’s practice copy, step 55 of 87 (Map the Location column): the cursor is on “✦”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-55.webp)

**Step 55 of 87.** Click the **✦** button next to **Location**.

### Step 56: Back to the canvas

Sheets tool is fully configured — credential, spreadsheet, sheet, and column mapping. Close it.

![An n8n node’s settings window in Stepthrough’s practice copy, step 56 of 87 (Back to the canvas): the cursor is on “×”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-56.webp)

**Step 56 of 87.** Google Sheets is configured. Close the node with the **×**.

## Part 10: Gmail tool

### Step 57: Add another tool

The agent can save to Sheets now, but it also needs to send a reply email.

![The n8n workflow canvas in Stepthrough’s practice copy, step 57 of 87 (Add another tool): the cursor is on “+”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-57.webp)

**Step 57 of 87.** The agent also needs to send emails. Click the **+** next to Google Sheets to add another tool.

### Step 58: Add Gmail

Gmail Tool. This lets the agent send a personalized reply back to whoever submitted the form.

![The n8n node list in Stepthrough’s practice copy, step 58 of 87 (Add Gmail): the cursor is on “Gmail Tool”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-58.webp)

**Step 58 of 87.** Click **Gmail Tool**.

### Step 59: Add a credential

Gmail uses the same Google OAuth as Sheets.

![An n8n node’s settings window in Stepthrough’s practice copy, step 59 of 87 (Add a credential): the cursor is on “Credential”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-59.webp)

**Step 59 of 87.** Click the **Credential** dropdown.

### Step 60: Create a new credential

Create new credential. Gmail needs its own Google OAuth credential.

![A dropdown menu in n8n in Stepthrough’s practice copy, step 60 of 87 (Create a new credential): the cursor is on “+ Create new credential”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-60.webp)

**Step 60 of 87.** Click **+ Create new credential** to sign in with Google.

### Step 61: Sign in with Google

Same flow as before — Google account chooser then permissions.

![Gmail in Stepthrough’s practice copy, step 61 of 87 (Sign in with Google): the cursor is on “Sign in with Google”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-61.webp)

**Step 61 of 87.** Click **Sign in with Google** to connect your account.

### Step 62: Choose your account

Pick the Google account you want to send emails from.

![Gmail in Stepthrough’s practice copy, step 62 of 87 (Choose your account): the cursor is on “Google account”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-62.webp)

**Step 62 of 87.** Click your **Google account** to continue.

### Step 63: Allow email access

Google is asking for permissions. Check the first box — this gives n8n full email access.

![Gmail in Stepthrough’s practice copy, step 63 of 87 (Allow email access): the cursor is on “Read, compose, send, and permanently delete all your email…”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-63.webp)

**Step 63 of 87.** Check **Read, compose, send, and permanently delete all your email from Gmail**.

### Step 64: Allow drafts

Second box — manage drafts and send emails.

![Gmail in Stepthrough’s practice copy, step 64 of 87 (Allow drafts): the cursor is on “Manage drafts and send emails”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-64.webp)

**Step 64 of 87.** Check **Manage drafts and send emails**.

### Step 65: Allow compose

Read, compose, and send.

![Gmail in Stepthrough’s practice copy, step 65 of 87 (Allow compose): the cursor is on “Read, compose, and send emails from your Gmail account”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-65.webp)

**Step 65 of 87.** Check **Read, compose, and send emails from your Gmail account**.

### Step 66: Allow metadata

View email message metadata.

![Gmail in Stepthrough’s practice copy, step 66 of 87 (Allow metadata): the cursor is on “View your email message metadata”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-66.webp)

**Step 66 of 87.** Check **View your email message metadata**.

### Step 67: Allow modify

View and modify but not delete.

![Gmail in Stepthrough’s practice copy, step 67 of 87 (Allow modify): the cursor is on “View and modify but not delete your email”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-67.webp)

**Step 67 of 87.** Check **View and modify but not delete your email**.

### Step 68: Allow view

Last one — view your email messages and settings.

![Gmail in Stepthrough’s practice copy, step 68 of 87 (Allow view): the cursor is on “View your email messages and settings”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-68.webp)

**Step 68 of 87.** Check **View your email messages and settings**.

### Step 69: Sign in

All six checked.

![Gmail in Stepthrough’s practice copy, step 69 of 87 (Sign in): the cursor is on “Continue”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-69.webp)

**Step 69 of 87.** Click **Continue** to complete the Google sign-in.

### Step 70: Back to the canvas

Gmail is connected. The agent can now send emails. Close the node.

![An n8n node’s settings window in Stepthrough’s practice copy, step 70 of 87 (Back to the canvas): the cursor is on “×”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-70.webp)

**Step 70 of 87.** Gmail is connected. Close the node with the **×**.

## Part 11: Respond node

### Step 71: Add the respond node

One last piece. Remember we told the webhook to wait for a respond node before sending back a reply? We need to add that node now.

![The n8n workflow canvas in Stepthrough’s practice copy, step 71 of 87 (Add the respond node): the cursor is on “+”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-71.webp)

**Step 71 of 87.** One more node. Click the **+** on the right edge of the AI Agent.

### Step 72: Respond to Webhook

Respond to Webhook. When the agent finishes processing — saving to Sheets and sending the email — this node sends a success response back to the form, so the user sees a confirmation message instead of an error.

![The n8n node list in Stepthrough’s practice copy, step 72 of 87 (Respond to Webhook): the cursor is on “Respond to Webhook”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-72.webp)

**Step 72 of 87.** Click **Respond to Webhook**.

### Step 73: Back to the canvas

Nothing to configure. This node just sends back the response. Close it.

![An n8n node’s settings window in Stepthrough’s practice copy, step 73 of 87 (Back to the canvas): the cursor is on “×”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-73.webp)

**Step 73 of 87.** Nothing to configure here. Close the node with the **×**.

## Part 12: Publish

### Step 74: Publish the workflow

The workflow is complete. Webhook trigger, AI agent with a model, Google Sheets, Gmail, and a respond node. Once published, the webhook URL is active and ready to receive form submissions.

![The n8n workflow editor in Stepthrough’s practice copy, step 74 of 87 (Publish the workflow): the cursor is on “Publish”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-74.webp)

**Step 74 of 87.** The workflow is complete. Click **Publish** to make it live.

## Part 13: Add the secret

### Step 75: Open the webhook

The workflow is published, but Lovable still needs the webhook URL.

![The n8n workflow canvas in Stepthrough’s practice copy, step 75 of 87 (Open the webhook): the cursor is on “Webhook”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-75.webp)

**Step 75 of 87.** Double-click the **Webhook** node to get its production URL.

### Step 76: Production URL

Switch to the production URL tab. The test URL only works during testing. The production URL is the one your published workflow uses.

![An n8n node’s settings window in Stepthrough’s practice copy, step 76 of 87 (Production URL): the cursor is on “Production URL”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-76.webp)

**Step 76 of 87.** Click the **Production URL** tab — this is the live URL your form will POST to.

### Step 77: Copy the URL

You will paste this into Lovable so the form knows where to send data.

![An n8n node’s settings window in Stepthrough’s practice copy, step 77 of 87 (Copy the URL): the cursor is on “copy”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-77.webp)

**Step 77 of 87.** Click the URL to **copy** it. You will paste it into Lovable as a secret.

### Step 78: Back to the canvas

Got the URL. Close the node.

![An n8n node’s settings window in Stepthrough’s practice copy, step 78 of 87 (Back to the canvas): the cursor is on “Back to the canvas”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-78.webp)

**Step 78 of 87.** URL copied. Close the webhook node.

### Step 79: Back to Lovable

Switch back to Lovable. We need to paste the webhook URL into a secret so the form can reach the workflow.

![An n8n node’s settings window in Stepthrough’s practice copy, step 79 of 87 (Back to Lovable): the cursor is on “Lovable”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-79.webp)

**Step 79 of 87.** Click the **Lovable** tab. We need to give it the webhook URL.

### Step 80: Open More

To add a secret in Lovable, click More in the toolbar. This opens the Cloud settings where you can manage secrets.

![Lovable in Stepthrough’s practice copy, step 80 of 87 (Open More): the cursor is on “More”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-80.webp)

**Step 80 of 87.** Click **More** in the toolbar to open project settings.

### Step 81: Name the secret

This is the secrets page. The prompt told Lovable to reference a secret config value called N8N WEBHOOK URL instead of hardcoding it.

![Lovable’s secrets settings in Stepthrough’s practice copy, step 81 of 87 (Name the secret): the secret name is filled in (“N8N_WEBHOOK_URL”).](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-81.webp)

**Step 81 of 87.** Paste in the secret name — this matches what the Lovable app expects.

### Step 82: Paste the webhook URL

This is the live endpoint your form will POST to.

![Lovable’s secrets settings in Stepthrough’s practice copy, step 82 of 87 (Paste the webhook URL): the webhook url is filled in (“https://your-instance.app.n8n.cloud/webhook/a1b…”).](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-82.webp)

**Step 82 of 87.** Paste in the webhook URL to drop in the production URL you just copied.

### Step 83: Save the secret

The Lovable app now knows where to send form submissions. The webhook URL is stored as a secret, not in the source code — exactly how it should be.

![Lovable’s secrets settings in Stepthrough’s practice copy, step 83 of 87 (Save the secret): the cursor is on “Save”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-83.webp)

**Step 83 of 87.** Click **Save**. The Lovable app can now reach the n8n workflow.

## Part 14: Test the form

### Step 84: Open the form

Time to test.

![Lovable in Stepthrough’s practice copy, step 84 of 87 (Open the form): the cursor is on “Preview”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-84.webp)

**Step 84 of 87.** Click **Preview** in the toolbar to test the form.

### Step 85: Fill the form

Fill out the form with sample data.

![The Lovable app preview in Stepthrough’s practice copy, step 85 of 87 (Fill the form): the cursor is on “Fill with test data”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-85.webp)

**Step 85 of 87.** Click **Fill with test data** to populate the form fields.

### Step 86: Submit the form

The form posts the request to the n8n webhook. The agent sees a stuck dock door with trucks waiting, marks it urgent for the facilities team, saves a row to Google Sheets, and emails a confirmation through Gmail. The respond node sends back a success message, and the form shows the confirmation.

![The Lovable app preview in Stepthrough’s practice copy, step 86 of 87 (Submit the form): the cursor is on “Submit Request”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-86.webp)

**Step 86 of 87.** Click **Submit Request**. The form sends the data to n8n; the agent sets the priority and team, saves it to Sheets and emails a confirmation.

### Step 87: Check the spreadsheet

The form submitted successfully. Now check the spreadsheet — click the Google Sheets tab to see the row the agent just wrote.

![The Lovable app preview in Stepthrough’s practice copy, step 87 of 87 (Check the spreadsheet): the cursor is on “Google Sheets”, highlighted.](https://learn.ynteractive.com/content/guide/lovable-n8n-operations/step-87.webp)

**Step 87 of 87.** Click the **Google Sheets** tab to see the data the agent saved.

## Now do it yourself, free

Reading the steps is a start. Doing them is how it sticks. The interactive lesson puts you in a practice copy of Lovable and n8n: you do every step yourself, it checks your work, and “Do it for me” finishes any step you get stuck on. Nothing touches your real accounts.

[Practice “Build an AI Maintenance and IT Request Form” step by step](https://learn.ynteractive.com/modules/lovable-n8n-operations)

[Build an AI Maintenance and IT Request Form: lesson overview](https://learn.ynteractive.com/content/ai-maintenance-it-request-form-lovable-n8n) · [All free tutorials](https://learn.ynteractive.com/content)