CODEWITHSUNDEEP
javascriptjqueryhubspot
rsnyder
rsnyder

Reputation: 395

HubSpot Embedded Form - Move labels below the inputs breaking form

I'm manipulating the DOM with jquery in the HubSpot form embed code. I'm trying to move the labels below the inputs to achieve the CSS styles I need.

<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>

However, I'm running into an issue. With an error that's not very helpful. When a field isn't valid, then trying to go back into the field to edit, I get the below JS error. One error for each letter I type.

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)

When I remove the label insertAfter() script those errors go away. I also posted in the HubSpot community, I will update answers each place.

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

Any help would be appreciated. Thanks!

Upvotes: 0

Views: 747

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

Ideally, the form should be edited on the HubSpot side and not so much on a code level. If you really want to hack it on a code level, simply increase your specificity to override the HubSpot form default configured styles.

Example:

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

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

Where .someParentClass is a parent of the HubSpot form and [id*="label-xxx"] is the label you want to move down.

Upvotes: 0

Related Questions