เชื่อมต่อ HubSpot กับ Webflow สำหรับ Marketing Automation

ทำไมต้องเชื่อม HubSpot กับ Webflow

Webflow เป็น Website Builder ที่ให้คุณออกแบบเว็บสวยและมีประสิทธิภาพโดยไม่ต้องเขียนโค้ด แต่ Webflow ไม่ได้มีระบบ Marketing Automation หรือ CRM ในตัว ในขณะที่ HubSpot เป็น Marketing Automation Platform ที่มี Email Automation, Lead Scoring, Sales Pipeline, CRM ที่แข็งแกร่ง แต่เว็บไซต์ที่สร้างด้วย HubSpot CMS มีข้อจำกัดด้าน Design Flexibility

การเชื่อม HubSpot + Webflow ทำให้คุณได้ทั้งสองอย่าง: เว็บที่สวยและโหลดเร็วจาก Webflow + ระบบ Marketing ที่ทรงพลังจาก HubSpot เมื่อมีคนกรอก Form บนเว็บ Webflow ข้อมูลจะส่งไปยัง HubSpot ทันที แล้วระบบจะทำ Email Nurture, Lead Scoring, และส่งต่อให้ Sales Team โดยอัตโนมัติ

สถิติจาก HubSpot พบว่าบริษัทที่ใช้ Marketing Automation เพิ่ม Lead ได้ 451% และ Sales Productivity เพิ่ม 14.5% เพราะ Sales ไม่ต้องเสียเวลากับ Lead ที่ยังไม่พร้อม ให้ระบบกรอง Lead ที่มีโอกาสสูงมาให้โดยอัตโนมัติ

3 วิธีเชื่อมต่อ HubSpot + Webflow

วิธีที่ 1: Native Integration (HubSpot Form Embed)

วิธีนี้เป็นวิธีง่ายที่สุด ใช้ Form ของ HubSpot วางบนเว็บ Webflow โดยตรง ไม่ต้องเขียนโค้ด ไม่ต้องใช้เครื่องมือเพิ่ม ใช้เวลาติดตั้งไม่เกิน 10 นาที

ขั้นตอนการติดตั้ง:

1. สร้าง Form ใน HubSpot: เข้า HubSpot → Marketing → Forms → Create Form
2. ออกแบบ Form: เลือกฟิลด์ที่ต้องการ เช่น Name, Email, Company, Phone
3. Copy Embed Code: หลังสร้าง Form เสร็จจะได้ Embed Code (HTML)
4. Paste ลงใน Webflow: ใน Webflow Designer → ลาก Embed Element → Paste Code
5. Publish: Publish เว็บ Webflow แล้วทดสอบกรอก Form

ข้อดี	ข้อเสีย
ง่ายที่สุด ไม่ต้องเขียนโค้ด	Form Style ปรับแต่งยาก (ต้องใช้ CSS Override)
Real-time Sync (ข้อมูลเข้า HubSpot ทันที)	ต้องใช้ Form ของ HubSpot ไม่สามารถใช้ Webflow Native Form ได้
ฟรี ไม่มีค่าใช้จ่ายเพิ่ม	ถ้ามี Form หลายแบบต้องสร้างใน HubSpot แยกกัน
รองรับ Smart Fields (ซ่อนฟิลด์ที่เคยกรอกแล้ว)	Loading Speed อาจช้ากว่าเพราะต้อง Load Script จาก HubSpot

Tips สำหรับการใช้ HubSpot Form Embed:

• ปรับแต่ง Style ด้วย CSS: ใส่ Custom CSS ใน Form Settings เพื่อให้ Form เข้ากับ Brand เช่น เปลี่ยนสีปุ่ม, Font
• Enable GDPR Features: เปิด GDPR Consent ใน Form Settings เพื่อให้ Compliant กับกฎหมายคุ้มครองข้อมูล
• Thank You Message: ตั้งค่า Thank You Message หรือ Redirect URL หลังกรอก Form เสร็จ
• Progressive Profiling: ใช้ Smart Fields ถ้าคนเดิมกรอก Form ซ้ำจะถามคำถามใหม่ ไม่ถามซ้ำ

วิธีที่ 2: Zapier/Make (No-code Automation)

ถ้าคุณต้องการใช้ Webflow Native Form (ไม่ใช่ HubSpot Form) แต่ยังไม่อยากเขียนโค้ด ใช้ Zapier หรือ Make เชื่อมต่อได้ วิธีนี้ทำให้ Form บนเว็บ Webflow ส่งข้อมูลไปยัง HubSpot โดยอัตโนมัติ

ขั้นตอนการติดตั้ง (Zapier):

