Stop form adding field sets

[JockSOTech]

Hi,

One of our magento2 sites creates a form using HubSpot, we are adding it to the page via JavaScript, and using just the raw html which I have overridden within the site files.

We have recently added a french version of the site, which uses the same form layout, and as such a new form has been created, which should work in the same way. Instead for some reason HubSpot is wrapping some of the fields in a <fieldset> tag, which is then interfering with the styles that were applied to the first form that should just apply to these ones no problem.

I can't change css for one without changing the other, but I know that the form will work just fine if I can remove the fieldsets. Can anyone please advise on this?

Here is roughly what the html looks like for two sites:

English site (working fine)

<form>

    <div class="hs_firstname hs-form-field" data-reactid=".hbspt-forms-0.1:$0">

        <label />

        <input />

    </div>

</form>

French site (needs removal of fieldset)

<form>

    <fieldset class="form-columns-1" data-reactid=".hbspt-forms-0.1:$0">

        <div class="hs_firstname hs-form-field">

            <label />

            <input />

        </div>

    </fieldset>

</form>

Thanks in advance anyone that can help.

[WendyGoh]

Hey @JockSOTech,

If both form have been set up the same way, I would expect it to be rendering the same as well. In this case, do you mind sharing with me:

1. Your magento2 sites

2. The first form and the french form name?

3. Your HubSpot portal ID

[JockSOTech]

Hi Wendy,

Thanks for the reply. I'm not sure if the forms have been set up in the same way, as they were set up by our client; I'm the developer importing the form they've set up.

Here is the information you've asked for -

Magento2 Sites:

English site - https://www.collingwoodlighting.com/warranty-registration

French site - http://staging.collingwoodlighting.com/warranty-registration (you will likely need to toggle the flag on the top right of the page to the Frence flag to see the different form.

English Form Name - Warranty Form (3bab12ff-c47b-4014-8ebf-6ada21bc0fb6)

French Form Name - French Warranty Registration Form version 1.0 [French] (2d3217e8-54da-4b51-9144-9a1786cf965e)

HubSpot Portal ID - 4331855

Thanks for your help,

Jock

[WendyGoh · Accepted solution]

Hey @JockSOTech,

Digging into this, I'm able to confirm that when a form have two columns, the fields will be wrapped in a fieldset. While I do noticed that the Warranty Form have two columns (date of install + last name and postcode + product 1) and fields aren't being wrapped in a fieldset. When I clone the form to hstest Form (clone) > Hit the published unpublished changes > I'm also seeing the fields being wrapped in a fieldset. Here's the testing page that has hstest Form (clone) on it: https://info.wendyggx.com/testpage1234

That said, if you'd like to change the fieldset of a particular form without changing the other form, you can target it like this:

form#hsForm_80ed21b3-d7c3-41eb-96b0-fd233be5db6f fieldset { } 

Using the form id. 

Do give it a try and let me know if this works for you.

[JockSOTech]

Hi Wendy,

Thanks for your advice on this, I have got the form working as I need it to.

Best Regards,

Jock