水平對齊HubSpot表單

我希望HubSpot表單像下圖一樣水平對齊。我在hubspot中使用了嵌入代碼功能，該功能基本上鍊接到那裏的JavaScript。水平對齊HubSpot表單

我試着用這些PARAMATERS擺弄左右，但http://designers.hubspot.com/docs/cos/hubspot-form-markup我的運氣不好。

2016-02-19 mikenichols

請添加HTML/CSS或創建一個小提琴 – toolbox3

這是嵌入到HTML <腳本的charset =「UTF-8」型=「文/ JavaScript的」形式SRC = 「// js.hsforms.net/forms/v2.js」> – mikenichols

第一步是刪除默認的HS造型。 http://knowledge.hubspot.com/articles/kcs_article/forms/how-do-i-style-my-embedded-form之後，遵循Dom模型並應用您需要的CSS類（如display：inline-block回答下面） –

對元素名稱做出假設，因爲我看不到您的代碼。但這會做到這一點。

label, 
button { 
    display: inline-block; 
} 
input { 
    display: inline-block; 
    width: 30%; 
}

來源

2016-02-19 23:31:19 amflare

這些元素將在這裏：http://designers.hubspot.com/docs/cos/hubspot-form-markup – mikenichols

我不喜歡通過這個混亂拖網，當你足夠熟悉你的代碼來匹配它。 – amflare

開始與這個鏈接瞭解定製HubSpot形式嵌入代碼的來龍去脈：http://developers.hubspot.com/docs/methods/forms/advanced_form_options

你無樣式表單JS會是這個樣子：

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> 
<script> 
    hbspt.forms.create({ 
     portalId: 'XXXXXXX', 
     formId: 'XYZXYZXYZXYZ', 
     css: '' // <-- Intentionally empty string! 
    }); 
</script>

提供了一個空string for css將阻止該代碼段加載默認的hs-form樣式表。

恭喜！現在您可以使用自己的CSS樣式表覆蓋未格式化的內容。在您自己的工作表中，在Designer文檔中定義您需要在此提及的類：http://designers.hubspot.com/docs/cos/hubspot-form-markup#styling-forms

如果我們缺少標記並且需要幫助來定義自己的CSS類，請告訴我。

來源

2016-02-20 22:42:33

真棒，幫助了巨大。出於某種原因，當我從集中點複製出來時，它不包含css部分。這是固定的，所以我看到了很大的差異。我唯一不能做的就是使用顯示內嵌塊將提交按鈕（hs_submit）移動到水平字段（hs-input）。 – mikenichols

這可以通過將CSS添加到特定字段和按鈕「display：inline-block;」來完成或「浮動：離開」;將通過向唱片公司提供寬工作

來源

2017-02-01 07:27:55

水平對齊HubSpot表單

回答

相關問題