วิธีจัดการ Form Submissions ของ Webflow โดยไม่ต้องมี Backend แบบกำหนดเองครับ

นำทาง
กลับไปที่บล็อก
เผยแพร่
Apr 17, 2026
เวลาอ่าน
7 นาทีในการอ่าน
เขียนโดย
Sophie Parker
วิธีจัดการ Form Submissions ของ Webflow โดยไม่ต้องมี Backend แบบกำหนดเองครับ

ฟอร์มติดต่อบน Webflow ดูดีมากตั้งแต่แรก แต่ Webflow จะส่งข้อมูลที่ผู้ใช้กรอกมาให้คุณทางอีเมลเท่านั้น ไม่ได้บันทึกลงฐานข้อมูล ไม่ได้เชื่อมต่อกับ CRM และไม่ได้ทริกเกอร์ logic ใดๆ เพิ่มเติม ถ้าต้องการมากกว่าแค่การแจ้งเตือนทางอีเมลพื้นฐาน คุณต้องส่ง form submissions ผ่านบริการภายนอก ข่าวดีคือทำได้โดยไม่ต้องเขียนโค้ดฝั่ง backend แม้แต่บรรทัดเดียวครับ

สารบัญ

Webflow มีอะไรให้คุณแบบ default บ้าง

ระบบจัดการฟอร์มในตัวของ Webflow ทำได้สามอย่างคือ ส่งอีเมลแจ้งเตือนให้เจ้าของเว็บไซต์ แสดงข้อความสำเร็จ และบันทึก submissions ไว้ในแดชบอร์ดของ Webflow (เฉพาะแผนที่ต้องชำระเงิน) ซึ่งเพียงพอสำหรับฟอร์มติดต่อบนเว็บไซต์เล็กๆ แต่จะเริ่มไม่พอทันทีที่คุณต้องการสิ่งเหล่านี้:

  • ส่งอีเมลตอบกลับอัตโนมัติไปยังผู้ที่กรอกฟอร์ม
  • ส่งต่อ submissions ไปยัง inbox ของทีมหรือ CRM ที่กำหนด
  • Conditional logic (เช่น แบ่ง leads ตามความสนใจในสินค้า)
  • ระบบกรองสแปมที่ดีกว่า honeypot พื้นฐานของ Webflow
  • บันทึกการส่งที่เชื่อถือได้พร้อม timestamp และการลองส่งซ้ำ

ฟีเจอร์เหล่านี้ไม่มีใน Webflow แบบ native ครับ คุณต้องเพิ่มชั้นบริการภายนอก และมีสามวิธีที่ทำได้จริงในทางปฏิบัติ

การเชื่อมต่อแบบ native - Zapier และ Make

Webflow มีการเชื่อมต่อโดยตรงกับ Zapier และ Make (เดิมชื่อ Integromat) เมื่อมี form submission เข้ามา trigger จะทำงานและคุณสามารถเชื่อมต่อ action ต่างๆ ได้ เช่น เพิ่มแถวใน Google Sheets สร้าง contact ใน HubSpot ส่งข้อความใน Slack และอื่นๆ

นี่คือเส้นทาง no-code ที่นักออกแบบส่วนใหญ่เลือกใช้เป็นอันดับแรก ขั้นตอนการตั้งค่ามีดังนี้:

  1. ใน Webflow ไปที่ การตั้งค่าโปรเจกต์ > การเชื่อมต่อ แล้วเชื่อมบัญชี Zapier ของคุณ
  2. ใน Zapier สร้าง Zap ใหม่โดยเลือก Webflow - New Form Submission เป็น trigger
  3. เลือกฟอร์มที่ต้องการตามชื่อ
  4. เพิ่ม action ที่ต้องการ (Gmail, Slack, Airtable และอื่นๆ)
  5. ทดสอบด้วย submission จริงแล้วเปิดใช้งาน Zap
