n8n Form trigger를 사용하면 사용자가 폼을 제출할 때 폼의 입력 데이터를 받아 워크플로우를 시작할 수 있습니다. 노드가 사용할 폼 웹 페이지를 자동으로 생성합니다.

n8n Form 노드를 사용하면 폼에 더 많은 페이지를 추가하여 계속 이어갈 수 있습니다.

워크플로우 빌드 및 테스트#

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

두 가지 테스트 방법이 있습니다.

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

프로덕션 워크플로우#

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

Production URL을 사용할 때는 워크플로우를 저장하고 게시했는지 확인하세요. Production 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으로 대체합니다. 이렇게 하면 폼의 어떤 페이지에 있든 상관없이 해당 필드의 초기값이 설정됩니다.

노드 파라미터#

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

Authentication#

• Basic Auth
• None

Basic auth 사용#

이 credential을 구성하려면 다음이 필요합니다.

• HTTP Request가 대상으로 하는 앱 또는 서비스에 접근하는 데 사용하는 Username.
• 해당 사용자명에 대응하는 Password.

Form URLs#

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

• Test URL: 워크플로우가 활성화되지 않은 상태에서 Execute Step 또는 Execute Workflow를 선택하면 n8n이 테스트 webhook을 등록합니다. URL을 호출하면 n8n이 워크플로우에 데이터를 표시합니다.
• Production URL: 워크플로우를 게시하면 n8n이 프로덕션 webhook을 등록합니다. Production URL을 사용할 때 n8n은 워크플로우에 데이터를 표시하지 않습니다. 프로덕션 실행의 워크플로우 데이터는 여전히 확인할 수 있습니다. 워크플로우에서 Executions 탭을 선택한 다음, 보고 싶은 워크플로우 실행을 선택하면 됩니다.

Form Path#

폼의 커스텀 슬러그를 설정합니다.

Form Title#

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

Form Description#

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

허용 및 제한된 HTML 태그에 대한 자세한 내용은 HTML 보안 및 허용 태그를 참조하세요.

Form Elements#

폼의 질문 필드를 만듭니다. 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 보안 및 허용 태그를 참조하세요.
    • 기본적으로 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(기본값) 대신 워크플로우 설정의 시간대를 사용합니다. 이는 노드 출력의 submittedAt 타임스탬프 값에 영향을 미칩니다.
• Custom Form Styling: CSS로 공개 폼 인터페이스의 기본 스타일을 재정의합니다. 필드에는 기본 스타일링이 미리 채워져 있으므로 필요한 부분만 변경할 수 있습니다.

Form Trigger 노드 동작 커스터마이즈#

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

폼 응답 텍스트에 줄 바꿈을 추가하려면 다음 방법 중 하나를 사용하세요.

• formSubmittedText 필드에 일반 텍스트 대신 HTML 형식 사용 • 응답을 보내기 전에 줄 바꿈 문자(\n)를 HTML 줄 바꿈 태그(<br>)로 교체 • 더 많은 형식 제어가 필요한 경우 커스텀 HTML 응답 페이지 사용 고려

인증으로 폼 접근 제한#

폼에 인증을 추가하려면 다음 옵션 중 하나를 사용하세요.

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

HTML 보안 및 허용 태그#

n8n Form Trigger는 보안 취약점 방지를 위해 Form Description 필드와 Custom HTML 폼 요소의 HTML 콘텐츠를 자동으로 정리합니다. 형식 지정을 위한 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 워크플로 템플릿 갤러리에서 확인할 수 있습니다.