FlowStep
← All walkthroughs
Full libraryn8n FormsHTTP RequestJSReportGmail

Generate and email a PDF invoice from a form submission with JSReport

Collect invoice details with an n8n form, render a finished PDF through JSReport, and email it straight to the customer — no manual document assembly.

30 minIntermediate7 steps

What this looks like

One step on screen at a time. Read it, do it, tap Next.

Generate and email a PDF invoice from a form submission with JSReport

Step 1 of 7

01 / 07Form Trigger

Add the Form Invoice trigger

Create a workflow and add a Form Trigger node named Form Invoice. This is what a customer or staff member fills in to request an invoice — you can swap it for a webhook from another system l

Checkpoint

Submitting the form produces an item with buyer details and up to two line items.

Back
Next

Before you begin

Tick these off as you sort them. Stopping halfway to create an account is how a fifteen-minute build becomes an hour.

0 of 8 ready

Ticks are saved on this device, so you can come back to them.

  • Account

    This is the rendering service that turns your data into a PDF. JSReportOnline's free tier is enough to build and test this.

    JSReport
  • Have ready

    Create a template named something like invoice-main with the layout you want, including placeholders for buyer details and line items. This walkthrough assumes the template already exists — the workflow only supplies the data.

  • Credential

    The username and password (or API key) JSReport gave you when you created the account, used for the HTTP Request node's authentication.

  • Account

    Connected to n8n with OAuth2 so the workflow can send mail on your behalf.

  • Time

    Most of the setup time goes into building the JSReport template itself, not the n8n workflow.

The basics — ticked once, remembered everywhere

  • Account

    Either the hosted version or a self-hosted install. Everything here works the same on both — the only visible difference is the shape of your webhook URLs.

    Create a workspace
  • Know-how

    Adding a node, connecting two of them, and pressing Execute. If any of that is new, the free primer covers it in about ten minutes.

  • Credential

    You will paste at least one secret during setup. A password manager beats a notes app, and it stops you pasting a live key into a chat window by accident.

The shape of the workflow

The nodes you will end up with, left to right, in the order you add them.

Form TriggerHTTP RequestGmail
The finished Generate and email a PDF invoice from a form submission with JSReport workflow on the n8n canvas4 things to set here
  1. 1Form Triggerthe trigger — everything starts here
  2. 2HTTP RequestBuild the JSReport request body from the form data
  3. 3GmailEmail the invoice with Gmail
  4. 4Test end to end, then activateTest end to end, then activate
The finished workflow on the n8n canvasTap to enlarge

Skip the node hunting

Import a starter file with every node for this build already on the canvas, named after its step and wired in order, each one carrying a sticky note with the values to enter. You still connect your own accounts and fill the fields — that is what the walkthrough takes you through — but you never start at a blank canvas.

In n8n: Workflows → Import from file.

Included with the library

What you will build

Jump straight to any step, or print the list and tick it off beside your n8n tab.

If something goes wrong

Everything ready?

Start walkthrough