คำเตือนเรื่องค่าใช้จ่าย: แผนฟรีของ Zapier อนุญาตเพียง 100 tasks ต่อเดือนและรองรับเฉพาะ Zap แบบขั้นตอนเดียว Zap แบบหลายขั้นตอน (เช่น อีเมล + CRM + Sheets) ต้องใช้แผนชำระเงินซึ่งเริ่มต้นที่ $19.99 ต่อเดือน หากเว็บไซต์ของคุณมีทราฟฟิกพอสมควร ขีดจำกัด task จะถูกใช้หมดได้เร็วมากครับ

Make ราคาถูกกว่าสำหรับ workflow ที่ซับซ้อน แต่ทั้งสองแพลตฟอร์มเพิ่มการพึ่งพาจากภายนอก ถ้า Zapier หรือ Make ล่ม หรือบัญชีของคุณถึงขีดจำกัด submissions อาจหายไปเงียบๆ หรือค้างอยู่ในคิว

การใช้ Webflow Webhook

Webflow webhook เป็นเส้นทางที่ตรงกว่า Webflow จะส่ง HTTP POST ไปยัง URL ที่คุณกำหนดทุกครั้งที่มีการส่งฟอร์ม คุณควบคุม endpoint ที่รับข้อมูลเองได้เลย ดังนั้นจะทำอะไรกับ payload ก็ได้ตามต้องการ

วิธีตั้งค่ามีดังนี้:

  1. ไปที่ การตั้งค่าโปรเจกต์ > การเชื่อมต่อ > Webhooks ใน Webflow
  2. คลิก เพิ่ม Webhook แล้วเลือก trigger เป็น Form Submission
  3. วาง URL ของ endpoint ที่จะรับข้อมูล
  4. บันทึกและทดสอบด้วย submission จริง

payload ที่ Webflow ส่งมาเป็น JSON object ที่มีค่าของทุก field ชื่อฟอร์ม และ metadata ของเว็บไซต์ ตัวอย่าง payload ทั่วไปมีลักษณะดังนี้: 

{
  "name": "Contact Form",
  "site": "my-webflow-site",
  "data": {
    "Name": "Jane Smith",
    "Email": "[email protected]",
    "Message": "Hi, I'd like a quote."
  },
  "submittedAt": "2024-11-15T10:22:00Z"
}

ข้อจำกัดคือคุณต้องมีบางอย่างเพื่อรับ webhook นั้น ตัวเลือกได้แก่ Cloudflare Worker ขนาดเล็ก, Pipedream workflow หรือ form backend ที่สร้างขึ้นเฉพาะ การเขียน receiver เองคือปัญหา "custom backend" ที่บทความนี้พยายามช่วยคุณหลีกเลี่ยง นั่นคือจุดที่บริการรับฟอร์มแบบส่งอีเมลกลายเป็นทางออกที่สะอาดที่สุดครับ

ถ้าสนใจเปรียบเทียบข้อดีข้อเสียระหว่างการเขียน PHP handler เองกับการใช้บริการฟอร์มแบบ serverless สามารถดูรายละเอียดได้ที่ PHP vs Serverless Forms ครับ

เปลี่ยน form endpoint ไปใช้บริการรับฟอร์มแทน

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

