ランディングページ -> PDFフォーム記入 -> メール
中級
これは自動化ワークフローで、12個のノードを含みます。主にSet, Html, Webhook, EmailSend, HttpRequestなどのノードを使用。 PDFフォームの自動処理、Webフォームおよびメール送信を使用
前提条件
- •HTTP Webhookエンドポイント（n8nが自動生成）
- •ターゲットAPIの認証情報が必要な場合あり
カテゴリー
-
ワークフロープレビュー
ノード接続関係を可視化、ズームとパンをサポート
ワークフローをエクスポート
以下のJSON設定をn8nにインポートして、このワークフローを使用できます
{
"id": "Ov0kAaToP65xgc5h",
"meta": {
"instanceId": "b503899dfd9ae32bbf8e1f446a1f2c9b3c59f80c79b274c49b1606b7ae9579e1",
"templateCredsSetupCompleted": true
},
"name": "Landingpage -> PDF Form Fillout -> Email",
"tags": [],
"nodes": [
{
"id": "0ddb247e-85b8-4cf6-afd7-03853a8053c4",
"name": "HTTP Request",
"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フォーム入力 (Fill PDF Fields)",
"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": "## Form Field Names (Optional)\nYou can use this module to read the names of the form fields."
},
"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": "FormDataエンドポイント",
"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": "Respond to 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": "## Landingpage Server\nYou can access the landing page at the webhook address."
},
"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": "## FormData Endpoint\nThe data for the form is received here from the landing page."
},
"typeVersion": 1
}
],
"active": true,
"pinData": {},
"settings": {
"executionOrder": "v1"
},
"versionId": "3817dfcd-3a8b-4c27-89cb-a801860141d1",
"connections": {
"0ddb247e-85b8-4cf6-afd7-03853a8053c4": {
"main": [
[
{
"node": "2f4803e6-999e-4c7f-b782-3ea8ab5042cf",
"type": "main",
"index": 0
},
{
"node": "eb6759e3-b65f-4d1a-9893-c1e3ad1386c3",
"type": "main",
"index": 0
}
]
]
},
"dc31be04-a1f7-479b-85f6-0218e7f51cb5": {
"main": [
[
{
"node": "0ddb247e-85b8-4cf6-afd7-03853a8053c4",
"type": "main",
"index": 0
}
]
]
},
"a415ac7c-230d-4839-8ccf-38ecfb4cfffd": {
"main": [
[
{
"node": "ed2c79aa-eb59-4bee-ad06-e97bbda13992",
"type": "main",
"index": 0
}
]
]
},
"ed2c79aa-eb59-4bee-ad06-e97bbda13992": {
"main": [
[
{
"node": "af372421-70db-4286-9d04-12f144bf4da1",
"type": "main",
"index": 0
}
]
]
},
"2e846775-2f6d-416a-bb3d-28ee09b70622": {
"main": [
[
{
"node": "a415ac7c-230d-4839-8ccf-38ecfb4cfffd",
"type": "main",
"index": 0
}
]
]
},
"2f4803e6-999e-4c7f-b782-3ea8ab5042cf": {
"main": [
[
{
"node": "a6cc6187-da30-4a93-a10e-81748e625d8f",
"type": "main",
"index": 0
}
]
]
}
}
}よくある質問
このワークフローの使い方は？
上記のJSON設定コードをコピーし、n8nインスタンスで新しいワークフローを作成して「JSONからインポート」を選択、設定を貼り付けて認証情報を必要に応じて変更してください。
このワークフローはどんな場面に適していますか？
中級
有料ですか？
このワークフローは完全無料です。ただし、ワークフローで使用するサードパーティサービス（OpenAI APIなど）は別途料金が発生する場合があります。
関連ワークフロー
ランディングページ -> NDA Word文書(Docx) -> メール
ウェブフォームの入力に基づいてカスタムNDA文書を生成し、Gmailでメール送信する
Set
Html
Webhook
+
Set
Html
Webhook
10 ノードCustomJS
Bright Data、OpenAI、Redisを基盤とした高度なマルチソースAIリサーチ
高度なマルチソースAIリサーチの実装（Bright Data、OpenAI、Redis使用）
If
Set
Code
+
If
Set
Code
43 ノードDaniel Shashko
市場調査
以下は、入力された中国語テキストを日本語に正確に翻訳し、元の専門用語は変更せず、1 行に 1 つの翻訳を加えた結果です。
DeepGramとGPT-4oによる音声対話分析・可視化
Set
Code
Html
+
Set
Code
Html
54 ノードRealSimple Solutions
人工知能
OIDC クライアント ワークフロー
OpenID Connect を使ってワークフロー内でユーザー認証を検証
If
Set
Code
+
If
Set
Code
15 ノードplease-open.it
ビルディングブロック
複数プラットフォームからホテル料金をクロールしメールレポートで自動比較
ホテル価格比較を複数プラットフォームでのスクレイピングとメールレポートで自動化
If
Set
Code
+
If
Set
Code
19 ノードOneclick AI Squad
市場調査
Notionから自動で顧客育成メールと評価収集を実行
Telegramを使ってGoogleカレンダーとNotion CRMによる会議スケジュールの自動化
If
Set
Code
+
If
Set
Code
19 ノードShelly-Ann Davy
サポートチャットボット
