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

จัดกลางแบบฟอร์มบนเทมเพลต HubSpot

อัปเดตล่าสุด: กุมภาพันธ์ 13, 2025

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

การตลาด Hub   Professional , Enterprise
เนื้อหา Hub   Professional , Enterprise
Marketing Hub Basic เดิม

คุณสามารถจัดกึ่งกลางแบบฟอร์มบนเทมเพลต HubSpot โดยใช้โมดูลตัวเว้นวรรคในแนวนอนหรือ CSS ที่กำหนดเอง

การใช้โมดูลตัวเว้นระยะแนวนอน

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

 

การใช้ CSS แบบกำหนดเอง

  • ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
  • ในตัวค้นหาให้ค้นหาไฟล์ CSS ของคุณภายในโฟลเดอร์จากนั้นคลิกเพื่อเลือกในเครื่องมือแก้ไข
  • เพิ่มรหัสต่อไปนี้เพื่อจัดกึ่งกลางแบบฟอร์มทั้งหมดของคุณในเว็บไซต์ของคุณ:
/* To center the form within its module and applying a max-width */ form.hs-form, .hs_cos_wrapper .form-title { max-width:600px;display: block;margin:0 auto;}/* To center the form title within a form module */.hs_cos_wrapper .form-title {text-align:center;}/* To center the form submit button */.hs_submit {text-align:center;}                 
  • หากคุณต้องการจัดกึ่งกลางแบบฟอร์มเฉพาะคุณสามารถเพิ่มคลาสที่กำหนดเองลงในโมดูลแบบฟอร์มของคุณบนเทมเพลตของคุณแล้วปรับ CSS ของคุณให้ใช้กับโมดูลที่มีคลาสนั้นเท่านั้น ตัวอย่างเช่นหากคุณเพิ่มแบบฟอร์มศูนย์ชั้นเรียนที่กำหนดเองลงในโมดูลแบบฟอร์มของคุณบนเทมเพลตของคุณ CSS ของคุณจะมีลักษณะดังนี้:
/* To center the form within its module and applying a max-width */ form.hs-form, .center-form .hs_cos_wrapper .form-title { max-width:600px;display: block;margin:0 auto;}/* To center the form title within a form module */.center-form.hs_cos_wrapper .form-title {text-align:center;}/* To center the form submit button */.center-form.hs_submit {text-align:center;}                 
  • ที่มุมขวาบนให้คลิกเผยแพร่การเปลี่ยนแปลง
บทความนี้มีประโยชน์หรือไม่
แบบฟอร์มนี้ใช้สำหรับคำติชมเอกสารเท่านั้น เรียนรู้วิธีขอความช่วยเหลือจาก HubSpot