ปรับสไตล์และฝังแบบฟอร์ม HubSpot บนเว็บไซต์ภายนอก

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

การฝังแบบฟอร์มช่วยให้มั่นใจได้ว่าการส่งข้อมูลจะซิงค์กับบัญชี HubSpot ของคุณโดยตรงซึ่งคุณสามารถจัดการรายชื่อผู้ติดต่อเรียกใช้ระบบอัตโนมัติและวิเคราะห์ประสิทธิภาพได้ ตัวอย่างเช่นคุณสามารถเพิ่มแบบฟอร์ม HubSpot ลงในหน้าผลิตภัณฑ์บนเว็บไซต์ของบริษัทเพื่อบันทึกคำขอสาธิตและติดตามผลด้วยอีเมลอัตโนมัติ 

หากแบบฟอร์มของคุณถูกสร้างขึ้นในตัวแก้ไขแบบฟอร์มดั้งเดิมเรียนรู้วิธีตั้งค่าและจัดรูปแบบแบบแบบฟอร์มดั้งเดิมบนไซต์ภายนอก

ก่อนที่คุณจะเริ่มต้น

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

ข้อกำหนด

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

ข้อจำกัดและข้อพิจารณา

• การตั้งค่าแบบฟอร์มของคุณเป็นแบบฟอร์ม HTML ดิบไม่สามารถใช้ได้ในตัวแก้ไขแบบฟอร์มที่อัปเดตแล้ว เฉพาะแบบฟอร์มที่สร้างโดยใช้ตัวแก้ไขแบบฟอร์มดั้งเดิมเท่านั้นที่สามารถตั้งค่าเป็น HTML ดิบได้
• การปรับแต่งโค้ดฝังตัวของฟอร์มต้องอาศัยความช่วยเหลือจากนักพัฒนาซอฟต์แวร์ที่รู้วิธีทำงานกับ JavaScript การปรับแต่งขั้นสูงเพิ่มเติมสามารถทำได้ด้วยแบบฟอร์มที่สร้างขึ้นเองและ HubSpot Forms API

จัดสไตล์แบบฟอร์มของคุณ 

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

1. ในบัญชี HubSpot ของคุณ ไปที่ การตลาด > แบบฟอร์ม
2. สร้างแบบฟอร์มใหม่หรือวางเมาส์เหนือแบบฟอร์มที่มีอยู่แล้วคลิกแก้ไข 
3. ในเมนูแถบด้านข้างซ้ายให้คลิกไอคอนstylesการจัดแต่งทรงผม
4. จากแผงรูปแบบฟอร์มคุณสามารถปรับแต่งองค์ประกอบต่อไปนี้:
   • ฟิลด์: ปรับแต่งฟิลด์รวมถึงพื้นหลังและเส้นขอบ นอกจากนี้คุณยังสามารถปรับแต่งแบบอักษรขนาดตัวอักษรและสีสำหรับป้ายกำกับของคุณรวมถึงสีสำหรับข้อความช่วยเหลือตัวยึดตำแหน่งและข้อความแสดงข้อผิดพลาดของคุณ 
   • ปุ่ม: ปรับแต่งความสูงของปุ่มการปัดเศษมุมพื้นหลังการไล่ระดับสีและเพิ่มเงาแบบหยดลงในปุ่ม นอกจากนี้คุณยังสามารถปรับแต่งแบบอักษรขนาดตัวอักษรและสีสำหรับข้อความบนปุ่มได้อีกด้วย 
   • ย่อหน้า (Rich Text): ปรับแต่งแบบอักษรขนาดตัวอักษรและสีสำหรับข้อความเนื้อหาของคุณ 
   • หัวเรื่อง: ปรับแต่งแบบอักษรและสีข้อความของหัวเรื่องของคุณ คุณสามารถเลือกที่จะเพิ่มเงาแบบหล่นลงในข้อความส่วนหัวของคุณ 
   • พื้นหลัง: ปรับแต่งพื้นหลังสำหรับขั้นตอนแบบฟอร์มและแบบฟอร์มของคุณ คุณสามารถเลือกที่จะตั้งค่าสีพื้นหลังหรือใช้รูปภาพสำหรับพื้นหลังก็ได้ คุณสามารถใช้ผู้ช่วย AI เพื่อสร้างภาพได้ นอกจากนี้คุณยังสามารถเลือกที่จะกำหนดเส้นขอบสำหรับแบบฟอร์มของคุณ
   • แถบความคืบหน้า: ปรับแต่งแถบความคืบหน้าในแบบฟอร์มของคุณรวมถึงสีของเส้นความคืบหน้าและแบบอักษรของแถบความคืบหน้า 

แชร์หน้าแบบฟอร์มแบบสแตนด์อโลน 

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

วิธีคัดลอกลิงค์สำหรับแชร์:

