n8n Form trigger를 사용하면 사용자가 폼을 제출할 때 워크플로를 시작하고, 폼에서 입력 데이터를 가져올 수 있습니다. 이 노드는 사용할 폼 웹 페이지를 자동으로 생성합니다.

n8n Form 노드를 사용하면 폼을 이어가는 페이지를 추가로 만들 수 있습니다.

워크플로 구축 및 테스트#

워크플로를 빌드하거나 테스트하는 동안에는 Test URL을 사용하세요. 테스트 URL을 사용하면 에디터 UI에서 들어오는 데이터를 확인할 수 있어 디버깅에 유용합니다.

테스트하는 방법은 두 가지입니다.

• Execute Step을 선택합니다. n8n이 폼을 엽니다. 폼을 제출하면 n8n이 해당 노드를 실행하지만 워크플로의 나머지 부분은 실행하지 않습니다.
• Execute Workflow를 선택합니다. n8n이 폼을 엽니다. 폼을 제출하면 n8n이 워크플로를 실행합니다.

프로덕션 워크플로#

워크플로가 준비되면 Production URL을 사용하도록 전환하세요. 그런 다음 워크플로를 게시하면, 사용자가 폼을 제출할 때 n8n이 자동으로 워크플로를 실행합니다.

프로덕션 URL로 작업할 때는 워크플로를 저장하고 게시했는지 확인하세요. 프로덕션 URL을 사용할 때는 Form trigger를 통해 흐르는 데이터가 에디터 UI에 표시되지 않습니다.

쿼리 매개변수로 기본 선택값 설정#

n8n Form Trigger가 제공하는 초기 URL에 쿼리 매개변수를 사용하여 필드의 초기 값을 설정할 수 있습니다. 폼의 모든 페이지는 n8n Form Trigger URL로 전송된 것과 동일한 쿼리 매개변수를 받습니다.

쿼리 매개변수를 사용할 때는 특수 문자를 사용하는 필드 이름이나 값을 퍼센트 인코딩하세요. 이렇게 하면 n8n이 지정한 필드에 대해 초기 값을 사용하도록 보장합니다. URL Encode/Decode와 같은 도구를 사용하여 쿼리 매개변수를 퍼센트 인코딩 형식으로 만들 수 있습니다.

예를 들어, 다음과 같은 속성을 가진 폼이 있다고 가정해봅시다.

• Production URL: https://my-account.n8n.cloud/form/my-form
• 필드:
  • name: Jane Doe
  • email: jane.doe@example.com

쿼리 매개변수와 퍼센트 인코딩을 사용하면, 다음 URL을 사용해 위 데이터로 필드의 초기 값을 설정할 수 있습니다.

https://my-account.n8n.cloud/form/my-form?email=jane.doe%40example.com&name=Jane%20Doe

여기서 퍼센트 인코딩은 골뱅이 기호(@)를 문자열 %40으로, 공백 문자( )를 문자열 %20으로 대체합니다. 이렇게 하면 폼의 어느 페이지에 나타나든 상관없이 해당 필드의 초기 값이 설정됩니다.

노드 매개변수#

다음은 주요 노드 구성 필드입니다.

인증#

• Basic Auth
• None

기본 인증 사용#

이 자격 증명을 구성하려면 다음이 필요합니다.

• HTTP Request가 대상으로 하는 앱 또는 서비스에 액세스하는 데 사용하는 Username.
• 해당 사용자 이름에 대응하는 Password.

폼 URL#

Form Trigger 노드에는 Test URL과 Production URL 두 가지 URL이 있습니다. n8n은 노드 패널 상단에 URL을 표시합니다. Test URL 또는 Production URL을 선택하여 n8n이 표시하는 URL을 전환하세요.

• Test URL: 워크플로가 활성화되어 있지 않은 상태에서 Execute Step 또는 Execute Workflow를 선택하면 n8n이 테스트 웹훅을 등록합니다. 해당 URL을 호출하면 n8n이 워크플로에 데이터를 표시합니다.
• Production URL: 워크플로를 게시하면 n8n이 프로덕션 웹훅을 등록합니다. 프로덕션 URL을 사용할 때는 n8n이 워크플로에 데이터를 표시하지 않습니다. 다만 프로덕션 실행에 대한 워크플로 데이터는 계속 확인할 수 있습니다. 워크플로에서 Executions 탭을 선택한 다음, 확인하려는 워크플로 실행을 선택하세요.

