水平对齐HubSpot表单

时间:2016-02-19 23:26:22

标签: javascript css forms hubspot

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

out of box hubspot form & what i would like

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

3 个答案:

答案 0 :(得分: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 提供空字符串会阻止代码段加载默认的hs-form样式表。

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

如果我们错过了标记,并且您需要帮助来定义自己的CSS类,请告诉我们。

答案 1 :(得分:0)

对元素名称进行假设,因为我无法看到您的代码。但这可以解决问题。

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

答案 2 :(得分:0)

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