ตั้งค่าและจัดรูปแบบฟอร์ม 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 ที่กำหนดเองใดๆที่คุณได้เพิ่มลงในแบบฟอร์มจะไม่ทำงานอีกต่อไป ช่องทำเครื่องหมายนี้ใช้ไม่ได้กับแบบฟอร์มใหม่ที่สร้างขึ้นในบัญชีของคุณ 
• เลือกธีม
• ที่มุมขวาบนให้คลิกเผยแพร่หรือ อัปเดต

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

หากคุณมีการสมัครสมาชิก Marketing Hub Starter, Professional หรือ Enterprise ด้วยบัญชี HubSpot ของคุณคุณยังสามารถจัดสไตล์แบบฟอร์มฝังตัวในระดับที่ละเอียดมากขึ้นได้อีกด้วย

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

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

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

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

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

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