การใช้งาน n8n Form

เรียนรู้วิธีใช้ trigger node แบบฟอร์ม n8n ใน n8n ปฏิบัติตามเอกสารทางเทคนิคเพื่อรวม node n8n Form Trigger เข้ากับ workflow ของคุณ

ใช้ trigger แบบฟอร์ม n8n เพื่อเริ่ม workflow เมื่อผู้ใช้ส่งแบบฟอร์ม โดยรับข้อมูลที่ป้อนจากแบบฟอร์ม node จะสร้างเว็บเพจแบบฟอร์มเพื่อให้คุณใช้

คุณสามารถเพิ่มหน้าเพื่อดำเนินการต่อแบบฟอร์มด้วย n8n Form node

สร้างและทดสอบ workflow

ในขณะที่สร้างหรือทดสอบ workflow ให้ใช้ Test URL . การใช้ URL ทดสอบช่วยให้แน่ใจว่าคุณสามารถดูข้อมูลขาเข้าได้ใน UI ของตัวแก้ไข ซึ่งมีประโยชน์สำหรับการแก้ไขจุดบกพร่อง

มีสองวิธีในการทดสอบ:

• เลือก Execute Step . n8n จะเปิดแบบฟอร์ม เมื่อคุณส่งแบบฟอร์ม n8n จะเรียกใช้ node แต่ไม่ใช่ส่วนที่เหลือของ workflow
• เลือก Execute Workflow . n8n จะเปิดแบบฟอร์ม เมื่อคุณส่งแบบฟอร์ม n8n จะเรียกใช้ workflow

ขั้นตอนการผลิต

เมื่อขั้นตอนการทำงานของคุณพร้อม ให้เปลี่ยนไปใช้ Production URL . จากนั้นคุณสามารถเผยแพร่ workflow ของคุณและ n8n จะรันโดยอัตโนมัติเมื่อผู้ใช้ส่งแบบฟอร์ม

เมื่อทำงานกับ URL ที่ใช้งานจริง ตรวจสอบให้แน่ใจว่าคุณได้บันทึกและเผยแพร่ workflow แล้ว ข้อมูลที่ไหลผ่าน trigger แบบฟอร์มจะไม่ปรากฏใน UI ของตัวแก้ไขพร้อมกับ URL ที่ใช้งานจริง

ตั้งค่าการเลือกเริ่มต้นด้วย parameter การค้นหา

คุณสามารถตั้งค่าเริ่มต้นสำหรับฟิลด์ได้โดยใช้ parameter แบบสอบถาม ด้วย URL เริ่มต้นที่ระบุโดย trigger แบบฟอร์ม n8n ทุกๆ n8n Form ได้รับ parameter การสืบค้นเดียวกันกับที่ส่งไปยัง URL trigger แบบฟอร์ม n8n

เพื่อการผลิตเท่านั้น (Only for production)

parameter แบบสอบถามจะพร้อมใช้งานเมื่อใช้แบบฟอร์มในโหมดการใช้งานจริงเท่านั้น n8n จะไม่เติมค่าฟิลด์จาก parameter การสืบค้นในโหมดการทดสอบ

เมื่อใช้ parameter การสืบค้น เปอร์เซ็นต์การเข้ารหัส ชื่อเขตข้อมูลหรือค่าใดๆ ที่ใช้อักขระพิเศษ เพื่อให้แน่ใจว่า n8n ใช้ค่าเริ่มต้นสำหรับฟิลด์ที่กำหนด คุณสามารถใช้เครื่องมือเช่น เข้ารหัส / ถอดรหัส URL เพื่อจัดรูปแบบ parameter การค้นหาของคุณโดยใช้การเข้ารหัสเปอร์เซ็นต์

ตามตัวอย่าง สมมติว่าคุณมีแบบฟอร์มที่มีคุณสมบัติดังต่อไปนี้:

• URL การผลิต: https://my-account.n8n.cloud/form/my-form
• สาขา:
  • name: Jane Doe
  • email: jane.doe@example.com

ด้วย parameter การค้นหาและการเข้ารหัสเปอร์เซ็นต์ คุณสามารถใช้ URL ต่อไปนี้เพื่อตั้งค่าฟิลด์เริ่มต้นให้กับข้อมูลด้านบน:

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

