ตั้งค่าและจัดรูปแบบฟอร์ม HubSpot บนเว็บไซต์ภายนอก

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

• การฝังรหัสแบบฟอร์มลงในหน้าเว็บที่มีอยู่
• การสร้างหน้าแบบฟอร์มแบบสแตนด์อโลนที่คุณสามารถเชื่อมโยงได้

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

หากคุณกำลังทำงานกับ WordPress ให้เรียนรู้วิธีแทรกแบบฟอร์มในโพสต์หรือหน้า WordPress ของคุณ

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

เพิ่มรหัสฝังแบบฟอร์ม

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

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

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

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

จัดรูปแบบฟอร์มฝังตัวของคุณในตัวแก้ไขแบบฟอร์ม

เมื่อจัดแต่งแบบฟอร์มฝังตัวของคุณด้วยเครื่องมือแก้ไขแบบฟอร์ม HubSpot คุณสามารถใช้ธีมหรือใช้สไตล์ที่กำหนดเองของคุณเองได้ 

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

จัดรูปแบบฟอร์มของคุณด้วยธีม (แบบดั้งเดิม)

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

วิธีจัดสไตล์แบบฟอร์มของคุณด้วยธีม: 

• ในบัญชี HubSpot ของคุณ ไปที่ การตลาด > แบบฟอร์ม
• วางเมาส์เหนือแบบฟอร์มแล้วคลิก  แก้ไข
• ในตัวแก้ไขแบบฟอร์มให้คลิกแท็บสไตล์และตัวอย่าง
• หากคุณกำลังแก้ไขแบบฟอร์มดั้งเดิมในบานหน้าต่างด้านซ้ายให้ล้างช่องทำเครื่องหมายเก็บธีมเก่าไว้  การดำเนินการนี้จะลบสไตล์ HubSpot เริ่มต้นเดิมที่ใช้กับแบบฟอร์มนี้ CSS หรือ JavaScript ที่กำหนดเองใดๆที่คุณได้เพิ่มลงในแบบฟอร์มจะไม่ทำงานอีกต่อไป ช่องทำเครื่องหมายนี้ใช้ไม่ได้กับแบบฟอร์มใหม่ที่สร้างขึ้นในบัญชีของคุณ 
• เลือกธีม
• ที่มุมขวาบนให้คลิกเผยแพร่หรือ อัปเดต

ใช้สไตล์ที่กำหนดเอง

นอกจากนี้คุณยังสามารถจัดสไตล์แบบฟอร์มในระดับที่ละเอียดมากขึ้น 

วิธีใช้สไตล์ที่กำหนดเอง: 

• ในบัญชี HubSpot ของคุณ ไปที่ การตลาด > แบบฟอร์ม
• วางเมาส์เหนือแบบฟอร์มแล้วคลิก  แก้ไข
• หากคุณกำลังแก้ไขแบบฟอร์มเดิมและมีการสมัครใช้งาน Marketing Hub Starter, Professional หรือ Enterprise ให้คลิกแท็บสไตล์และตัวอย่างในตัวแก้ไขแบบฟอร์ม 
  • ในบานหน้าต่างด้านซ้ายให้คลิกส่วน สไตล์ ที่นี่คุณสามารถกำหนดค่าความกว้างของเขตข้อมูลแบบฟอร์มตระกูลแบบอักษรขนาดแบบอักษรสีแบบอักษรและปุ่มแบบฟอร์มได้ สไตล์เหล่านี้ตั้งอยู่บนพื้นฐานของฟอร์มแต่ละแบบและจะแทนที่การตั้งค่าสไตล์ฟอร์มทั่วโลก
  • หลังจากปรับแต่งแบบฟอร์มแล้วที่มุมขวาบนให้คลิกเผยแพร่หรือ อัปเดต
    
    

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

จัดรูปแบบฟอร์มฝังตัวของคุณด้วย CSS ในสไตล์ชีตภายนอกของคุณ (ดั้งเดิม)

หากคุณมีการสมัครสมาชิก Marketing Hub หรือ Content Hub Professional หรือ Enterprise ด้วยบัญชี HubSpot ของคุณคุณสามารถฝังแบบฟอร์มเดิมของคุณเป็นแบบฟอร์ม HTML ดิบจากนั้นจัดสไตล์แบบฟอร์มฝังนี้ด้วย CSS ในสไตล์ชีตภายนอกของคุณ 

โปรดทราบ: คุณสามารถตั้งค่าแบบฟอร์มดั้งเดิมเป็น HTML ดิบได้เท่านั้น 

วิธีจัดรูปแบบฟอร์มฝังตัวของคุณด้วย CSS: 

• ในบัญชี HubSpot ของคุณ ไปที่ การตลาด > แบบฟอร์ม
• วางเมาส์เหนือแบบฟอร์มแล้วคลิก  แก้ไข
• ในตัวแก้ไขแบบฟอร์มให้คลิกแท็บสไตล์และตัวอย่าง
• คลิกเพื่อสลับสวิตช์ Set as raw HTML form  แบบฟอร์มจะแสดงผลเป็นองค์ประกอบ HTML แบบดิบบนหน้าเว็บภายนอกของคุณเมื่อเทียบกับภายใน iframe และสไตล์ HubSpot เริ่มต้นที่ใช้กับแบบฟอร์มจะถูกลบออก
• ที่มุมขวาบนให้คลิกเผยแพร่หรือ อัปเดต
• เพิ่มโค้ดฝังแบบฟอร์มลงในหน้าเว็บภายนอกของคุณ หากฝังแบบฟอร์มแล้วคุณต้องแทนที่โค้ดฝังที่มีอยู่ด้วยเวอร์ชันใหม่ที่ยังไม่ได้สไตล์นี้ หลังจากฝังแบบฟอร์มของคุณ:
  
  • คุณจะสามารถจัดรูปแบบฟอร์มในสไตล์ชีตภายนอกของคุณด้วย CSS
  • นอกจากนี้คุณยังสามารถแก้ไขรหัสการฝังแบบฟอร์มเพื่อทำการปรับแต่งแบบฟอร์มเพิ่มเติมได้ เนื่องจากแบบฟอร์ม HubSpot ถูกสร้างขึ้นด้วย JavaScript ไม่ใช่ HTML การปรับแต่งโค้ดฝังแบบฟอร์มจึงต้องอาศัยความช่วยเหลือจากนักพัฒนาซอฟต์แวร์ที่รู้วิธีทำงานกับ JavaScript