เชื่อม HubSpot กับ Webflow ให้สมบูรณ์: ติด HubSpot Tracking Code ที่ Footer, เลือกฟอร์มแบบ App ทางการ/Embed/Non-HubSpot Forms, ส่ง UTM/Consent ไปยัง HubSpot, ตั้ง Thank-you และ Events วัดผล, ฝัง Meetings/Chat และรันทดสอบบน staging ก่อน Publish เพื่อความถูกต้องและไม่ติดดัชนี.

Integrate HubSpot with Webflow: เวิร์กโฟลว์ครบตั้งแต่ Tracking → Forms → CRM → วัดผล

สำหรับทีม Marketing/RevOps/SEO/Dev เป้าหมายคือ “เก็บลีดสะอาด วัดผลได้ และปฏิบัติตามกฎหมายข้อมูลส่วนบุคคล” บทความนี้สรุป 4 วิธีเชื่อม HubSpot × Webflow, โค้ดตัวอย่าง, เช็กลิสต์ QA และอ้างอิงทางการ

สรุปวิธีเชื่อมต่อ (เลือกตามบริบท)

ขั้น 1) ติดตั้ง HubSpot Tracking Code บน Webflow

1. ไปที่ Project Settings → Custom code ของ Webflow แล้ววางโค้ด HubSpot ใน Footer code (ก่อนปิด </body>)
2. Publish ไป staging (subdomain webflow.io) เพื่อตรวจว่าโหลดสคริปต์ได้

การติดที่ Footer เป็นไปตามคำแนะนำของ HubSpot: “วางก่อนปิด </body>” และ Webflow ก็รองรับการเพิ่มโค้ดในส่วน Footer ของทั้งไซต์ (HubSpot, Webflow).

ขั้น 2) เลือกวิธีส่งฟอร์มเข้า HubSpot

2.1 ใช้ “HubSpot App” บน Webflow (แนะนำสำหรับทีมการตลาด)

• เชื่อมบัญชี HubSpot → เลือกฟอร์ม → ฝัง/แมปฟิลด์ → เปิด Site tracking/Chat ได้ภายในแอปเดียว
• รองรับการแมป Webflow Forms → HubSpot properties โดยไม่ต้องเขียนโค้ด

เอกสาร, App และรุ่นปรับปรุง HubSpot v2 (Beta)

2.2 ฝัง HubSpot Forms แบบ Embed

<!-- วางในองค์ประกอบ Embed ของ Webflow -->
<script charset="utf-8" type="text/javascript" src="https://js.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
  region: "na1",
  portalId: "XXXXXX",
  formId: "aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee"
});
</script>

ต้องมี Tracking Code บนหน้านั้น และสามารถสไตล์ผ่านตัวแก้ไขฟอร์มหรือ CSS ภายนอกได้ (HubSpot, Troubleshoot).

2.3 ใช้ Non-HubSpot Forms (จับฟอร์ม Webflow เดิม)

• เปิดการเก็บ Non-HubSpot Forms ใน HubSpot และให้มี Tracking Code บนหน้า
• ข้อกำหนดสำคัญ: ฟอร์มต้องเป็น HTML <form> จริง, ไม่อยู่ใน <iframe>, และโหลดมากับหน้า (ไม่เพิ่มภายหลังด้วย JS) (FAQ ล่าสุด)

ขั้น 3) ส่ง UTM/Consent/Source ให้ HubSpot

<!-- ใส่ใน Footer code ของไซต์ -->
<script>
// เก็บ UTM แรกที่เห็น
(function(){
  const p = new URLSearchParams(location.search);
  const keys = ['utm_source','utm_medium','utm_campaign','utm_term','utm_content'];
  let first = JSON.parse(localStorage.getItem('first_utm')||'{}');
  if(!first.utm_source && p.get('utm_source')) {
    first = Object.fromEntries(keys.map(k => [k, p.get(k)||'']));
    localStorage.setItem('first_utm', JSON.stringify(first));
  }
  window.__vxbUTM = { now:Object.fromEntries(keys.map(k => [k, p.get(k)||''])), first };
})();

