การใช้งาน n8n Form

เอกสารประกอบสำหรับ node ฟอร์ม n8n ใน n8n ซึ่งเป็นแพลตฟอร์ม workflow อัตโนมัติ รวมถึงคำแนะนำในการใช้งานและลิงก์ไปยังตัวอย่าง

ใช้ node แบบฟอร์ม n8n เพื่อสร้างแบบฟอร์มที่ผู้ใช้ต้องเผชิญด้วยหลายขั้นตอน คุณสามารถเพิ่ม node อื่นๆ ด้วยตรรกะที่กำหนดเองระหว่างกันเพื่อประมวลผล input ของผู้ใช้ คุณต้องเริ่ม workflow ด้วย n8n Form.

n8n Form

การตั้งค่า node

ตั้งค่าการเลือกเริ่มต้นด้วย parameter การค้นหา (Set default selections with query parameters)

คุณสามารถตั้งค่าเริ่มต้นสำหรับฟิลด์ได้โดยใช้ parameter แบบสอบถาม ด้วย URL เริ่มต้นที่ระบุโดย n8n Form . ทุกหน้าในแบบฟอร์มจะได้รับ parameter การสืบค้นเดียวกันซึ่งส่งไปยัง URL ของ trigger node แบบฟอร์ม 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 . การดำเนินการนี้จะตั้งค่าเริ่มต้นสำหรับฟิลด์เหล่านี้ไม่ว่าจะปรากฏบนหน้าใดของแบบฟอร์มก็ตาม

กำลังแสดง HTML ที่กำหนดเอง (Displaying custom HTML)

คุณสามารถแสดง HTML ที่กำหนดเองบนแบบฟอร์มของคุณได้โดยการเพิ่ม Custom HTML กรอกแบบฟอร์มของคุณ สิ่งนี้ให้ HTML กล่องที่คุณสามารถแทรกโค้ด HTML เพื่อแสดงเป็นส่วนหนึ่งของหน้าแบบฟอร์มได้

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

เนื่องจากเนื้อหา HTML แบบกำหนดเองเป็นแบบอ่านอย่างเดียว ฟิลด์เหล่านี้จึงไม่รวมอยู่ในข้อมูล output ของฟอร์มตามค่าเริ่มต้น หากต้องการรวมเนื้อหา HTML แบบดิบใน output ของ node ให้ระบุชื่อสำหรับข้อมูลโดยใช้ Element Name สนาม

ช่อง HTML ไม่รองรับ <script>, <style> หรือ <input> องค์ประกอบ

หากคุณกำลังใช้ การสิ้นสุดแบบฟอร์ม ประเภทหน้า คุณสามารถปรับแต่งหน้าสุดท้ายที่คุณส่งผู้ใช้ได้อย่างเต็มที่ (รวมถึงการใช้ <script>, <style> และ <input> องค์ประกอบ) โดยการเลือก ในการส่งแบบฟอร์ม n8n (On n8n Form Submission) parameter ถึง Show Text.

รวมถึงช่องที่ซ่อนอยู่ (Including hidden fields)

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

หากต้องการเพิ่มฟิลด์ที่จะไม่แสดงบนแบบฟอร์ม ให้ใช้ Hidden Field องค์ประกอบแบบฟอร์ม ที่นั่นคุณสามารถกำหนด Field Name และอาจระบุค่าเริ่มต้นด้วยการกรอก Field Value.

เมื่อให้บริการแบบฟอร์ม คุณสามารถส่งผ่านค่าสำหรับฟิลด์ที่ซ่อนอยู่ได้โดยใช้ parameter แบบสอบถาม .

การกำหนดแบบฟอร์มโดยใช้ JSON (Defining the form using JSON)

ใช้ Define Form > Using JSON เพื่อกำหนดฟิลด์ของแบบฟอร์มของคุณด้วย array JSON ของวัตถุ . แต่ละ object กำหนดฟิลด์เดียวโดยใช้คีย์เหล่านี้ร่วมกัน:

