Collect Web Form Leads and Create Contacts in Hubspot with Submitrax

The workflow JSON

Copy or download the full n8n JSON below. Paste it into a new n8n workflow, add your credentials, activate. Full import guide →

{
  "id": "gDWoH5l2fJ5rgnEI",
  "meta": {
    "templateCredsSetupCompleted": true
  },
  "name": "Collect web form submissions and create contacts in HubSpot via Submitrax",
  "tags": [],
  "nodes": [
    {
      "id": "a096ceaa-9359-4e18-9039-10409c943d4a",
      "name": "get workspace ID",
      "type": "CUSTOM.submitrax",
      "position": [
        64,
        0
      ],
      "parameters": {
        "resource": "workspace",
        "requestOptions": {}
      },
      "credentials": {
        "submitraxApi": {
          "name": "<your credential>"
        }
      },
      "typeVersion": 1
    },
    {
      "id": "42821e22-63b3-4b22-96a6-53b0dd6bb1a0",
      "name": "Create a form",
      "type": "CUSTOM.submitrax",
      "position": [
        272,
        0
      ],
      "parameters": {
        "name": "=Contact to hubspot {{$workflow.id}}",
        "operation": "create",
        "workspaceId": "={{ $json.id }}",
        "requestOptions": {},
        "additionalFields": {
          "emailTo": "zeerobug@gmail.com",
          "customHtml": "<style>\n  .contact-form { font-family: 'Inter', system-ui, sans-serif; max-width: 400px; margin: 0 auto; color: #1f2937; }\n  .contact-form label { display: block; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.875rem; }\n  .contact-form input, .contact-form textarea { width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; margin-bottom: 1.25rem; font-size: 1rem; transition: border-color 0.2s; box-sizing: border-box; }\n  .contact-form input:focus, .contact-form textarea:focus { border-color: #4f46e5; outline: none; ring: 2px solid #e0e7ff; }\n  .contact-form button { background-color: #4f46e5; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 0.5rem; width: 100%; font-weight: 600; font-size: 1rem; cursor: pointer; transition: background-color 0.2s; }\n  .contact-form button:hover { background-color: #4338ca; }\n</style>\n<form action=\"https://s.submitrax.com/fc60f8a676f76e715e2eb0101f2a8682\" method=\"POST\" class=\"contact-form\">\n  <div style=\"margin-bottom: 1.5rem; text-align: center;\">\n    <h2 style=\"margin: 0; font-size: 1.5rem; font-weight: 700;\">Contact Us</h2>\n    <p style=\"margin: 0.5rem 0 0; color: #6b7280;\">We'd love to hear from you.</p>\n  </div>\n  \n  <label for=\"name\">Name</label>\n  <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"John Doe\" required />\n  \n <label for=\"name\">Company</label>\n  <input type=\"text\" id=\"company\" name=\"company\" placeholder=\"my company\" required />\n  \n <label for=\"name\">Website</label>\n  <input type=\"text\" id=\"website\" name=\"website\" placeholder=\"https://my-company-.com\" required />\n  \n  <label for=\"email\">Email</label>\n  <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"john@example.com\" required />\n  \n  <button type=\"submit\">Send Message</button>\n</form>"
        }
      },
      "credentials": {
        "submitraxApi": {
          "name": "<your credential>"
        }
      },
      "typeVersion": 1
    },
    {
      "id": "80c7dff8-326f-4489-973c-aaf8078603b4",
      "name": "Sticky Note",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -240,
        -144
      ],
      "parameters": {
        "color": 5,
        "width": 880,
        "height": 320,
        "content": "## Step 1 : Form Creation\n- Create the form\n- Set the HTML in the \"Create form\" node\n- Set the email to receive an alert when a submission has been created"
      },
      "typeVersion": 1
    },
    {
      "id": "57cac06c-c58c-469a-884a-6a741139ec7d",
      "name": "Sticky Note1",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -240,
        192
      ],
      "parameters": {
        "width": 880,
        "height": 336,
        "content": "## Step 2: Form submission\n### Paste the ID you got from step 1 in the node \"Get a Form\"\n- Load the html of the form\n- Get the production URL of the node \"Form viewer\"\n- Publish the workflow\n- Open the production URL in another TAB\n- Fill in the form and click submit"
      },
      "typeVersion": 1
    },
    {
      "id": "745358e6-78ba-46d8-b492-4bc7f13cf300",
      "name": "Get a form",
      "type": "CUSTOM.submitrax",
      "position": [
        64,
        384
      ],
      "parameters": {
        "formId": "=97136530-9e1d-412d-9a98-1075fd4c3547",
        "operation": "get",
        "requestOptions": {}
      },
      "credentials": {
        "submitraxApi": {
          "name": "<your credential>"
        }
      },
      "typeVersion": 1
    },
    {
      "id": "64858162-1ca8-4b4f-9d5d-225cb14b39b1",
      "name": "Click here to start",
      "type": "n8n-nodes-base.manualTrigger",
      "position": [
        -144,
        0
      ],
      "parameters": {},
      "typeVersion": 1
    },
    {
      "id": "849071c8-9b02-44f4-bec2-2434e4129c6d",
      "name": "Form viewer",
      "type": "n8n-nodes-base.webhook",
      "position": [
        -144,
        384
      ],
      "parameters": {
        "path": "3e00b433-6fa8-41a0-b0f0-1e193c18d74b",
        "options": {},
        "responseMode": "responseNode"
      },
      "typeVersion": 2.1
    },
    {
      "id": "8ebce2be-8fb6-4386-9417-fbd5e78e0b0d",
      "name": "Sticky Note2",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -240,
        544
      ],
      "parameters": {
        "color": 4,
        "width": 880,
        "height": 320,
        "content": "## Step 3: On form submission, update / Insert in HubSpot\n### Paste the ID you got from step 1 in the node \"Submitrax Trigger\" \n- The trigger is launched when you submit the form\n- Your data is uploaded to Hubspot"
      },
      "typeVersion": 1
    },
    {
      "id": "63ed0305-e355-4d87-9c26-9d746fdc782f",
      "name": "Display the form",
      "type": "n8n-nodes-base.respondToWebhook",
      "position": [
        256,
        384
      ],
      "parameters": {
        "options": {},
        "respondWith": "text",
        "responseBody": "=<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Contact Us</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\" />\n  <style>\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n \n    body {\n      min-height: 100vh;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background-color: #f9fafb;\n      padding: 2rem 1rem;\n    }\n \n    .contact-form { font-family: 'Inter', system-ui, sans-serif; max-width: 400px; width: 100%; margin: 0 auto; color: #1f2937; background: #ffffff; padding: 2rem; border-radius: 1rem; box-shadow: 0 4px 24px rgba(0,0,0,0.07); }\n    .contact-form label { display: block; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.875rem; }\n    .contact-form input, .contact-form textarea { width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; margin-bottom: 1.25rem; font-size: 1rem; transition: border-color 0.2s; box-sizing: border-box; font-family: inherit; }\n    .contact-form input:focus, .contact-form textarea:focus { border-color: #4f46e5; outline: none; box-shadow: 0 0 0 3px #e0e7ff; }\n    .contact-form button { background-color: #4f46e5; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 0.5rem; width: 100%; font-weight: 600; font-size: 1rem; cursor: pointer; transition: background-color 0.2s; font-family: inherit; }\n    .contact-form button:hover { background-color: #4338ca; }\n  </style>\n</head>\n<body>\n {{ $json.custom_html }}\n</body>\n</html>"
      },
      "typeVersion": 1.5
    },
    {
      "id": "9cf4146d-0548-46c5-9e81-15db7f225e5e",
      "name": "SubmitraX Trigger",
      "type": "CUSTOM.submitraxTrigger",
      "position": [
        -144,
        688
      ],
      "parameters": {
        "formId": "=97136530-9e1d-412d-9a98-1075fd4c3547"
      },
      "credentials": {
        "submitraxApi": {
          "name": "<your credential>"
        }
      },
      "typeVersion": 1
    },
    {
      "id": "dfeb7e81-fb01-48ce-b410-dbe0289732fc",
      "name": "Create or update a contact",
      "type": "n8n-nodes-base.hubspot",
      "position": [
        64,
        688
      ],
      "parameters": {
        "email": "={{ $json.data.email }}",
        "options": {},
        "additionalFields": {
          "firstName": "={{ $json.data.name }}",
          "websiteUrl": "={{ $json.data.website }}",
          "companyName": "={{ $json.data.company }}"
        }
      },
      "credentials": {
        "hubspotApi": {
          "name": "<your credential>"
        }
      },
      "typeVersion": 2.2
    },
    {
      "id": "446ffdbe-5177-4d73-9c74-5e4248ff0efb",
      "name": "Sticky Note3",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -736,
        -144
      ],
      "parameters": {
        "color": 7,
        "width": 480,
        "height": 1232,
        "content": "## Who it's for\n\nThis template is for marketers, sales teams, and developers who want to capture leads from a serverless HTML form and automatically sync them into HubSpot \u2014 without managing a backend server or a separate form platform subscription. It's ideal for small teams using n8n as their integration layer and HubSpot as their CRM of record.\n\n---\n\n## How it works\n\nThe workflow is split into three logical stages:\n\n**Stage 1 \u2014 Form creation.** A manual trigger kicks off a one-time setup sequence: it retrieves your submitrax workspace ID, then creates a branded contact form (name, company, website, email) hosted entirely by submitrax. An alert email is sent to a designated address whenever a new submission arrives.\n\n**Stage 2 \u2014 Form display.** A webhook node acts as a lightweight web server. When a visitor hits the production URL, n8n fetches the form HTML from submitrax and serves it as a fully styled HTML page \u2014 no hosting infrastructure required.\n\n**Stage 3 \u2014 Lead capture to HubSpot.** When a visitor submits the form, the submitrax trigger fires. The submission payload (name, company, website, email) is mapped directly to a HubSpot `Create or Update Contact` call using OAuth2. If the contact already exists, it is updated; otherwise a new record is created.\n\n---\n\n## How to set up\n\n1. Create a [Submitrax account](https://submitrax.com) and add your API credentials in n8n.\n2. Connect your HubSpot account via OAuth2.\n3. Run the **Click here to start** manual trigger once to create the form and note the generated form ID.\n4. Update the `Get a form` and `SubmitraX Trigger` nodes with the form ID returned in step 3.\n5. Activate the workflow and open the **Form viewer** webhook production URL in a browser to test the end-to-end flow.\n\n---\n\n## Requirements\n\n- n8n (v1.x or later, cloud or self-hosted)\n- A [submitrax](https://submitrax.com) account with API access\n- A HubSpot account with OAuth2 credentials configured in n8n\n\n---\n\n## How to customize the workflow\n\n- **Change the form fields:** Edit the `customHtml` property in the **Create a form** node. Add or remove `<input>` elements and update the HubSpot mapping in **Create or update a contact** accordingly.\n- **Style the form:** Modify the inline CSS in either the form creation node or the **Display the form** webhook response node.\n- **Route to a different CRM:** Replace the HubSpot node with any CRM node (Salesforce, Pipedrive, etc.) and remap the submitrax `$json.data.*` fields to match.\n- **Add a confirmation page:** Insert a second **Respond to Webhook** node after the HubSpot step to show a thank-you page to the submitter.\n- **Notify your team:** Add a Slack or email node after **Create or update a contact** to alert your sales team in real time when a new lead arrives."
      },
      "typeVersion": 1
    },
    {
      "id": "e5fc222c-941a-4765-982d-56837799fbd8",
      "name": "Sticky Note8",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -240,
        880
      ],
      "parameters": {
        "color": 2,
        "width": 880,
        "height": 220,
        "content": "## Contact me\n- If you need any modification to this workflow\n- if you need some help with this workflow\n- Or if you need any workflow in n8n, Make, or Langchain / Langgraph\n\nWrite to me: [thomas@pollup.net](mailto:thomas@pollup.net)\n\n**Take a look at my others workflows [here](https://n8n.io/creators/zeerobug/)**\n\n"
      },
      "typeVersion": 1
    },
    {
      "id": "b4190d18-2962-4179-a52a-b3f2646625e6",
      "name": "Code in JavaScript",
      "type": "n8n-nodes-base.code",
      "position": [
        480,
        0
      ],
      "parameters": {
        "jsCode": "const formId = $input.first().json.id;\nconsole.log(`Copy this form ID into your trigger and Get a form nodes: ${formId}`);\nreturn [{ json: { formId, instruction: \"Paste this ID into SubmitraX Trigger and Get a form nodes, then activate the workflow.\" } }];"
      },
      "typeVersion": 2
    }
  ],
  "active": false,
  "settings": {
    "binaryMode": "separate",
    "executionOrder": "v1"
  },
  "versionId": "583e9249-991a-4401-a68d-9ae7dad51f7f",
  "nodeGroups": [],
  "connections": {
    "Get a form": {
      "main": [
        [
          {
            "node": "Display the form",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Form viewer": {
      "main": [
        [
          {
            "node": "Get a form",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Create a form": {
      "main": [
        [
          {
            "node": "Code in JavaScript",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "get workspace ID": {
      "main": [
        [
          {
            "node": "Create a form",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "SubmitraX Trigger": {
      "main": [
        [
          {
            "node": "Create or update a contact",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Click here to start": {
      "main": [
        [
          {
            "node": "get workspace ID",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}

Credentials you'll need

Each integration node will prompt for credentials when you import. We strip credential IDs before publishing — you'll add your own.

• hubspotApi
• submitraxApi

About this workflow

This workflow creates a SubmitraX-hosted HTML contact form, serves it via an n8n webhook, and syncs each submission to HubSpot as a create-or-update contact. Starts manually to fetch your SubmitraX workspace ID and create a new SubmitraX form with custom HTML and an email…

Source: https://n8n.io/workflows/16298/ — original creator credit. Request a take-down →

More CRM & Sales workflows → · Browse all categories →

Related workflows

Workflows that share integrations, category, or trigger type with this one. All free to copy and import.