# 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](https://form2wf.com/docs/mcp) 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:
    
    ```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](https://form2wf.com/docs/mcp) to “list failed submissions for the contact form” (the `list_submissions` tool).
    

**Prefer to build with an AI agent?** Create an API key under **API Keys** in the dashboard, connect Claude Code with one command, and ask it to “create a contact form that posts to my n8n webhook”. See [MCP server & API keys](https://form2wf.com/docs/mcp).

## Next steps

-   [Field reference](https://form2wf.com/docs/fields) — dropdowns, file uploads, repeatable groups and more.
-   [Data pages](https://form2wf.com/docs/data-pages) — show n8n data in tables with row actions.
-   [Webhooks & payloads](https://form2wf.com/docs/webhooks) — secure your webhook and handle every payload shape.

---
Source: https://form2wf.com/docs/quickstart — Form2Workflow documentation (Getting started)