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

คุณสามารถจัดกึ่งกลางแบบฟอร์มบนเทมเพลต 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;}                 
 

• ที่มุมขวาบนให้คลิกเผยแพร่การเปลี่ยนแปลง