1. สร้าง Form ใน Webflow: ใช้ Webflow Native Form Element ออกแบบ Form ตามต้องการ
2. สร้าง Zap ใน Zapier: เข้า Zapier → Create Zap
3. Trigger: เลือก Webflow → New Form Submission → เลือก Site + Form
4. Action: เลือก HubSpot → Create or Update Contact → Map Fields (Name, Email, Phone, etc.)
5. Test & Turn On: ทดสอบกรอก Form ดูว่าข้อมูลเข้า HubSpot หรือไม่

ข้อดี	ข้อเสีย
ใช้ Webflow Native Form ได้ (ปรับแต่ง Style ง่าย)	มีค่าใช้จ่าย (Zapier $20-100/เดือน)
No-code ไม่ต้องเขียนโค้ด	Sync Delay 1-5 นาที (ไม่ Real-time)
ยืดหยุ่น เชื่อมได้หลายแอป (Slack, Google Sheets, etc.)	จำกัดจำนวน Task ต่อเดือน (ต้อง Upgrade ถ้าเกิน)
ตั้งค่า Conditional Logic ได้ (เช่น ถ้า Job Title = CEO ส่งแจ้ง Slack)	ถ้า Zapier Down Form ไม่ทำงาน

Zapier vs Make (formerly Integromat):

• Zapier: ง่ายกว่า, UI เป็นมิตร, ราคาแพงกว่า (เริ่มต้น $20/เดือน)
• Make: ซับซ้อนกว่า แต่ยืดหยุ่นกว่า, ราคาถูกกว่า (เริ่มต้น $9/เดือน)
• แนะนำ: ถ้าไม่เคยใช้ เริ่มจาก Zapier ก่อน ถ้าต้องการ Workflow ซับซ้อนค่อยย้ายไป Make

วิธีที่ 3: Custom API Integration (Webflow Logic + HubSpot API)

วิธีนี้เหมาะกับคนที่ต้องการควบคุมทุกอย่างเอง มีความยืดหยุ่นสูงสุด ไม่ต้องพึ่ง Third-party Service เช่น Zapier แต่ต้องเขียนโค้ด หรือใช้ n8n (Open-source Automation Platform)

ขั้นตอนการติดตั้ง (Webflow Logic + HubSpot API):

1. สร้าง Form ใน Webflow
2. สร้าง Webflow Logic Flow: Webflow → Logic → New Flow → Trigger: Form Submission
3. Action: Custom Code: เขียน JavaScript เรียก HubSpot API
4. HubSpot API: ใช้ POST /crm/v3/objects/contacts เพื่อสร้าง Contact
5. Test & Deploy: ทดสอบกรอก Form ดูว่าข้อมูลเข้า HubSpot

ตัวอย่างโค้ด Webflow Logic (JavaScript):

export default async function (event) {
  const { name, email, phone, company } = event.data;

  const response = await fetch('https://api.hubapi.com/crm/v3/objects/contacts', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer YOUR_HUBSPOT_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      properties: {
        firstname: name.split(' ')[0],
        lastname: name.split(' ')[1] || '',
        email: email,
        phone: phone,
        company: company
      }
    })
  });

  return { success: response.ok };
}

ทางเลือก: ใช้ n8n แทน Webflow Logic

n8n เป็น Open-source Automation Platform (คล้าย Zapier แต่ Self-hosted ฟรี) ที่ให้คุณสร้าง Workflow แบบ Drag-and-Drop ได้ โดยไม่ต้องเขียนโค้ดเยอะ วิธีนี้เหมาะกับคนที่ต้องการควบคุมเองแต่ไม่อยากเขียนโค้ดเต็มรูปแบบ

Form Handling — Best Practices สำหรับ Lead Capture

Form คือจุดสำคัญที่สุดในการเก็บ Lead แต่ถ้า Form ยาวเกินไปหรือถามคำถามที่ไม่เกี่ยวข้อง คนจะไม่กรอก สถิติพบว่า Form ที่มี 3-5 ฟิลด์มี Conversion Rate 15-20% แต่ถ้ามากกว่า 7 ฟิลด์จะตกเหลือแค่ 5-10%

Form Fields ที่ควรถาม (B2B)