폼 경로#

폼에 대한 사용자 지정 슬러그를 설정합니다.

Form Title#

폼의 제목을 입력하세요. n8n은 Form Title을 웹페이지 제목과 폼의 메인 h1 제목으로 표시합니다.

Form Description#

폼에 대한 설명을 입력하세요. n8n은 Form Description을 폼의 메인 h1 제목 아래에 부제목으로 표시합니다. 줄바꿈을 추가하려면 \n 또는 <br>을 사용하세요.

허용되는 HTML 태그와 제한되는 HTML 태그에 대한 자세한 내용은 HTML security and allowed tags를 참고하세요.

폼 요소#

폼에 대한 질문 필드를 만드세요. Add Form Element를 선택하여 새 필드를 추가합니다.

모든 필드에는 다음 설정이 있습니다.

• Field Label: 렌더링된 폼에서 입력 필드 위에 표시되는 레이블을 입력합니다.
• Field Name: 이 이름은 Form Trigger 노드의 출력에서 사용됩니다. 다운스트림 노드에서 폼 필드를 참조할 때 사용하세요.
• Element Type: Checkboxes, Custom HTML, Date, Dropdown, Email, File, Hidden Field, Number, Password, Radio Buttons, Text, Textarea 중에서 선택합니다.
  • Checkboxes를 선택하면 폼에 체크박스 요소를 포함할 수 있습니다. 기본적으로 폼 사용자가 선택할 수 있는 체크박스 개수에는 제한이 없습니다. Limit Selection 옵션에 Exact Number, Range, Unlimited 중 하나로 값을 지정하여 제한을 설정할 수 있습니다.
  • Custom HTML을 선택하면 임의의 HTML을 삽입할 수 있습니다.
    • 링크, 이미지, 동영상 등의 요소를 포함할 수 있습니다. <script>, <style>, <input> 요소는 포함할 수 없습니다. 자세한 내용은 HTML security and allowed tags를 참고하세요.
    • 기본적으로 Custom HTML 필드는 노드 출력에 포함되지 않습니다. Custom HTML 콘텐츠를 출력에 포함하려면 관련 Element Name 필드를 입력하세요.
  • Date를 선택하면 폼에 날짜 선택기를 포함할 수 있습니다. 날짜 형식 지정에 대한 자세한 내용은 Date and time with Luxon을 참고하세요.
  • Dropdown List > Add Field Option을 선택하여 여러 옵션을 추가하세요. 기본적으로 드롭다운은 단일 선택입니다. 다중 선택으로 만들려면 Multiple Choice를 켜세요.
  • Radio Buttons를 선택하면 폼에 라디오 버튼 요소를 포함할 수 있습니다.
  • Hidden Field를 선택하면 폼에 표시하지 않고 폼 요소를 포함할 수 있습니다. Field Value 매개변수를 사용하여 기본값을 설정하거나, 쿼리 매개변수를 사용하여 해당 필드에 값을 전달할 수 있습니다.
• Placeholder: 호환되는 폼 요소 안에 표시할 예시 텍스트를 정의합니다. Placeholder는 Email, Number, Password, Text, Textarea에서 지원됩니다.
• Default value: 호환되는 폼 요소에 미리 채워지거나 미리 선택될 기본값을 정의합니다. 기본값은 Custom HTML, File, Hidden Field, Password를 제외한 모든 폼 요소에서 지원됩니다.
• Required Field: 켜면 사용자가 폼에서 이 필드를 반드시 작성해야 합니다.

Respond When#

n8n이 폼 제출에 대한 응답을 언제 보낼지 선택하세요. 다음과 같은 시점에 응답할 수 있습니다.

• Form Is Submitted: 사용자가 폼을 제출하는 즉시 응답을 보냅니다.
• Workflow Finishes: 사용자에게 응답을 보내기 전에 워크플로 실행이 완료되기를 원하는 경우 사용하세요. 워크플로에 오류가 발생하면, 폼 제출 중 문제가 있었다는 응답을 사용자에게 보냅니다.

