Quick start

Build a contact form, send its submissions to n8n, and put it on a web page. You need a form2wf account and an n8n instance reachable from the internet.

1. Create the n8n workflow#

   In n8n, create a workflow that starts with a Webhook node:

   • HTTP Method: POST
   • Path: contact (anything unique)
   • Respond: Immediately is fine for a plain form

   Add what should happen next — for example a Send Email node whose body uses {{ $json.body.data.message }}. Submitted values are always under body.data. Activate the workflow and copy the Production URL (it contains /webhook/, not /webhook-test/).

2. Create the form#

   In the dashboard, open Forms and click Create Form. Name it Contact and add three fields: Name (text, required), Email (email, required) and Message (textarea). Open Form Settings, paste the production URL under Submit Webhook, and save.

   The same form as JSON (what the MCP server and API use):

   config

   {
     "showTitle": true,
     "fields": [
       { "id": "name",    "type": "text",     "name": "name",    "label": "Name",    "required": true },
       { "id": "email",   "type": "email",    "name": "email",   "label": "Email",   "required": true },
       { "id": "message", "type": "textarea", "name": "message", "label": "Message", "required": true }
     ]
   }

3. Test it on the hosted page#

   Every form gets a standalone page at https://form2wf.com/forms/<org-slug>/<form-slug> (the Embed button shows the exact link). Submit a test message. In n8n, the execution shows a body like:

   what n8n receives

   {
     "endpointId": "3f1c…",
     "data": { "name": "Ada", "email": "ada@example.com", "message": "Hello!" },
     "metadata": { "timestamp": "2026-09-29T14:03:11.000Z", "origin": "https://your-site.com", "userAgent": "…", "ip": "…" },
     "userId": null, "user": null, "endUserId": null, "endUser": null
   }

4. Embed it on your site#

   Click Embed on the form and paste the snippet where the form should appear:

   html

   <div id="f2wf-contact"></div>
   
   <script src="https://form2wf.com/f2wf.js"></script>
   <script>
     f2wf.load("your-org", "contact", {
       submitText: "Send message",
       successMessage: "Thanks — we'll reply within a day."
     });
   </script>

   That's it: the form renders with your theme, validates required fields, and posts to n8n through form2wf.

5. Check deliveries#

   Each submission appears as an execution in n8n. form2wf also logs every webhook call with its outcome and n8n's response or error — ask an agent connected through MCP to “list failed submissions for the contact form” (the list_submissions tool).

Next steps#

• Field reference — dropdowns, file uploads, repeatable groups and more.
• Data pages — show n8n data in tables with row actions.
• Webhooks & payloads — secure your webhook and handle every payload shape.