Field	ความจำเป็น	เหตุผล
Name	บังคับ	ต้องรู้ว่าจะเรียกอะไร ใช้ในอีเมล Personalization
Email	บังคับ	ช่องทางติดต่อหลัก ใช้สำหรับ Email Marketing
Company	บังคับ (B2B)	ใช้ Qualify Lead (บริษัทใหญ่/เล็ก, อุตสาหกรรมไหน)
Phone	Optional	ช่วย Sales ติดตามได้ไว แต่ถ้าบังคับ Conversion จะตก
Job Title	Optional	ใช้ Lead Scoring (C-level สูงกว่า Junior)
Industry	Optional	ใช้ Segment Email Campaign ตามอุตสาหกรรม
Company Size	Optional	ใช้ Qualify Lead (SME vs Enterprise มี Budget ต่างกัน)

แนะนำ: เริ่มด้วย 3 ฟิลด์ (Name, Email, Company) เพื่อเพิ่ม Conversion แล้วใช้ Progressive Profiling ถามข้อมูลเพิ่มเติมในครั้งถัดไป

Form UX Best Practices

• Label ชัดเจน: อย่าใช้ Placeholder แทน Label เพราะเมื่อกรอกแล้วจะไม่รู้ว่าฟิลด์นี้ใส่อะไร
• Validation Real-time: บอกว่ากรอกผิดทันทีเมื่อออกจากฟิลด์ ไม่ต้องรอกดปุ่ม Submit
• Error Message ชัดเจน: อย่าบอกว่า "Invalid input" บอกว่า "Email format ไม่ถูกต้อง ตัวอย่าง: name@company.com"
• Privacy Policy Link: ใส่ลิงก์ Privacy Policy ใกล้ปุ่ม Submit เพื่อสร้าง Trust
• Button Text ชัดเจน: "Get My Free Guide" ดีกว่า "Submit"
• Mobile Responsive: Form ต้องใช้งานง่ายบนมือถือ ฟิลด์ใหญ่พอกด, Keyboard ขึ้นมาเป็น Type ที่ถูกต้อง (Email = Email Keyboard)

Contact Sync — ทำให้ข้อมูลเป็นปัจจุบันตลอดเวลา

หลังจากเชื่อม HubSpot + Webflow แล้ว Contact ที่สร้างใหม่จะเข้า HubSpot อัตโนมัติ แต่ถ้า Contact เก่าใน HubSpot มีการอัพเดทข้อมูล (เช่น เปลี่ยนบริษัท, เปลี่ยนเบอร์โทร) ต้องมีระบบ Sync กลับมายัง Webflow ด้วย

Two-way Sync vs One-way Sync

Type	คำอธิบาย	Use Case
One-way Sync (Webflow → HubSpot)	ข้อมูลจาก Webflow ส่งไป HubSpot เท่านั้น ไม่ส่งกลับ	เหมาะกับ Lead Capture ทั่วไป ไม่ต้องแสดงข้อมูล CRM บนเว็บ
Two-way Sync (Webflow ↔ HubSpot)	ข้อมูลส่งไปกลับได้ทั้งสองทิศทาง	เหมาะกับ Member Portal ที่ต้องแสดงข้อมูล Account, Purchase History

ส่วนใหญ่ใช้ One-way Sync ก็พอ เพราะข้อมูลหลักอยู่ใน HubSpot แล้ว เว็บ Webflow แค่เป็น Front-end สำหรับเก็บ Lead ใหม่ แต่ถ้าคุณมี Membership Site หรือ Client Portal ที่ต้องแสดงข้อมูล Deal, Invoice ต้องใช้ Two-way Sync ผ่าน Custom API

Lead Scoring — ให้คะแนน Lead เพื่อหา Hot Prospect

Lead Scoring คือการให้คะแนน Lead แต่ละคนตามพฤติกรรมและข้อมูล เพื่อบอกว่า Lead คนไหน Hot (พร้อมซื้อ) ควรให้ Sales ติดตามก่อน เพราะ Sales ไม่มีเวลาติดตาม Lead ทุกคน ต้องมีระบบช่วยกรอง

ตัวอย่างการให้คะแนน Lead

Behavior/Attribute	คะแนน	เหตุผล
กรอก Form ติดต่อ	+5	แสดงความสนใจเบื้องต้น
ดาวน์โหลด Case Study	+10	อยู่ Consideration Stage อยากเห็น Proof
เข้าหน้า Pricing	+15	ใกล้ Decision Stage
Request Demo	+20	พร้อมคุยกับ Sales แล้ว
เปิด Email	+2	ยังสนใจ
คลิกลิงก์ใน Email	+5	สนใจมาก
Job Title = C-level	+15	มี Decision Power
Job Title = Manager	+10	มี Influence
Company Size > 100 คน	+10	Budget สูงกว่า SME
Industry = Technology	+5	เหมาะกับสินค้า (ถ้าขาย Tech Product)
ไม่เปิด Email 30 วัน	-5	สนใจลดลง
Unsubscribe Email	-50	ไม่สนใจแล้ว