ในที่นี้ การเข้ารหัสเปอร์เซ็นต์จะแทนที่สัญลักษณ์ at ( @ ) ด้วย string %40 และอักขระเว้นวรรค ( ) พร้อม string %20 . การดำเนินการนี้จะตั้งค่าเริ่มต้นสำหรับฟิลด์เหล่านี้ไม่ว่าจะปรากฏบนหน้าใดของแบบฟอร์มก็ตาม

parameter node

เหล่านี้คือฟิลด์การกำหนดค่า node หลัก:

Authentication

• Basic Auth
• การรับรองความถูกต้องผู้ใช้ n8n (n8n User Auth)
• None

การใช้การรับรองความถูกต้องขั้นพื้นฐาน (Using basic auth)

ในการกำหนดค่า credentials นี้ คุณจะต้อง:

• ที่ Username คุณใช้เพื่อเข้าถึงแอปหรือบริการที่คำขอ HTTP ของคุณกำหนดเป้าหมายอยู่
• ที่ Password ที่ไปกับชื่อผู้ใช้นั้น

การใช้การตรวจสอบสิทธิ์ผู้ใช้ n8n (Using n8n User Auth)

เฉพาะผู้ใช้ที่เข้าสู่ระบบอินสแตนซ์ n8n นี้เท่านั้นที่สามารถดูหรือส่งแบบฟอร์มได้

• ผู้เยี่ยมชมที่ไม่ได้รับการรับรองความถูกต้องที่กำลังโหลดแบบฟอร์มจะถูกเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ n8n
• การส่งแบบฟอร์มที่ไม่ได้รับอนุญาตจะได้รับการตอบกลับ 401
• ตามค่าเริ่มต้น n8n จะเพิ่ม ID อีเมล ชื่อ และนามสกุลของผู้ใช้ที่ส่งไปยังข้อมูล output ปิดเครื่อง Include User in Output ใน ตัวเลือก node เพื่อยกเว้นสิ่งนี้

เมื่อคุณเลือก การรับรองความถูกต้องผู้ใช้ n8n (n8n User Auth), a Require Workflow Execute Permission สลับปรากฏขึ้น เปิดใช้งานเพื่อกำหนดให้ผู้ใช้ที่ trigger มีสิทธิ์ดำเนินการ workflow ในโปรเจ็กต์ที่เป็นเจ้าของด้วย ผู้ใช้ที่เข้าสู่ระบบแต่ไม่มีสิทธิ์ดำเนินการใน workflow ไม่สามารถส่งแบบฟอร์มได้ สิ่งนี้มีประโยชน์ด้วย credentials ผู้ใช้ปลายทาง โดยที่ผู้ใช้แต่ละคนเรียกใช้ workflow ด้วยบัญชีที่เชื่อมต่อของตนเอง

Form URLs

node Form Trigger มีสอง URL: Test URL และ Production URL . n8n แสดง URL ที่ด้านบนของแผง node เลือก Test URL หรือ Production URL เพื่อสลับ URL n8n ที่แสดง

• Test URL : n8n ลงทะเบียน webhook ทดสอบเมื่อคุณเลือก Execute Step หรือ Execute Workflow หาก workflow ไม่ได้ใช้งานอยู่ เมื่อคุณเรียก URL นั้น n8n จะแสดงข้อมูลใน workflow
• Production URL : n8n ลงทะเบียน webhook ที่ใช้งานจริงเมื่อคุณเผยแพร่ workflow เมื่อใช้ URL ที่ใช้งานจริง n8n จะไม่แสดงข้อมูลใน workflow คุณยังคงสามารถดูข้อมูล workflow สำหรับการดำเนินการผลิตได้ เลือก Executions ใน workflow จากนั้นเลือกการดำเนินการ workflow ที่คุณต้องการดู

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 : ชื่อนี้ใช้ใน output ของ node Form Trigger ใช้เพื่ออ้างอิงฟิลด์ฟอร์มใน node ดาวน์สตรีม
• 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 และแท็กที่อนุญาต .
    • ตามค่าเริ่มต้น ฟิลด์ HTML แบบกำหนดเองจะไม่รวมอยู่ใน output ของ node หากต้องการรวมเนื้อหา HTML แบบกำหนดเองไว้ใน output ให้กรอกข้อมูลที่เกี่ยวข้อง Element Name สนาม
  • เลือก Date เพื่อรวมตัวเลือกวันที่ในแบบฟอร์ม อ้างถึง วันและเวลากับ Luxon สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบวันที่
  • เลือก Dropdown List > Add Field Option เพื่อเพิ่มหลายตัวเลือก ตามค่าเริ่มต้น เมนูแบบเลื่อนลงจะเป็นเพียงตัวเลือกเดียว หากต้องการทำให้เป็นแบบหลายตัวเลือก ให้เปิด Multiple Choice.
  • เลือก Radio Buttons เพื่อรวมองค์ประกอบปุ่มตัวเลือกไว้ในแบบฟอร์ม
  • เลือก Hidden Field เพื่อรวมองค์ประกอบของแบบฟอร์มโดยไม่แสดงบนแบบฟอร์ม คุณสามารถตั้งค่าเริ่มต้นโดยใช้ Field Value parameter หรือค่าผ่านสำหรับฟิลด์ที่ใช้ parameter แบบสอบถาม .
