水平对齐 HubSpot 表单答案

【问题标题】：Align HubSpot form horizontally水平对齐 HubSpot 表单
【发布时间】：2016-02-19 23:26:21
【问题描述】：

我希望 HubSpot 表单水平对齐，如下所示。我在 hubspot 中使用了嵌入代码功能，它基本上链接到那里的 JavaScript。

我尝试摆弄这些参数http://designers.hubspot.com/docs/cos/hubspot-form-markup，但没有任何运气。

【问题讨论】：

请添加您的 HTML/CSS 或创建一个小提琴
这是嵌入到 html 中的表单
第一步是删除默认的 HS 样式。 knowledge.hubspot.com/articles/kcs_article/forms/… 之后，按照 Dom 模型，应用你需要的 CSS 类（比如 display: inline-block answer below）

标签： javascript css forms hubspot

【解决方案1】：

从这个链接开始，了解自定义 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>

为 css 提供一个空字符串将阻止 sn-p 加载默认的 hs-form 样式表。

恭喜！您现在可以使用自己的 CSS 样式表覆盖未设置样式的内容。在您自己的工作表中，定义您需要在 Designer 文档中提到的类：http://designers.hubspot.com/docs/cos/hubspot-form-markup#styling-forms

如果我们没有做到这一点，并且您在定义自己的 CSS 类方面需要帮助，请告诉我。

【讨论】：

太棒了，帮了大忙。出于某种原因，当我从 hubspot 复制出来时，它不包括 css 部分。这是固定的，所以我看到了很大的不同。我唯一不能做的事情是使用显示内联块将表单字段（hs-input）移动到水平的提交按钮（hs_submit）？

【解决方案2】：

由于我看不到您的代码，因此对元素名称进行假设。但这会解决问题。

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

【讨论】：

元素会在这里：designers.hubspot.com/docs/cos/hubspot-form-markup
当您对自己的代码足够熟悉以匹配它时，我不想翻遍这些烂摊子。

【解决方案3】：

这可以通过将 CSS 添加到特定的字段和按钮来完成 “显示：内联块；”或“浮动：左；”将通过为标签提供宽度来工作

【讨论】：