1. ในบัญชี HubSpot ของคุณ ไปที่ การตลาด > แบบฟอร์ม
2. วางเมาส์เหนือแบบฟอร์มแล้วคลิกแก้ไข
3. ที่ด้านบนขวาให้คลิกตรวจสอบและอัพเดท
4. ที่แผงด้านขวาที่ด้านล่างให้คลิกอัพเดท
5. ในกล่องโต้ตอบให้คลิกคัดลอกลิงก์แชร์
6. ที่ด้านล่างให้คลิกคัดลอก การดำเนินการนี้จะคัดลอกที่อยู่เว็บของหน้าไปยังคลิปบอร์ดของคุณ
7. ในเบราว์เซอร์ให้เปิดหน้าต่างหรือแท็บใหม่และวาง URL ของหน้าเว็บในแถบที่อยู่เพื่อโหลด นอกจากนี้คุณยังสามารถแชร์ URL ของหน้าแบบฟอร์มกับผู้อื่นได้โดยตรงเพื่อให้พวกเขาเข้าถึงแบบฟอร์มได้

คัดลอกรหัสการฝังแบบฟอร์ม

ฝังแบบฟอร์มของคุณลงในหน้าเว็บภายนอกของคุณโดยคัดลอกโค้ดฝังแบบฟอร์มและวางลงในหน้าเว็บภายนอกของคุณ ในการติดตามการวิเคราะห์สำหรับแบบฟอร์มฝังตัวของคุณรหัสติดตาม HubSpot ของคุณจะต้องติดตั้งบนหน้าเว็บภายนอกที่คุณฝังแบบฟอร์ม HubSpot

วิธีคัดลอกโค้ดฝังตัว: 

1. ในบัญชี HubSpot ของคุณ ไปที่ การตลาด > แบบฟอร์ม
2. วางเมาส์เหนือแบบฟอร์มแล้วคลิก แก้ไข 
3. ที่ด้านบนขวาให้คลิกตรวจสอบและอัพเดท
4. ที่แผงด้านขวาที่ด้านล่างให้คลิกอัพเดท
5. ในกล่องโต้ตอบให้คลิกรับรหัสฝังตัว
6. บนแท็บรหัสฝังให้คลิกคัดลอก
7. วางโค้ดฝังลงในโมดูล HTML บนหน้าเว็บภายนอกของคุณ

เข้าถึงแบบฟอร์มรหัสนักพัฒนา

ฝังฟอร์มของคุณและปรับแต่งสไตล์โดยใช้ CSS ในสไตล์ชีตภายนอกของคุณ ด้วยวิธีนี้คุณสามารถแทนที่สไตล์เริ่มต้นใช้การจัดแต่งแบบละเอียดกับองค์ประกอบของแบบฟอร์มที่เฉพาะเจาะจงและตั้งกฎสากลสำหรับการจัดแต่งที่สอดคล้องกันในแบบฟอร์มที่ฝังอยู่ของคุณ ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีกำหนดสไตล์แบบกำหนดเองสำหรับฟอร์มแบบฝังโดยใช้ CSS 

ในการเข้าถึงรหัสนักพัฒนา: 

1. ในบัญชี HubSpot ของคุณ ไปที่ การตลาด > แบบฟอร์ม
2. วางเมาส์เหนือแบบฟอร์มแล้วคลิก แก้ไข 
3. ที่ด้านบนขวาให้คลิกตรวจสอบและอัพเดท
4. ที่แผงด้านขวาที่ด้านล่างให้คลิกอัพเดท
5. ในกล่องโต้ตอบให้คลิกรับรหัสฝังตัว
6. คลิกแท็บรหัสนักพัฒนา (ขั้นสูง)
7. หากต้องการยอมรับความเสี่ยงที่การเปลี่ยนแปลงที่เกิดขึ้นภายนอก CSS หรือ JavaScript อาจทำให้แบบฟอร์มของคุณเสียหายให้เลือกฉันเข้าใจความเสี่ยงแสดงช่องทำเครื่องหมายรหัสให้ฉันดู
8. ที่ด้านล่างให้คลิกคัดลอก
9. เพิ่มโค้ดฝังแบบฟอร์มลงในหน้าเว็บภายนอกของคุณ หลังจากฝังแบบฟอร์มแล้วคุณจะสามารถจัดสไตล์แบบฟอร์มในสไตล์ชีตภายนอกของคุณด้วย CSS ได้
   • ตัวแปร CSS ที่คุณสามารถแทนที่ได้จะแสดงอยู่ในบทความนี้
   • สไตล์ทั่วโลกจะแทนที่สไตล์ระดับบนสุดในทุกรูปแบบที่ฝังไว้ของคุณ นอกจากนี้คุณยังสามารถกำหนดเป้าหมายแต่ละองค์ประกอบของแบบฟอร์มของคุณเช่นแถวองค์ประกอบแบบฟอร์มปุ่มส่งหรือส่วนหัวของแบบฟอร์ม