• Placeholder : กำหนดข้อความตัวอย่างที่จะแสดงภายในองค์ประกอบของแบบฟอร์มที่เข้ากันได้ ตัวยึดตำแหน่งได้รับการสนับสนุนใน Email, Number, Password, Text และ Textarea.
• ค่าเริ่มต้น (Default value) : กำหนดค่าเริ่มต้นที่จะเติมไว้ล่วงหน้าหรือเลือกไว้ล่วงหน้าในองค์ประกอบแบบฟอร์มที่เข้ากันได้ ค่าเริ่มต้นได้รับการสนับสนุนในองค์ประกอบแบบฟอร์มทั้งหมดยกเว้น Custom HTML, File, Hidden Field และ Password.
• Required Field : เปิดเพื่อกำหนดให้ผู้ใช้กรอกข้อมูลในช่องนี้ในแบบฟอร์ม

Respond When

เลือกเวลาที่ n8n ส่งการตอบกลับการส่งแบบฟอร์ม คุณสามารถตอบกลับได้เมื่อ:

• Form Is Submitted : ส่งการตอบกลับไปยังผู้ใช้ทันทีที่ส่งแบบฟอร์ม
• Workflow Finishes : ใช้สิ่งนี้หากคุณต้องการให้ workflow ดำเนินการให้เสร็จสิ้นก่อนที่คุณจะส่งการตอบกลับไปยังผู้ใช้ หาก workflow มีข้อผิดพลาด ระบบจะส่งการตอบกลับไปยังผู้ใช้เพื่อแจ้งว่ามีปัญหาในการส่งแบบฟอร์ม

ตัวเลือก node

เลือก Add Option เพื่อดูตัวเลือกการกำหนดค่าเพิ่มเติม:

• ผนวก n8n Attribution (Append n8n Attribution) : ปิดเพื่อซ่อน แบบฟอร์มอัตโนมัติด้วย n8n (Form automated with n8n) คุณลักษณะที่ด้านล่างของแบบฟอร์ม
• Button Label : ป้ายกำกับที่จะใช้สำหรับปุ่มส่งแบบฟอร์มของคุณ n8n แสดงไฟล์ Button Label เป็นชื่อของปุ่มส่ง
• Form Path : ส่วนสุดท้ายของ URL ของแบบฟอร์ม สำหรับทั้งการทดสอบและการใช้งานจริง แทนที่ UUID ที่สร้างขึ้นโดยอัตโนมัติเป็นองค์ประกอบสุดท้าย
• Ignore Bots : เปิดเพื่อเพิกเฉยต่อคำขอจากบอท เช่น โปรแกรมดูตัวอย่างลิงก์และโปรแกรมรวบรวมข้อมูลเว็บ
• Include User in Output : เกี่ยวข้องเฉพาะเมื่อเท่านั้น Authentication ถูกตั้งค่าเป็น การรับรองความถูกต้องผู้ใช้ n8n (n8n User Auth) . ปิดเพื่อยกเว้น ID อีเมล ชื่อ และนามสกุลของผู้ใช้ที่ส่งจาก output ของ node (เปิดใช้งานโดยค่าเริ่มต้น)
• Use Workflow Timezone : เปิดเพื่อใช้เขตเวลาใน การตั้งค่า workflow แทน UTC (ค่าเริ่มต้น) ซึ่งส่งผลต่อมูลค่าของ submittedAt การประทับเวลาใน output node
• Custom Form Styling : แทนที่สไตล์เริ่มต้นของอินเทอร์เฟซแบบฟอร์มสาธารณะด้วย CSS ช่องนี้จะเติมข้อมูลล่วงหน้าด้วยสไตล์เริ่มต้นเพื่อให้คุณเปลี่ยนได้เฉพาะสิ่งที่คุณต้องการเท่านั้น