// ใส่ลง hidden fields ตอนฟอร์มเรนเดอร์ (HubSpot/Non-HubSpot)
document.addEventListener('DOMContentLoaded', () => {
  const fill = (form) => {
    const d = window.__vxbUTM || {};
    const put = (name, val) => {
      let el = form.querySelector(`[name="${name}"]`);
      if(!el){ el = document.createElement('input'); el.type='hidden'; el.name=name; form.appendChild(el); }
      el.value = val||'';
    };
    ['utm_source','utm_medium','utm_campaign','utm_term','utm_content'].forEach(k => put(k, d.now?.[k] || d.first?.[k]));
    put('referrer', document.referrer||'');
  };
  document.querySelectorAll('form').forEach(fill);
});
</script>

ขั้น 4) ฝัง Meetings/Chat ของ HubSpot

• Meetings widget: สร้างหน้า Meeting ใน HubSpot แล้วก๊อปโค้ดฝังลง Webflow (ผ่าน Embed) เพื่อให้ลูกค้านัดเวลาได้ทันที (HubSpot Meetings)
• Chat/Inbox: ใช้ App หรือวางสคริปต์ใน Site Footer เพื่อเปิดแชตและบันทึกบทสนทนาเข้าระบบ

ขั้น 5) วัดผล (Thank-you, GA4, รายงาน HubSpot)

• สำหรับ Webflow Forms: ตั้ง Redirect URL ไปหน้า Thank-you เพื่อวัดผล (Webflow Forms support redirect) (Webflow Forms)
• ตั้ง GA4 event (เช่น generate_lead) บนหน้า Thank-you ควบคู่รายงานใน HubSpot
• ตั้งค่าวิวแดชบอร์ด HubSpot: ข้อมูลแคมเปญ, แหล่งที่มา, อัตราคอนเวิร์ชันฟอร์ม

เช็กลิสต์ QA ก่อนขึ้นโปรดักชัน

อ้างอิงภายนอก (ทางการ/ควรอ่าน)

• HubSpot — ติดตั้ง Tracking Code: knowledge.hubspot.com
• HubSpot — Forms บนเว็บไซต์ภายนอก (Embed): knowledge.hubspot.com
• HubSpot — Non-HubSpot Forms & FAQ: use non-hubspot forms, FAQ
• HubSpot — Meetings widget (ฝังบนเว็บ): knowledge.hubspot.com
• Webflow — เพิ่ม Custom code (Head/Body): help.webflow.com
• Webflow — HubSpot App ทางการ: help.webflow.com, webflow.com/apps

บริการที่เกี่ยวข้อง (Internal Links)

• ออกแบบ/พัฒนา Webflow + เชื่อม HubSpot
• UX/UI สำหรับฟอร์มที่คอนเวิร์ต
• Renovation ความเร็ว/SEO/การติดตามผล
• บริการทั้งหมด

อ่านต่อ (บทความที่เกี่ยวข้อง)

• Webflow Staging Workflow
• A/B Testing บน Webflow
• อัตโนมัติ Lead Nurturing ด้วย n8n

FAQ

ต้องวาง Tracking Code ตรงไหนใน Webflow?
แนะนำวางใน Footer code (ก่อนปิด </body>) เพื่อให้โหลดทุกหน้า ตามคำแนะนำของ HubSpot และคู่มือ Webflow

Non-HubSpot Forms ใช้กับฟอร์ม Webflow ได้ไหม?
ได้ หากฟอร์มเป็นแท็ก <form> จริง ไม่อยู่ใน <iframe> และ Tracking Code โหลดบนหน้านั้น

อยากให้นัดหมายเข้า CRM อัตโนมัติ?
ฝัง Meetings widget ของ HubSpot บนหน้า Webflow แล้วนัดหมายจะผูกกับ Contact โดยตรง

อัปเดตล่าสุด: 12 Aug 2025

เกี่ยวกับผู้เขียน

Vision X Brain Team — ที่ปรึกษา Website/SEO/CRO & Webflow/RevOps เราเชื่อม HubSpot × Webflow แบบวัดผลได้ ตั้งแต่ Tracking/Forms/UTM/Consent → รายงาน และเทสบนสเตจจิงเพื่อความมั่นใจ