• fieldLabel : ป้ายกำกับที่ปรากฏเหนือช่องป้อนข้อมูลในแบบฟอร์มที่แสดงผล
• fieldName : ชื่อฟิลด์ที่ใช้ใน output ของ node Form และเพื่ออ้างอิงฟิลด์ใน expression
• fieldType : เลือกจาก checkbox, date, dropdown, email, file, hiddenField, html, number, password, radio, text หรือ textarea.
  • ใช้ date เพื่อรวมตัวเลือกวันที่ในแบบฟอร์ม อ้างถึง วันและเวลากับ Luxon สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบวันที่
  • เมื่อใช้ dropdown ให้ตั้งค่าตัวเลือกด้วย fieldOptions (อ้างอิงตัวอย่างด้านล่าง) ตามค่าเริ่มต้น เมนูแบบเลื่อนลงจะเป็นเพียงตัวเลือกเดียว หากต้องการทำให้เป็นแบบหลายตัวเลือก ให้ตั้งค่า multiselect ถึง true . คุณสามารถใช้ได้ checkbox หรือ radio ร่วมกับ fieldOptions เกินไป
  • เมื่อใช้ file , ตั้ง multipleFiles ถึง true เพื่อให้ผู้ใช้สามารถเลือกได้มากกว่าหนึ่งไฟล์ หากต้องการกำหนดประเภทไฟล์ที่จะอนุญาต ให้ตั้งค่า acceptFileTypes เป็น string ที่มีรายการนามสกุลไฟล์ที่คั่นด้วยเครื่องหมายจุลภาค (อ้างอิงตัวอย่างด้านล่าง)
  • ใช้ hiddenField เพื่อเพิ่มฟิลด์ที่ซ่อนอยู่ในแบบฟอร์มของคุณ อ้างถึง รวมถึงช่องที่ซ่อนอยู่ สำหรับข้อมูลเพิ่มเติม
  • ใช้ html เพื่อแสดง HTML ที่กำหนดเองในแบบฟอร์มของคุณ อ้างถึง กำลังแสดง HTML ที่กำหนดเอง สำหรับข้อมูลเพิ่มเติม
• placeholder : ระบุข้อมูลตัวยึดตำแหน่งสำหรับฟิลด์ คุณสามารถใช้สิ่งนี้กับทุก ๆ fieldType ยกเว้น dropdown, checkbox, radio, date และ file.
• defaultValue : ระบุค่าที่จะเติมไว้ล่วงหน้าหรือเลือกไว้ล่วงหน้าในองค์ประกอบแบบฟอร์ม คุณสามารถใช้สิ่งนี้กับทุก ๆ fieldType ยกเว้น password, html, hiddenField และ file.
• requiredField : กำหนดให้ผู้ใช้กรอกข้อมูลในช่องนี้ในแบบฟอร์ม

ตัวอย่าง JSON ที่แสดงรูปแบบทั่วไปที่จำเป็นและคีย์ที่ใช้ได้:

// Use the "requiredField" key on any field to mark it as mandatory
// Use the "placeholder" key to specify placeholder data for all fields
// except 'dropdown', 'checkbox', 'radio', 'date' and 'file'
// Use the "defaultValue" key to pre-fill a form field or pre-select a 
// value in 'checkbox', 'radio' or 'dropdown' fields

[
  {
    "fieldLabel": "Date Field",
    "fieldType": "date",
    "formatDate": "mm/dd/yyyy", // how to format received date in n8n
    "requiredField": true
  },
  {
    "fieldLabel": "Dropdown Options",
    "fieldType": "dropdown",
    "fieldOptions": {
      "values": [
        {
          "option": "option 1"
        },
        {
          "option": "option 2"
        }
      ]
    },
    "defaultValue": "option 1",
    "requiredField": true
  },
  {
    "fieldLabel": "Multiselect",
    "fieldType": "dropdown",
    "fieldOptions": {
      "values": [
        {
          "option": "option 1"
        },
        {
          "option": "option 2"
        }
      ]
    },
    "multiselect": true // setting to true allows multi-select
  },
  {
    "fieldLabel": "Email",
    "fieldType": "email",
    "placeholder": "me@mail.com"
  },
  {
    "fieldLabel": "File",
    "fieldType": "file",
    "multipleFiles": true, // setting to true allows multiple files selection
    "acceptFileTypes": ".jpg, .png" // allowed file types
  },
  {
    "fieldLabel": "Number",
    "fieldType": "number"
  },
  {
    "fieldLabel": "Password",
    "fieldType": "password"
  },
  {
    // "fieldType": "text" can be omitted since it's the default type
    "fieldLabel": "Text"
  },
  {
    "fieldLabel": "Textarea",
    "fieldType": "textarea",
    "defaultValue": "Lorem ipsum."
  },
  {
    "fieldType": "html",
    "elementName": "content", // Optional field. It can be used to include the html in the output.
    "html": "<div>Custom element</div>"
  },
  {
    "fieldLabel": "Checkboxes",
    "fieldType": "checkbox",
    "fieldOptions": {
      "values": [
        {
          "option": "option 1"
        },
        {
          "option": "option 2"
        }
      ]
    },
    "defaultValue": ["option 1", "option 2"]
  },
  {
    "fieldLabel": "Radio",
    "fieldType": "radio",
    "fieldOptions": {
      "values": [
        {
          "option": "option 1"
        },
        {
          "option": "option 2"
        }
      ]
    }
  },
  {
    "fieldLabel": "hidden label",
    "fieldType": "hiddenField",
    "fieldValue": "extra form data"
  }
]