노드 옵션#

Add Option을 선택하여 더 많은 구성 옵션을 확인하세요.

• Append n8n Attribution: 끄면 폼 하단의 Form automated with n8n 속성 문구가 숨겨집니다.
• Button Label: 폼의 제출 버튼에 사용할 레이블입니다. n8n은 Button Label을 제출 버튼의 이름으로 표시합니다.
• Form Path: 테스트와 프로덕션 모두에 대한 폼 URL의 마지막 세그먼트입니다. 자동으로 생성되는 UUID를 마지막 구성 요소로 대체합니다.
• Ignore Bots: 켜면 링크 미리보기 도구나 웹 크롤러 같은 봇의 요청을 무시합니다.
• Use Workflow Timezone: 켜면 UTC(기본값) 대신 Workflow settings에 설정된 시간대를 사용합니다. 이는 노드 출력에서 submittedAt 타임스탬프 값에 영향을 미칩니다.
• Custom Form Styling: CSS로 공개 폼 인터페이스의 기본 스타일을 재정의합니다. 이 필드는 기본 스타일로 미리 채워져 있어, 필요한 부분만 변경하면 됩니다.

Form Trigger 노드 동작 사용자 지정#

줄 바꿈으로 응답 텍스트 서식 지정#

폼 응답 텍스트에 줄바꿈을 추가하려면 다음 방법 중 하나를 사용할 수 있습니다.

• formSubmittedText 필드에서 일반 텍스트 대신 HTML 포맷을 사용 • 응답을 보내기 전에 개행 문자(\n)를 HTML 줄바꿈 태그(<br>)로 대체 • 더 세밀한 포맷 제어가 필요하다면 사용자 지정 HTML 응답 페이지 사용 고려

인증으로 폼 접근 제한#

폼에 인증을 추가하려면 다음 옵션 중 하나를 사용할 수 있습니다.

• 토큰 기반 인증을 위해 OTP(One-Time Password) 필드를 TOTP 노드 검증과 함께 사용 • 보조 폼 페이지로 폼 인증이 포함된 Wait 노드 추가 • 해시된 비밀번호를 데이터베이스에 저장하고 폼 제출 값과 비교하여 검증 • 고급 인증이 필요하다면 Google Forms 같은 외부 인증 제공업체 사용

HTML 보안 및 허용 태그#

n8n Form Trigger는 보안 취약점을 방지하기 위해 Form Description 필드와 Custom HTML 폼 요소 안의 HTML 콘텐츠를 자동으로 정제(sanitize)합니다. 포맷을 위한 HTML은 지원되지만, 특정 태그와 속성은 제한됩니다.

허용 HTML 태그#

다음 태그를 포맷에 사용할 수 있습니다: <a>, <b>, <br>, <code>, <div>, <em>, <h1>부터 <h6>까지, <i>, <iframe>, <img>, <li>, <ol>, <p>, <pre>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>, <u>, <ul>, <video>, <source>.

제한 태그#

다음 태그는 보안을 위해 자동으로 제거됩니다: <script>, <style>, <input>, <form>, <button>, 그리고 XSS 공격을 유발하거나 폼 기능을 방해할 수 있는 그 밖의 잠재적으로 위험한 요소들.

속성 제한#

특정 태그에는 지정된 속성만 허용됩니다.

• 링크(<a>): href, target, rel
• 이미지(<img>): src, alt, width, height
• 동영상(<video>): controls, autoplay, loop, muted, poster, width, height
• iframe(<iframe>): src, width, height, frameborder, allow, allowfullscreen, referrerpolicy (자동으로 샌드박스 처리됨)
• 테이블 셀(<td>, <th>): colspan, rowspan, scope, headers

그 밖의 모든 속성은 정제 과정에서 제거됩니다. http://와 https:// URL 스킴만 허용됩니다.

템플릿 및 예제#

n8n Form Trigger 노드 문서 통합 템플릿 둘러보기 또는 모든 템플릿 검색