랜딩 페이지 -> PDF 양식 작성 -> 이메일
중급
이것은자동화 워크플로우로, 12개의 노드를 포함합니다.주로 Set, Html, Webhook, EmailSend, HttpRequest 등의 노드를 사용하며. 웹 양식 및 이메일 발송을 사용한 자동화된 PDF 양식 처리
사전 요구사항
- •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 Endpoint",
"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": "랜딩 페이지 Endpoint",
"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": "양식 Endpoint 설정",
"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)는 사용자 직접 비용을 지불해야 할 수 있습니다.
관련 워크플로우 추천
lander 페이지 -> NDA Word 문서(Docx) -> 이메일
웹 폼에서 제출한 내용을 기반으로 맞춤형 NDA 문서를 생성하고 이메일로 발송합니다.
Set
Html
Webhook
+
Set
Html
Webhook
10 노드CustomJS
Bright Data, OpenAI 및 Redis 기반 고급 다중 소스 AI 연구
사용Bright Data、OpenAI및Redis进行高级多源AI研究
If
Set
Code
+
If
Set
Code
43 노드Daniel Shashko
시장 조사
전사 평가기
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
지원 챗봇