เกณฑ์การจัดกลุ่ม Lead:

• Cold Lead (0-20 คะแนน): ยังไม่พร้อม ให้ Email Nurture อัตโนมัติ
• Warm Lead (21-50 คะแนน): สนใจ แต่ยังไม่พร้อม ให้ Sales ส่ง Email เบาๆ
• Hot Lead (51+ คะแนน): พร้อมซื้อ ให้ Sales โทรติดตามทันที

HubSpot สามารถตั้งค่า Workflow ให้แจ้งเตือน Sales ทันทีเมื่อ Lead มีคะแนนเกิน 50 ผ่าน Email, Slack, หรือ SMS

Lead Scoring ใน HubSpot — Setup Guide

1. เข้า HubSpot → Settings → Properties → Lead Score
2. Create New Property: Type = Number, Name = "Lead Score"
3. สร้าง Workflow: Marketing → Workflows → Create Workflow
4. Trigger: เลือก Event เช่น "Form Submission", "Page View", "Email Opened"
5. Action: "Increment number property" → เลือก "Lead Score" → +5, +10, +15
6. Notification: ถ้า Lead Score > 50 ส่ง Email แจ้ง Sales

Email Automation — Nurture Lead จนกลายเป็นลูกค้า

Email Automation คือการส่งอีเมลอัตโนมัติตามเงื่อนไขที่กำหนด เช่น หลังจากคนดาวน์โหลด Case Study ส่งอีเมล Follow-up ใน 24 ชั่วโมง หลังจากเปิดอีเมล 3 ครั้งแต่ไม่คลิก ส่งอีเมลแนะนำ Webinar

Email Sequence ที่ควรมี

Sequence	Trigger	จำนวนอีเมล	ระยะเวลา
Welcome Sequence	Subscribe Newsletter	3 ฉบับ	Day 0, 3, 7
Lead Magnet Sequence	ดาวน์โหลด Lead Magnet	5 ฉบับ	Day 0, 1, 3, 7, 14
Demo Request Sequence	Request Demo	4 ฉบับ	Day 0, 1, 3, 7
Abandoned Cart Sequence	เพิ่มสินค้าแต่ไม่ซื้อ	3 ฉบับ	Day 1, 3, 7
Re-engagement Sequence	ไม่เปิด Email 30 วัน	3 ฉบับ	Day 30, 37, 44

ตัวอย่าง Lead Magnet Email Sequence (5 ฉบับ)

Email 1 (Day 0): ส่ง Lead Magnet + ต้อนรับ

• หัวข้อ: "นี่คือ [Lead Magnet] ที่คุณขอ + เนื้อหาเพิ่มเติมพิเศษ"
• เนื้อหา: ลิงก์ดาวน์โหลด + บอกว่าจะได้เรียนรู้อะไร + แนะนำตัว

Email 2 (Day 1): เนื้อหาเพิ่มเติม

• หัวข้อ: "เมื่อวานส่ง [Lead Magnet] ไป วันนี้มีเนื้อหาเพิ่มเติม"
• เนื้อหา: Blog Post ที่เกี่ยวข้อง หรือ Video Tutorial

Email 3 (Day 3): Case Study

• หัวข้อ: "ลูกค้าของเราใช้ [Solution] แล้วได้ผล [Result]"
• เนื้อหา: Case Study + Testimonial

Email 4 (Day 7): Webinar/Demo Invitation

• หัวข้อ: "สัปดาห์หน้าเรามี Webinar ฟรี: [Topic] ลงทะเบียนเลย"
• เนื้อหา: Webinar Detail + CTA ลงทะเบียน

Email 5 (Day 14): Soft CTA

• หัวข้อ: "พร้อมที่จะคุยกับทีมเราหรือยัง?"
• เนื้อหา: CTA ให้นัดเวลาคุย 30 นาทีฟรี

CRM Pipeline — ติดตาม Lead ในแต่ละ Stage

HubSpot CRM ช่วยให้คุณติดตาม Lead ว่าอยู่ขั้นตอนไหนของ Sales Process มี Deal Value เท่าไหร่ ควรปิดดีลเมื่อไหร่ ทำให้ Sales Forecast ได้ชัดเจน

Sales Pipeline Stages ตัวอย่าง

