Appearance
Quick tour
A five-minute walk from an empty account to a live form that runs a flow. You will create a project, add a form, wire a flow behind it, and publish.
This tour assumes you can sign in and reach your dashboard. If you are self-hosting and have not set that up yet, start with First deploy.
1. Create a project
From your dashboard, create a new project and give it a name — say, Lead capture. FlowRunner opens the editor. Every new project starts with one flow file called main and an empty directory tree on the left. Files live in that tree; the canvas or designer for the selected file fills the middle of the screen.
INFO
📸 Screenshot — the project editor: directory tree on the left, canvas in the centre, node/inspector panel below.
2. Add a form
Add a new form file to the project — call it contact. Form files open in the Designer. Rather than starting from a blank slab, drop in a ready-made block: a Contact block gives you a titled section with name, email, and message fields already laid out.
Click any text to edit it inline. When you want the whole thing to match your brand, adjust the theme once and every block restyles together. Mark the fields you require so FlowRunner can enforce them — required fields are checked on the server, not just in the browser.
3. Build a flow
Switch back to the main flow file. A flow is a graph you draw on the canvas:
- Drag a Start node onto the canvas — it is the entry point and receives the incoming data.
- Drag an Email node and wire Start's output into it. Configure it to email you, using the submitted fields with references like
${contact.email}. - Drag an End node and wire the Email node into it to finish the run.
That is a complete flow: it starts, sends an email, and ends. You can grow it later — add an If to branch, an HTTP node to post the lead to another service, or a MongoDB node to store it.
TIP
Test the flow before you connect anything to it. See Testing & the trigger URL — you can fire the flow with sample input and watch each node run.
4. Connect the form to the flow
Open the contact form's settings and set its on-submit flow to your main flow. Now, when someone submits the form, FlowRunner does two things: it captures the submission (so you never lose the data) and it forwards that submission into the flow, which sends your email. The capture always happens; if the flow errors, the submission is still safely stored.
5. Publish
Editing changes the draft. The public sees only what you publish. Publish the contact form and FlowRunner takes a snapshot and serves it at its public URL. Submit the live form once to confirm the round trip: you should see the submission appear in the responses inbox and receive the email.
NOTE
Email sending needs RESEND_API_KEY to be configured. Without it the flow still runs and the submission is still captured — the email step just reports that no provider is set. See Troubleshooting.
Where to go next
- Add a landing page in front of the form — Landing page tutorial.
- Point a custom domain at the project — Custom domains.
- Turn a flow into a public JSON API — Webhook API tutorial.