时间戳

首页 > 解决方案 > HubSpot 嵌入式表单 - 将标签移动到输入中断表单下方

javascript - HubSpot 嵌入式表单 - 将标签移动到输入中断表单下方

问题描述

我在 HubSpot 表单嵌入代码中使用 jquery 操作 DOM。我正在尝试移动输入下方的标签以实现我需要的 CSS 样式。

<script>
    hbspt.forms.create({
        portalId: "xxxxx",
        formId: "xxxx",
        cssClass: '',
        cssRequired: 'form__field required',
        errorClass: 'form__field',
        errorMessageClass: 'error',
        submitButtonClass: 'submitBTN',
        onFormReady: function ($form) {
            $('form').wrapInner('<div class="form-row form_block"></div>')
            $('.hs-form-field').addClass('form-group col-md-12');
            $('input').addClass('form__field');
            $('label').addClass('form__label');
            $(".input input").each(function () {
                var e = $(this);
                e.parent().parent().find('label').insertAfter(e);
            })
        }
    });
</script>

但是，我遇到了一个问题。有一个不是很有帮助的错误。当某个字段无效时，然后尝试返回该字段进行编辑，我收到以下 JS 错误。我输入的每个字母都有一个错误。

v2.js:4 Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
    at r (v2.js:4)
    at Object.processUpdates (v2.js:1)
    at Object.dangerouslyProcessChildrenUpdates [as processChildrenUpdates] (v2.js:2)
    at s (v2.js:3)
    at a.updateChildren (v2.js:3)
    at a._updateDOMChildren (v2.js:2)
    at a.updateComponent (v2.js:2)
    at a.receiveComponent (v2.js:2)
    at Object.receiveComponent (v2.js:3)
    at u._updateRenderedComponent (v2.js:2)

当我删除标签 insertAfter() 脚本时，这些错误就会消失。我也在 HubSpot 社区发帖，我会在每个地方更新答案。

https://community.hubspot.com/t5/APIs-Integrations/Move-labels-below-the-inputs-in-Embedded-Form/td-p/354385

任何帮助，将不胜感激。谢谢！

标签： javascriptjqueryhubspot

解决方案

理想情况下，表单应该在 HubSpot 端进行编辑，而不是在代码级别进行编辑。如果您真的想在代码级别破解它，只需增加您的特异性以覆盖 HubSpot 表单默认配置的样式。

例子：

.someParentClass .hs-form-field {
    position: relative;
}

.someParentClass [id*="label-xxx"] {
    position: absolute;
    bottom: -20px;
}

.someParentClassHubSpot 表单的父级在哪里，并且[id*="label-xxx"]是您要向下移动的标签。

推荐阅读