Stage	คำอธิบาย	Win Probability	Action ที่ต้องทำ
New Lead	เพิ่งกรอก Form มา	10%	Qualify Lead (Budget, Timeline, Authority)
Contacted	Sales ติดต่อแล้ว	20%	นัด Meeting/Demo
Qualified	Lead มี Budget + Timeline + Authority	40%	ส่ง Proposal
Proposal Sent	ส่ง Proposal แล้ว	60%	Follow-up ภายใน 3 วัน
Negotiation	กำลังต่อรองราคา/เงื่อนไข	80%	ปรับ Proposal ตามข้อเสนอ
Closed Won	ปิดดีลสำเร็จ	100%	Onboarding + ส่งต่อ Customer Success
Closed Lost	เสียดีล	0%	บันทึก Lost Reason + ส่งต่อ Marketing Nurture

การใช้ Pipeline ใน HubSpot:

• Drag and Drop: ลาก Deal จาก Stage หนึ่งไปอีก Stage เมื่อมีความคืบหน้า
• Deal Value: ระบุมูลค่าดีล เพื่อคำนวณ Revenue Forecast
• Close Date: ประเมินว่าจะปิดดีลเมื่อไหร่ เพื่อวางแผน Capacity
• Task Reminder: ตั้ง Task เช่น "Follow-up ภายใน 3 วัน" HubSpot จะแจ้งเตือนอัตโนมัติ

Analytics — วัดผล Campaign และ ROI

การเชื่อม HubSpot + Webflow ทำให้คุณวัดผลได้ตั้งแต่ต้นทางจนปลายทาง: Traffic → Form Submission → Lead → MQL → SQL → Deal → Customer

Metrics ที่ต้องดู

Metric	คำอธิบาย	Benchmark (B2B)
Traffic to Lead Conversion	จำนวน Lead / จำนวน Visitor	2-5%
Lead to MQL Conversion	จำนวน MQL / จำนวน Lead	10-20%
MQL to SQL Conversion	จำนวน SQL / จำนวน MQL	20-30%
SQL to Customer Conversion	จำนวนลูกค้า / จำนวน SQL	25-35%
Cost per Lead	ค่าโฆษณา / จำนวน Lead	100-500 บาท (Thailand)
Cost per Customer	ค่าโฆษณา / จำนวนลูกค้า	5,000-50,000 บาท
Customer Lifetime Value (LTV)	รายได้เฉลี่ยต่อลูกค้าตลอดอายุ	3-10x CAC

HubSpot Reports ที่ควรดู:

• Contact Lifecycle Report: ดูว่า Contact เดินทางจาก Lead → MQL → SQL → Customer ใช้เวลานานแค่ไหน
• Campaign Performance: Campaign ไหนให้ Lead เยอะสุด ถูกสุด
• Email Performance: Open Rate, Click Rate, Unsubscribe Rate
• Sales Pipeline: มี Deal เท่าไหร่ในแต่ละ Stage, Forecast Revenue
• Attribution Report: Lead มาจาก Channel ไหนมากสุด (Organic, Paid, Social, Referral)

Pricing Comparison — เลือกแพ็กเกจให้เหมาะกับธุรกิจ

HubSpot Plan	ราคา	Features	เหมาะกับใคร
Free	$0	Form + Basic CRM + Email (limit 2,000/เดือน) + 1 User	Startup, Solo Founder, SME ที่เริ่มต้น
Starter	$20/เดือน	Email Automation + Lead Scoring + 1,000 Contact	SME ที่มี Lead 100-1,000/เดือน
Professional	$890/เดือน	Advanced Automation + Workflow + A/B Testing + 2,000 Contact	Mid-market ที่ต้องการ Automation ซับซ้อน
Enterprise	$3,600/เดือน	Advanced Reporting + Team Management + 10,000 Contact	Enterprise ที่มีทีม Marketing/Sales ใหญ่

Integration Setup Cost:

• Native Integration (HubSpot Form Embed): ฟรี ทำเองได้
• Zapier: $20-100/เดือน ขึ้นกับจำนวน Task
• Custom API/n8n: ฟรี (Self-hosted) หรือ $5K-15K ถ้าจ้าง Agency ติดตั้ง

คำแนะนำ: เริ่มจาก Free Plan + Native Integration (ฟรี 100%) ทดสอบก่อน ถ้าใช้ได้ดีแล้ว Lead เยอะขึ้นค่อย Upgrade เป็น Starter หรือ Professional

Best Practices — เคล็ดลับจากประสบการณ์จริง

บทความแนะนำ

• Real-time Lead Scoring ด้วย Webflow + n8n + Clearbit
• Webflow Logic Updates 2025: Feature ใหม่ที่ควรรู้
• n8n Marketing Automation Examples: ตัวอย่างการทำ Automation จริง
• Programmatic SEO ด้วย Webflow + n8n: สร้างหน้า Landing Page อัตโนมัติ