Form Ending

ใช้ Form Ending ประเภทหน้าเพื่อสิ้นสุดแบบฟอร์มและแสดงหน้าที่เสร็จสมบูรณ์ เปลี่ยนเส้นทางผู้ใช้ไปยัง URL หรือแสดง HTML หรือข้อความที่กำหนดเอง จะแสดงหน้าการสิ้นสุดแบบฟอร์มเพียงหน้าเดียวต่อการดำเนินการ แม้ว่าจะดำเนินการ n8n ก็ตาม หลายสาขา ที่มี node การสิ้นสุดแบบฟอร์ม

เลือกระหว่างตัวเลือกเหล่านี้เมื่อใช้งาน ในการส่งแบบฟอร์ม n8n (On n8n Form Submission):

• Show Completion Screen : แสดงหน้าจอสุดท้ายให้ผู้ใช้ยืนยันว่าได้ส่งแบบฟอร์มแล้ว
  • กรอก Completion Title เพื่อตั้งค่า h1 ชื่อบนแบบฟอร์ม
  • n8n แสดงไฟล์ Completion Message เป็นคำบรรยายด้านล่างหลัก h1 ชื่อบนแบบฟอร์ม ใช้ \n หรือ <br> เพื่อเพิ่มตัวแบ่งบรรทัด
  • เลือก เพิ่มตัวเลือก (Add option) และกรอก Completion Page Title เพื่อตั้งชื่อเพจในแท็บเบราว์เซอร์
• Redirect to URL : เปลี่ยนเส้นทางผู้ใช้ไปยัง URL ที่ระบุเมื่อแบบฟอร์มเสร็จสมบูรณ์
  • กรอก URL พร้อมหน้าที่คุณต้องการเปลี่ยนเส้นทางไปเมื่อผู้ใช้กรอกแบบฟอร์ม
• Show Text : แสดงหน้าสุดท้ายที่กำหนดโดยข้อความธรรมดาและ HTML ที่กำหนดเอง
  • กรอก Text ฟิลด์ที่มีเนื้อหา HTML หรือข้อความธรรมดาที่คุณต้องการแสดง
• Return Binary File : ส่งคืนไฟล์ไบนารีเมื่อเสร็จสิ้น
  • กรอก Completion Title เพื่อตั้งค่า h1 ชื่อบนแบบฟอร์ม
  • n8n แสดงไฟล์ Completion Message เป็นคำบรรยายด้านล่างหลัก h1 ชื่อบนแบบฟอร์ม ใช้ \n หรือ <br> เพื่อเพิ่มตัวแบ่งบรรทัด
  • จัดให้มี Input Data Field Name มีไฟล์ไบนารี่เพื่อส่งคืนให้กับผู้ใช้

แบบฟอร์มที่มีสาขา (Forms with branches)

node แบบฟอร์ม n8n ดำเนินการและแสดงหน้าแบบฟอร์มที่เกี่ยวข้องเมื่อใดก็ตามที่ได้รับข้อมูลจาก node ก่อนหน้า เมื่อสร้างแบบฟอร์มด้วย n8n เพื่อหลีกเลี่ยงความสับสน สิ่งสำคัญคือต้องเข้าใจว่าแบบฟอร์มมีพฤติกรรมอย่างไรเมื่อเกิดการแยกสาขา

