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

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

อัปเดตล่าสุด: 5 กันยายน 2025

สามารถใช้ได้กับการสมัครใช้บริการใดๆ ต่อไปนี้ ยกเว้นที่ระบุไว้:

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

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

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

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

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

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

The form editor with the left panel displaying styles options, including branding, fields, buttons, paragraph, heading, background, and the progress bar.

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

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

วิธีเข้าถึงโค้ดฝังตัว: 

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

ใช้ลิงก์แชร์เพื่อแชร์หน้าแบบฟอร์มแบบสแตนด์อโลน 

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

วิธีเข้าถึงลิงก์แชร์:

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

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

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

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

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

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

เนื้อหาที่เกี่ยวข้อง