การปรับแต่งพฤติกรรมของ trigger node แบบฟอร์ม

จัดรูปแบบข้อความตอบกลับด้วยการขึ้นบรรทัดใหม่ (Format response text with line breaks)

คุณสามารถใช้วิธีใดวิธีหนึ่งต่อไปนี้เพื่อเพิ่มตัวแบ่งบรรทัดเพื่อสร้างข้อความตอบกลับ:

• ใช้การจัดรูปแบบ HTML แทนข้อความธรรมดาในฟิลด์ formSubmitText • แทนที่อักขระขึ้นบรรทัดใหม่ ( \n ) พร้อมแท็กตัวแบ่ง HTML ( <br> ) ก่อนที่จะส่งการตอบกลับ • พิจารณาใช้หน้าการตอบกลับ HTML ที่กำหนดเอง หากคุณต้องการการควบคุมการจัดรูปแบบเพิ่มเติม

จำกัดการเข้าถึงแบบฟอร์มด้วยการรับรองความถูกต้อง (Restrict form access with authentication)

คุณสามารถใช้หนึ่งในตัวเลือกต่อไปนี้เพื่อเพิ่มการรับรองความถูกต้องให้กับแบบฟอร์มของคุณ:

• ใช้ฟิลด์ OTP (รหัสผ่านครั้งเดียว) ที่มีการตรวจสอบ node TOTP สำหรับการตรวจสอบความถูกต้องโดยใช้ token • เพิ่ม node รอที่มีการตรวจสอบความถูกต้องของแบบฟอร์มเป็นหน้าแบบฟอร์มรอง • จัดเก็บรหัสผ่านที่แฮชไว้ในฐานข้อมูลและเปรียบเทียบกับการส่งแบบฟอร์มเพื่อตรวจสอบความถูกต้อง • ใช้ผู้ให้บริการการตรวจสอบสิทธิ์ภายนอกเช่น Google ฟอร์ม หากคุณต้องการการตรวจสอบสิทธิ์ขั้นสูง

การรักษาความปลอดภัย HTML และแท็กที่อนุญาต

trigger แบบฟอร์ม n8n จะฆ่าเชื้อเนื้อหา HTML ในไฟล์ Form Description สนามและ Custom HTML องค์ประกอบแบบฟอร์มเพื่อป้องกันช่องโหว่ด้านความปลอดภัย แม้ว่า HTML จะรองรับการจัดรูปแบบ แต่แท็กและแอตทริบิวต์บางอย่างก็ถูกจำกัด

Allowed HTML Tags

คุณสามารถใช้แท็กต่อไปนี้สำหรับการจัดรูปแบบ: <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>.

Restricted Tags

แท็กต่อไปนี้จะถูกลบโดยอัตโนมัติเพื่อความปลอดภัย: <script>, <style>, <input>, <form>, <button> และองค์ประกอบที่อาจเป็นอันตรายอื่นๆ ที่อาจทำให้เกิดการโจมตี XSS หรือรบกวนการทำงานของแบบฟอร์ม

Attribute Restrictions

อนุญาตให้ใช้เฉพาะแอตทริบิวต์เฉพาะบนแท็กบางแท็ก:

• ลิงค์ ( <a>): href, target, rel
• รูปภาพ ( <img>): src, alt, width, height
• วิดีโอ ( <video>): controls, autoplay, loop, muted, poster, width, height
• ไอเฟรม ( <iframe>): src, width, height, frameborder, allow, allowfullscreen, referrerpolicy (แซนด์บ็อกซ์โดยอัตโนมัติ)
• เซลล์ตาราง ( <td>, <th>): colspan, rowspan, scope, headers

คุณลักษณะอื่นๆ ทั้งหมดจะถูกลบออกระหว่างการฆ่าเชื้อ เท่านั้น http:// และ https:// อนุญาตให้ใช้รูปแบบ URL

เทมเพลตและตัวอย่าง

เรียกดูเทมเพลตการรวมเอกสารประกอบ trigger node แบบฟอร์ม n8n หรือ ค้นหาเทมเพลตทั้งหมด