8
n8n 中文网amn8n.com

落地页 -> PDF表单填写 -> 邮件

中级

这是一个自动化工作流,包含 12 个节点。主要使用 Set, Html, Webhook, EmailSend, HttpRequest 等节点。 自动化PDF表单处理,使用Web表单和邮件发送

前置要求
  • HTTP Webhook 端点(n8n 会自动生成)
  • 可能需要目标 API 的认证凭证

分类

-
工作流预览
可视化展示节点连接关系,支持缩放和平移
导出工作流
复制以下 JSON 配置到 n8n 导入,即可使用此工作流
{
  "id": "Ov0kAaToP65xgc5h",
  "meta": {
    "instanceId": "b503899dfd9ae32bbf8e1f446a1f2c9b3c59f80c79b274c49b1606b7ae9579e1",
    "templateCredsSetupCompleted": true
  },
  "name": "落地页 -> PDF表单填写 -> 邮件",
  "tags": [],
  "nodes": [
    {
      "id": "0ddb247e-85b8-4cf6-afd7-03853a8053c4",
      "name": "HTTP 请求",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        -672,
        -48
      ],
      "parameters": {
        "url": "https://community.adobe.com/havfw69955/attachments/havfw69955/acrobat-reader/109709/1/EDIT%20OoPdfFormExample.pdf",
        "options": {}
      },
      "typeVersion": 4.2
    },
    {
      "id": "2f4803e6-999e-4c7f-b782-3ea8ab5042cf",
      "name": "PDF表单填写(填充PDF字段)",
      "type": "@custom-js/n8n-nodes-pdf-toolkit.PdfFormFill",
      "position": [
        -352,
        -48
      ],
      "parameters": {
        "fields": {
          "field": [
            {
              "name": "Given Name Text Box",
              "value": "={{ $json.body.firstName }}"
            },
            {
              "name": "Family Name Text Box",
              "value": "={{ $json.body.lastName }}"
            },
            {
              "name": "Address 1 Text Box",
              "value": "={{ $json.body.address }}"
            },
            {
              "name": "House nr Text Box",
              "value": "={{ $json.body.houseNo }}"
            },
            {
              "name": "Postcode Text Box",
              "value": "={{ $json.body.postalCode }}"
            },
            {
              "name": "City Text Box",
              "value": "={{ $json.body.city }}"
            },
            {
              "name": "Country Combo Box",
              "value": "={{ $json.body.country }}"
            },
            {
              "name": "Language 1 Check Box",
              "value": "X"
            }
          ]
        }
      },
      "credentials": {
        "customJsApi": {
          "id": "BFGbk0a71fKWY967",
          "name": "CustomJS account"
        }
      },
      "typeVersion": 1
    },
    {
      "id": "eb6759e3-b65f-4d1a-9893-c1e3ad1386c3",
      "name": "获取PDF表单字段",
      "type": "@custom-js/n8n-nodes-pdf-toolkit.GetFormFieldNames",
      "position": [
        -208,
        416
      ],
      "parameters": {},
      "credentials": {
        "customJsApi": {
          "id": "8S7Z5SlOpsxN7upu",
          "name": "CustomJS account 2"
        }
      },
      "typeVersion": 1
    },
    {
      "id": "9887ca8e-b5ca-4661-86b4-da496203d326",
      "name": "便签",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -384,
        272
      ],
      "parameters": {
        "width": 480,
        "height": 320,
        "content": "## 表单字段名称(可选)"
      },
      "typeVersion": 1
    },
    {
      "id": "a6cc6187-da30-4a93-a10e-81748e625d8f",
      "name": "发送邮件",
      "type": "n8n-nodes-base.emailSend",
      "position": [
        -80,
        -48
      ],
      "webhookId": "2d24ed84-fb19-460a-aa90-0015adffc703",
      "parameters": {
        "text": "Hello,\n\nHere is the completed PDF form.\n\nBest\nHenrik",
        "options": {
          "attachments": "data"
        },
        "subject": "Filled PDF Form",
        "toEmail": "test@testmail.com",
        "fromEmail": "test@test.de",
        "emailFormat": "text"
      },
      "credentials": {
        "smtp": {
          "id": "vvY03KbEvsdTVMXI",
          "name": "SMTP account"
        }
      },
      "typeVersion": 2.1
    },
    {
      "id": "dc31be04-a1f7-479b-85f6-0218e7f51cb5",
      "name": "表单数据端点",
      "type": "n8n-nodes-base.webhook",
      "position": [
        -944,
        -48
      ],
      "webhookId": "db534064-7845-44c2-abdd-3f2189772a27",
      "parameters": {
        "path": "db534064-7845-44c2-abdd-3f2189772a27",
        "options": {
          "responseData": "<h1>Hello World</h1>"
        },
        "httpMethod": "POST"
      },
      "typeVersion": 2.1
    },
    {
      "id": "ed2c79aa-eb59-4bee-ad06-e97bbda13992",
      "name": "落地页HTML",
      "type": "n8n-nodes-base.html",
      "position": [
        -416,
        -448
      ],
      "parameters": {
        "html": "<!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>Request a Quote</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n<body class=\"bg-gray-50 min-h-screen flex flex-col items-center justify-center p-6\">\n\n  <div class=\"w-full max-w-md bg-white shadow-xl rounded-2xl p-8\">\n    <h1 class=\"text-2xl font-semibold text-gray-800 mb-4 text-center\">\n      Request a Quote\n    </h1>\n    <p class=\"text-gray-500 text-center mb-6\">\n      Fill in your personal details to receive your insurance quote.\n    </p>\n\n    <!-- Success Message -->\n    <div id=\"success-message\" class=\"hidden bg-green-50 border border-green-200 text-green-700 p-4 rounded-xl text-center mb-4\">\n      ✅ Your request has been successfully submitted!\n    </div>\n\n    <!-- Error Message -->\n    <div id=\"error-message\" class=\"hidden bg-red-50 border border-red-200 text-red-700 p-4 rounded-xl text-center mb-4\">\n      ❌ Something went wrong. Please try again.\n    </div>\n\n    <!-- Form -->\n    <form id=\"quote-form\" class=\"space-y-4\">\n      <div>\n        <label class=\"block text-gray-700 font-medium mb-1\">First Name</label>\n        <input\n          type=\"text\"\n          name=\"firstName\"\n          required\n          class=\"w-full border border-gray-300 rounded-xl px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-gray-700 font-medium mb-1\">Last Name</label>\n        <input\n          type=\"text\"\n          name=\"lastName\"\n          required\n          class=\"w-full border border-gray-300 rounded-xl px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-gray-700 font-medium mb-1\">Address</label>\n        <input\n          type=\"text\"\n          name=\"address\"\n          required\n          class=\"w-full border border-gray-300 rounded-xl px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-gray-700 font-medium mb-1\">House No.</label>\n        <input\n          type=\"text\"\n          name=\"houseNo\"\n          required\n          class=\"w-full border border-gray-300 rounded-xl px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-gray-700 font-medium mb-1\">Postal Code</label>\n        <input\n          type=\"text\"\n          name=\"postalCode\"\n          required\n          class=\"w-full border border-gray-300 rounded-xl px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-gray-700 font-medium mb-1\">City</label>\n        <input\n          type=\"text\"\n          name=\"city\"\n          required\n          class=\"w-full border border-gray-300 rounded-xl px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-gray-700 font-medium mb-1\">Country</label>\n        <input\n          type=\"text\"\n          name=\"country\"\n          required\n          class=\"w-full border border-gray-300 rounded-xl px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none\"\n        />\n      </div>\n\n      <button\n        type=\"submit\"\n        id=\"submit-btn\"\n        class=\"w-full bg-blue-600 text-white py-3 rounded-xl hover:bg-blue-700 transition-all\"\n      >\n        Submit Request\n      </button>\n    </form>\n  </div>\n\n  <footer class=\"mt-6 text-gray-400 text-sm\">\n    © <span id=\"year\"></span> SecureQuote Insurance Co.\n  </footer>\n\n  <script>\n    document.getElementById('year').textContent = new Date().getFullYear();\n\n    const form = document.getElementById('quote-form');\n    const successMsg = document.getElementById('success-message');\n    const errorMsg = document.getElementById('error-message');\n    const submitBtn = document.getElementById('submit-btn');\n\n    form.addEventListener('submit', async function (e) {\n      e.preventDefault();\n      successMsg.classList.add('hidden');\n      errorMsg.classList.add('hidden');\n      submitBtn.disabled = true;\n      submitBtn.textContent = \"Submitting...\";\n\n      const formData = {\n        firstName: form.firstName.value,\n        lastName: form.lastName.value,\n        address: form.address.value,\n        houseNo: form.houseNo.value,\n        postalCode: form.postalCode.value,\n        city: form.city.value,\n        country: form.country.value,\n      };\n\n      try {\n        const response = await fetch(\"{{ $json.FormEndpoint }}\", {\n          method: \"POST\",\n          headers: { \"Content-Type\": \"application/json\" },\n          body: JSON.stringify(formData),\n        });\n\n        if (response.ok) {\n          form.reset();\n          successMsg.classList.remove('hidden');\n        } else {\n          throw new Error(\"Response not OK\");\n        }\n      } catch (err) {\n        console.error(\"Form submit error:\", err);\n        errorMsg.classList.remove('hidden');\n      }\n\n      submitBtn.disabled = false;\n      submitBtn.textContent = \"Submit Request\";\n    });\n  </script>\n</body>\n</html>\n"
      },
      "typeVersion": 1.2
    },
    {
      "id": "2e846775-2f6d-416a-bb3d-28ee09b70622",
      "name": "落地页端点",
      "type": "n8n-nodes-base.webhook",
      "position": [
        -928,
        -448
      ],
      "webhookId": "db534064-7845-44c2-abdd-3f2189772a27",
      "parameters": {
        "path": "db534064-7845-44c2-abdd-3f2189772a27",
        "options": {},
        "responseMode": "responseNode"
      },
      "typeVersion": 2.1
    },
    {
      "id": "af372421-70db-4286-9d04-12f144bf4da1",
      "name": "响应 Webhook",
      "type": "n8n-nodes-base.respondToWebhook",
      "position": [
        -96,
        -448
      ],
      "parameters": {
        "options": {},
        "respondWith": "text",
        "responseBody": "={{ $json.html }}"
      },
      "typeVersion": 1.4
    },
    {
      "id": "92e309c6-0ad8-4c47-a3ad-126eb2f13ba7",
      "name": "便签1",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -992,
        -560
      ],
      "parameters": {
        "width": 1088,
        "height": 320,
        "content": "## 落地页服务器"
      },
      "typeVersion": 1
    },
    {
      "id": "a415ac7c-230d-4839-8ccf-38ecfb4cfffd",
      "name": "设置表单端点",
      "type": "n8n-nodes-base.set",
      "position": [
        -672,
        -448
      ],
      "parameters": {
        "options": {},
        "assignments": {
          "assignments": [
            {
              "id": "509804fc-dbfa-472d-87d3-1f683e146856",
              "name": "FormEndpoint",
              "type": "string",
              "value": "={{ $json.webhookUrl }}"
            }
          ]
        }
      },
      "typeVersion": 3.4
    },
    {
      "id": "39063a8c-2114-432e-89da-7847747257bb",
      "name": "便签 2",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -992,
        -144
      ],
      "parameters": {
        "width": 1088,
        "height": 320,
        "content": "## 表单数据端点"
      },
      "typeVersion": 1
    }
  ],
  "active": true,
  "pinData": {},
  "settings": {
    "executionOrder": "v1"
  },
  "versionId": "3817dfcd-3a8b-4c27-89cb-a801860141d1",
  "connections": {
    "HTTP Request": {
      "main": [
        [
          {
            "node": "PDF Form Fill (Fill PDF Fields)",
            "type": "main",
            "index": 0
          },
          {
            "node": "Get PDF Form Fields",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "FormData Endpoint": {
      "main": [
        [
          {
            "node": "HTTP Request",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Set Form Endpoint": {
      "main": [
        [
          {
            "node": "HTML for Landingpage",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "HTML for Landingpage": {
      "main": [
        [
          {
            "node": "Respond to Webhook",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Landingpage Endpoint": {
      "main": [
        [
          {
            "node": "Set Form Endpoint",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "PDF Form Fill (Fill PDF Fields)": {
      "main": [
        [
          {
            "node": "Send email",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}
常见问题

如何使用这个工作流?

复制上方的 JSON 配置代码,在您的 n8n 实例中创建新工作流并选择「从 JSON 导入」,粘贴配置后根据需要修改凭证设置即可。

这个工作流适合什么场景?

中级

需要付费吗?

本工作流完全免费,您可以直接导入使用。但请注意,工作流中使用的第三方服务(如 OpenAI API)可能需要您自行付费。

工作流信息
难度等级
中级
节点数量12
分类-
节点类型9
难度说明

适合有一定经验的用户,包含 6-15 个节点的中等复杂度工作流

外部链接
在 n8n.io 查看

分享此工作流