ขั้นตอนการทำงานใน Webflow มีดังนี้:

  1. ใน Webflow Designer เลือก element ฟอร์มของคุณ
  2. ในแผง การตั้งค่าฟอร์ม ตั้งค่า field Action เป็น URL endpoint ของบริการฟอร์มที่ต้องการ (เช่น https://sendform.net/!your-form-id )
  3. ตั้งค่า Method เป็น POST
  4. ตรวจสอบให้แน่ใจว่า input แต่ละช่องมี attribute name ซึ่ง Webflow ตั้งค่าให้อยู่แล้วโดย default
  5. เผยแพร่เว็บไซต์และทดสอบการส่งฟอร์ม

วิธีนี้จะข้ามระบบจัดการฟอร์มของ Webflow ไปทั้งหมด submission จะถูกส่งตรงจากเบราว์เซอร์ของผู้เยี่ยมชมไปยังบริการฟอร์ม คุณได้รับอีเมล บริการจัดการการลองส่งซ้ำและสแปม และ Webflow ทำหน้าที่เป็นแค่ชั้น UI เท่านั้น

รูปแบบเดียวกันนี้ใช้ได้กับทุกเว็บไซต์แบบ static หรือ no-code ถ้าคุณโฮสต์บน GitHub Pages หรือ Cloudflare Pages ด้วย บทความเกี่ยวกับ การโฮสต์เว็บไซต์ static ฟรีพร้อมฟอร์มติดต่อที่ใช้งานได้ ครอบคลุมแนวทางเดียวกันนี้ครับ

Sendform เทียบกับตัวเลือกอื่น

มีบริการฟอร์มหลายตัวที่ใช้งานกับ Webflow ได้ นี่คือการเปรียบเทียบตัวเลือกหลักในแง่มุมที่สำคัญจริงๆ สำหรับการตั้งค่าฟอร์มติดต่อ:

บริการ แผนฟรี ความซับซ้อนในการตั้งค่า เปลี่ยนเส้นทางหน้าเองได้ กรองสแปม รองรับ GDPR
Sendform มี วาง URL เดียวก็เสร็จ มี มี มี
Formspree 50 submissions ต่อเดือน สมัครสมาชิก + วาง URL เฉพาะแผนชำระเงิน พื้นฐาน (reCAPTCHA ต้องชำระเงิน) บางส่วน
Netlify Forms 100 submissions ต่อเดือน ต้องโฮสต์บน Netlify มี มี บางส่วน
Zapier (ผ่าน webhook) 100 tasks ต่อเดือน workflow หลายขั้นตอน ต้องตั้งเอง ไม่มีในตัว ขึ้นอยู่กับ Zap
Basin 100 submissions ต่อเดือน สมัครสมาชิก + วาง URL มี มี บางส่วน

Sendform โดดเด่นด้วยเหตุผลที่เป็นรูปธรรมหลายอย่างนอกเหนือจากที่ใส่ในตารางได้:

  • ตั้งค่าได้ทันทีโดยไม่มีอุปสรรค: คุณได้รับ URL ของ form endpoint โดยไม่ต้องสร้างบัญชีก่อน แค่วางลงใน field Action ของ Webflow ก็เสร็จแล้วครับ
  • ไม่เก็บ submissions ไว้โดย default: Sendform ส่งข้อมูลทางอีเมลและไม่เก็บไว้บนเซิร์ฟเวอร์ของตัวเอง ซึ่งเป็น default ที่ถูกต้องสำหรับการปฏิบัติตาม GDPR คู่แข่งอย่าง Formspree เก็บ submissions ทั้งหมดไว้ในแดชบอร์ด หมายความว่าข้อมูลของผู้ใช้คุณอยู่บนเซิร์ฟเวอร์บุคคลที่สามอย่างไม่มีกำหนด
  • เหมาะสำหรับนักพัฒนาแต่ใช้แบบ no-code ก็ได้: ไม่เหมือน Zapier ที่ต้องดูแล workflow และไม่เหมือน Netlify Forms ที่ผูกกับผู้ให้บริการโฮสติ้งเฉพาะ ใช้งานได้กับ Webflow, GitHub Pages หรือโฮสต์อื่นๆ ได้ทั้งหมด
  • แผนฟรีที่ตรงไปตรงมา: ไม่มีกำแพง "อัปเกรดเพื่อใช้งานการเปลี่ยนเส้นทาง" แบบที่บริการอื่นใช้ผลักดันให้คุณจ่ายเงินครับ
ถ้ากำลังมองหาทางเลือกที่เบากว่า form builder ขนาดใหญ่ สามารถดูการเปรียบเทียบ ทางเลือกที่ดีที่สุดแทน Jotform สำหรับนักพัฒนา ซึ่งครอบคลุม Sendform พร้อมตัวเลือกอื่นๆ พร้อมข้อดีข้อเสียที่ตรงไปตรงมาครับ

ควรเลือกแนวทางไหนดี?

คำตอบที่ถูกต้องขึ้นอยู่กับสิ่งที่คุณต้องการจริงๆ หลังจากที่ฟอร์มถูกส่งแล้ว:

  • ต้องการแค่การแจ้งเตือนทางอีเมล: ใช้ Sendform วาง URL ของ endpoint ลงใน field Action ของ Webflow เสร็จภายในสองนาทีครับ
  • อีเมล + ซิงค์กับ CRM หรือสเปรดชีต: ใช้ Sendform สำหรับการส่งอีเมล และเพิ่ม Zapier step ที่ทริกเกอร์จากอีเมลขาเข้าได้ตามต้องการ หรือใช้ webhook output ของ Sendform ถ้าแผนของคุณรองรับ
  • ต้องการระบบอัตโนมัติแบบหลายขั้นตอนที่ซับซ้อน: การใช้ Webflow webhook เข้า Make หรือ Zapier เหมาะกับกรณีนี้ แต่ต้องเตรียมงบสำหรับแผนชำระเงินด้วย
  • ใช้ Netlify อยู่แล้ว: Netlify Forms ก็ใช้ได้สำหรับกรณีง่ายๆ แต่จะถึงเพดาน 100 submissions ต่อเดือนได้เร็วมากสำหรับเว็บไซต์ที่มีผู้เยี่ยมชมพอสมควร

สำหรับฟอร์มติดต่อบน Webflow ส่วนใหญ่ที่มีแค่ชื่อ อีเมล และข้อความที่ต้องการให้ส่งถึงกล่องจดหมายได้อย่างน่าเชื่อถือ Sendform คือทางที่เร็วและสะอาดที่สุดครับ ไม่ต้องมี backend ไม่ต้องคอยดู task limit รายเดือน และไม่มีข้อมูล submission ค้างอยู่ในแดชบอร์ดบุคคลที่สามที่คุณอาจลืมไปแล้ว

Sendform - handle Webflow contact form submissions without a backend

จัดการฟอร์มติดต่อบน Webflow โดยไม่ต้องเขียน backend

Sendform มอบ form endpoint สำเร็จรูปที่คุณวางลงใน field Action ของ Webflow ได้เลย form submissions บน Webflow ของคุณจะส่งถึงกล่องจดหมายทันที พร้อมการกรองสแปมและค่า default ที่รองรับ GDPR ตั้งแต่แรกครับ

ทดลองใช้ Sendform ฟรี →

เมื่อคุณชี้ Action ของฟอร์มใน Webflow ไปยัง endpoint ภายนอก สถานะสำเร็จในตัวของ Webflow จะไม่ทำงานโดยอัตโนมัติอีกต่อไป บริการฟอร์มส่วนใหญ่จัดการเรื่องนี้โดยเปลี่ยนเส้นทางไปยังหน้าขอบคุณที่คุณกำหนดเอง ใน Sendform คุณตั้ง URL สำหรับเปลี่ยนเส้นทางในการตั้งค่าฟอร์ม ผู้เยี่ยมชมจะถูกพาไปยังหน้ายืนยันของคุณหลังส่งฟอร์ม หรืออีกทางคือใช้ JavaScript เพื่อดักจับ event การส่งฟอร์ม ส่งผ่าน fetch() และแสดงสถานะสำเร็จของ Webflow เองด้วยตนเองครับ

รองรับครับ ภายใต้การตั้งค่าโปรเจกต์ > การเชื่อมต่อ > Webhooks คุณสามารถเพิ่ม webhook ที่จะทำงานทุกครั้งที่มี form submission ใหม่ Webflow จะส่ง JSON POST ไปยัง URL ที่กำหนดโดยมีค่าของทุก field ชื่อฟอร์ม และ timestamp รวมอยู่ด้วย ซึ่งต้องมี endpoint รับข้อมูล ไม่ว่าจะเป็น serverless function, Pipedream workflow หรือบริการฟอร์มที่รับ webhook ได้ ฟีเจอร์ webhook นี้ใช้ได้บนแผน CMS และ Business ของ Webflow ครับ

Zapier อยู่ระหว่าง Webflow กับปลายทางของคุณ (อีเมล, CRM และอื่นๆ) และเพิ่มชั้น workflow เข้ามา มีประสิทธิภาพสูงสำหรับระบบอัตโนมัติแบบหลายขั้นตอน แต่มีค่าใช้จ่ายเมื่อเกิน 100 tasks ต่อเดือน และเพิ่มจุดที่อาจเกิดความผิดพลาดได้ Sendform เป็น form endpoint ตรงๆ submissions จะถูกส่งจากเบราว์เซอร์ไปยัง Sendform โดยตรง และ Sendform จะส่งอีเมลให้คุณทันที ไม่มี workflow ที่ต้องดูแล ไม่มีตัวนับ task และไม่มีความเสี่ยงที่ Zap จะพังเงียบๆ สำหรับฟอร์มติดต่อทั่วไป Sendform ตั้งค่าได้เร็วกว่าและเชื่อถือได้มากกว่าในการใช้งานประจำวันครับ

ขึ้นอยู่กับบริการที่ใช้ครับ บริการที่เก็บ submissions ไว้ในฐานข้อมูลของตัวเอง (Formspree, Basin, Netlify Forms) ถือเป็นผู้ประมวลผลข้อมูล ซึ่งหมายความว่าคุณต้องมีข้อตกลงการประมวลผลข้อมูล (Data Processing Agreement) และต้องระบุไว้ในนโยบายความเป็นส่วนตัวของคุณ Sendform ออกแบบมาเพื่อส่งต่อข้อมูลโดยไม่เก็บ submissions ไว้โดย default ซึ่งช่วยลดภาระด้านการปฏิบัติตามกฎระเบียบได้มาก ไม่ว่าจะใช้บริการใด คุณควรอัปเดตนโยบายความเป็นส่วนตัวเพื่อระบุว่าข้อมูลฟอร์มติดต่อถูกจัดการและส่งต่ออย่างไรครับ

ได้ครับ และมีหลายตัวเลือก บริการฟอร์มส่วนใหญ่รวมถึง Sendform มีการกรองสแปมในตัวอยู่แล้ว คุณยังสามารถเพิ่ม honeypot field ซึ่งเป็น input ที่ซ่อนอยู่ที่บอทจะกรอกแต่ผู้ใช้จริงจะไม่เห็น บริการรับข้อมูลจะเพิกเฉยต่อ submissions ที่ field นั้นมีค่าอยู่ สำหรับฟอร์มที่มีทราฟฟิกสูง บริการที่รองรับ reCAPTCHA v3 หรือ hCaptcha ให้การป้องกันเพิ่มเติมอีกชั้น ตัวกรองสแปมของ Webflow เองจะทำงานเฉพาะเมื่อใช้ระบบจัดการฟอร์มของ Webflow เท่านั้น ดังนั้นการเปลี่ยนไปใช้ endpoint ภายนอกหมายความว่าต้องพึ่งพาเครื่องมือกรองสแปมของบริการนั้นๆ แทนครับ

ไม่ครับ การชี้ attribute Action ของฟอร์มไปยัง URL ภายนอกทำได้บนทุกแผนของ Webflow รวมถึงแผน Starter ฟรีด้วย เพราะคุณแค่เปลี่ยน HTML attribute บนหน้าที่เผยแพร่แล้ว ข้อจำกัดของแผนฟรีคือระบบจัดการฟอร์มของ Webflow เอง (การเก็บข้อมูลในแดชบอร์ด การแจ้งเตือนทางอีเมลผ่าน Webflow) ต้องใช้แผนเว็บไซต์ที่ชำระเงิน การใช้บริการภายนอกอย่าง Sendform หลีกเลี่ยงข้อจำกัดนั้นได้ทั้งหมด ฟอร์มจะ POST ไปยังเซิร์ฟเวอร์ของ Sendform โดยตรงโดยไม่ขึ้นอยู่กับระดับแผน Webflow ของคุณครับ