workflow ที่มีสาขาที่ไม่เกิดร่วมกัน (Workflows with mutually exclusive branches)

workflow ของฟอร์มที่มีสาขาที่ไม่เกิดร่วมกันจะทำงานตามที่คาดไว้ n8n จะดำเนินการสาขาเดียวตามข้อมูลและเงื่อนไขที่คุณส่งมา ขณะที่ดำเนินการ n8n จะแสดงแต่ละหน้าในสาขาซึ่งลงท้ายด้วย node ฟอร์ม n8n พร้อมด้วย Form Ending ประเภทหน้า

workflow นี้แสดงให้เห็นถึงการแยกส่วนที่ไม่เกิดร่วมกัน การเลือกแต่ละรายการสามารถดำเนินการได้เพียงสาขาเดียวเท่านั้น

n8n Form

workflow ที่อาจดำเนินการหลายสาขา (Workflows that may execute multiple branches)

workflow แบบฟอร์มที่ส่งข้อมูลไปยังหลายสาขาพร้อมกันต้องได้รับการดูแลมากขึ้น เมื่อหลายสาขาได้รับข้อมูลระหว่างการดำเนินการ (เช่น จาก a Switch node) n8n จะดำเนินการแต่ละสาขาที่รับข้อมูล ตามลำดับ . เมื่อถึงจุดสิ้นสุดของสาขาหนึ่ง การดำเนินการจะย้ายไปยังสาขาถัดไปพร้อมข้อมูล

n8n ดำเนินการเพียงรายการเดียวเท่านั้น Form Ending node ฟอร์ม n8n สำหรับการดำเนินการแต่ละครั้ง เมื่อ workflow แบบฟอร์มหลายสาขาได้รับข้อมูล n8n จะละเว้น node การสิ้นสุดแบบฟอร์มทั้งหมด ยกเว้น node ที่เกี่ยวข้องกับสาขาสุดท้าย

workflow นี้อาจดำเนินการมากกว่าหนึ่งสาขาระหว่างการดำเนินการ ที่นี่ n8n ดำเนินการสาขาที่ถูกต้องทั้งหมดตามลำดับ สิ่งนี้ส่งผลกระทบต่อ node ฟอร์ม n8n ที่ n8n ดำเนินการ (โดยเฉพาะ which Form Ending node แสดง):

n8n Form

ตัวเลือก node (Node options)

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

• Form Title : ชื่อเรื่องสำหรับแบบฟอร์มของคุณ n8n แสดงไฟล์ Form Title เป็นชื่อเว็บเพจและหลัก h1 ชื่อบนแบบฟอร์ม
• Form Description : คำอธิบายสำหรับแบบฟอร์มของคุณ n8n แสดงไฟล์ Form Description เป็นคำบรรยายด้านล่างหลัก h1 ชื่อบนแบบฟอร์ม ช่องนี้รองรับ HTML ใช้ \n หรือ <br> เพื่อเพิ่มตัวแบ่งบรรทัด คำอธิบายแบบฟอร์มยังเติมข้อมูล คำอธิบายเมตา HTML สำหรับเพจ
• Button Label : ป้ายกำกับที่จะใช้สำหรับปุ่มส่งแบบฟอร์มของคุณ n8n แสดงไฟล์ Button Label เป็นชื่อของปุ่มส่ง
• Custom Form Styling : แทนที่สไตล์เริ่มต้นของอินเทอร์เฟซแบบฟอร์มสาธารณะด้วย CSS ช่องนี้จะเติมข้อมูลล่วงหน้าด้วยสไตล์เริ่มต้นเพื่อให้คุณเปลี่ยนได้เฉพาะสิ่งที่คุณต้องการเท่านั้น
• Completion Page Title : ชื่อเรื่องสำหรับหน้ากรอกแบบฟอร์มขั้นสุดท้าย

กำลังรัน node

สร้างและทดสอบ workflow (Build and test workflows)

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

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

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

ขั้นตอนการผลิต (Production workflows)

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

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

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

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