Moving field labels after input elements causes JavaScript errors in HubSpot forms

Other Questions HubSpot
1

I’m working with a HubSpot embedded form and trying to customize its layout using jQuery. My goal is to position the labels underneath the input fields instead of above them for better styling.

hbspt.forms.create({
    portalId: "12345",
    formId: "abcd",
    cssClass: '',
    cssRequired: 'input__field mandatory',
    errorClass: 'input__field',
    errorMessageClass: 'validation-error',
    submitButtonClass: 'submit-button',
    onFormReady: function ($form) {
        $('form').wrapInner('<div class="field-container main_form"></div>')
        $('.hs-form-field').addClass('input-group col-lg-12');
        $('input').addClass('input__field');
        $('label').addClass('input__label');
        $(".input input").each(function () {
            var element = $(this);
            element.parent().parent().find('label').insertAfter(element);
        })
    }
});

The problem happens when form validation kicks in. After a field shows an error and I try to edit it again, I get this console error for every character 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)

If I comment out the insertAfter() line, the errors disappear completely. It seems like moving the labels breaks something in HubSpot’s form handling. Has anyone found a way to reposition labels without breaking the form functionality?

2

classic hubspot headache! use flexbox on the parent container with flex-direction: column-reverse instead of moving dom elements. the visual order changes but hubspot’s js still finds everything where it expects. this worked on a client project a few months back.

3

I hit this exact problem when customizing forms for a client portal. Here’s what’s happening: HubSpot keeps track of form elements internally, but when you move stuff around with jQuery’s insertAfter(), you’re breaking that connection between what HubSpot expects and what’s actually there. Don’t move the elements - use CSS Grid instead. Set up grid-template-areas on your form container, then use grid-area to put inputs in the first row and labels in the second. You get the layout you want, but HubSpot’s validation keeps working because everything stays in its original spot structurally.

4

Had the same issue customizing HubSpot forms last year. The problem is HubSpot’s React validation expects labels to stay in their original DOM structure. When you use insertAfter() to move labels around, you’re breaking those parent-child relationships the validation system needs. Don’t actually move the labels in the DOM. Use CSS positioning instead. Add position: relative to your .hs-form-field containers, then absolutely position the labels below the inputs. You get the layout you want without breaking HubSpot’s validation. Another trick that worked for me: create pseudo-elements with CSS ::after to show label text below inputs, then hide the original labels with visibility: hidden. Keeps the form structure completely intact.

5

Been dealing with HubSpot form customization for three years and hit this exact problem multiple times. HubSpot keeps internal references to DOM elements for validation, so when you move labels around with insertAfter(), those references break. Skip the DOM manipulation entirely. Use CSS transforms with flexbox instead. Set your form fields to display flex with column direction, then use transform: translateY() to move labels below inputs visually while keeping them in their original DOM spot. This way HubSpot’s element mapping stays intact and you get the layout you want. Validation keeps working because it can still find everything where it expects it. Plus you’ll avoid those annoying React reconciliation errors from constantly mutating the DOM.