在HubSpot模板上居中表單

您可以使用水平空格模板或自定義CSS在HubSpot模板上居中表單。

使用水平分隔器模塊

• 在 HubSpot 帳戶中，進入「行銷」>「檔案和範本」>「設計工具」。
• 按一下尋找工具中的範本名稱以編輯。
• 在右側的檢查器中，按一下+新增以插入兩個新的水平間隔模組；一個在表單模組的左側，另一個在右側。

使用自定義CSS

• 在 HubSpot 帳戶中，進入「行銷」>「檔案和範本」>「設計工具」。
• 在尋找器中，我將CSS檔案放在資料夾中，然後按一下它在編輯器中選擇它。
• 添加以下代碼以將網站上的所有表單居中：

/*要在其模組中對中表單，並應用最大寬度*/
form.hs-form,
.hs_cos_wrapper .form-title {
max-width: 600px;
 display: block;
 margin: 0 auto;
}

/*要在表單模組中對中表單標題*/
.hs_cos_wrapper .form-title {
text-align: center;
}

/*對中表單提交按鈕*/
.hs_submit {
    text-align: center;
}

• 如果要將特定表單居中，您可以在範本上的表單模組中新增 自訂類別，然後調整CSS以僅適用於具有該類別的模組。  例如，如果您在模板上的表單模組中新增自訂類中心表單，您的CSS將如下所示：

/*要將表單放在其模組中，並套用最大寬度*/
form.hs-form,
 .center-form .hs_cos_wrapper .form-title {
max-width: 600px;
 display: block;
 margin: 0 auto;
}

/*要將表單標題放在表單模組中*/
.center-form .hs_cos_wrapper .form-title {
text-align: center;
}

/*要將表單提交按鈕放在中心*/
.center-form .hs_submit {
    text-align: center;
}

• 按一下右上角的「發佈變更」。