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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

โปรดทราบ: คุณสามารถตั้งค่าแบบฟอร์มดั้งเดิมเป็น HTML ดิบได้เท่านั้น เรียนรู้เพิ่มเติมเกี่ยวกับการจัดแต่งรูปแบบฝังตัวของคุณด้วย CSS ในตัวแก้ไขแบบฟอร์มที่อัพเดทแล้ว 

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

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