Hi,
I created a form and embedded it in a webpage but despite of not changing any value all of a sudden the form, it is coming in half of the page like someone added col-6 (bootstrap) to it
my form setting:
my imbedded code:
I found one class that is giving the form its property width despite of mentioning 100% in the form style setting.
any idea what am i doing wrong and how to avoid it?
here is the link
earlier it used to come in the style given in form but it recently happened.
in early form i can see iframe coming but in the form where the style is not coming no iframe is there
Place this code in JavaScript part of Hero banner’s module:
$(document).ready(function(){
$(‘#sm-full-register fieldset.form-columns-2’).css({‘max-width’: ‘100%’});
});
Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.
Hi @shadow42,
You could modify the form embed code. You have several approaches you can go.
1. Disable the default HubSpot form styling completely so the form will be styled by the external CSS(it has to contain form styling). To achieve this simply add
css: ""
to the embed code.
In the end it should look like this
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "xxxxxxx",
formId: "xxxxxxxxxx",
version: "V2_PRERELEASE",
css: ""
});
</script>
By doing so there won’t be loaded any styling which was applied in the form settings(you could also just hit the toggle box to render the form as raw HTML in the settings)
2. add custom CSS classes with
cssClass: "myCustomClass"
the embed code should look like this
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "xxxxxxx",
formId: "xxxxxxxxxx",
version: "V2_PRERELEASE",
cssClass: "myCustomClass"
});
</script>
3. Modify your CSS file and apply some additional form stylings.
As far as I can tell the fieldset is set to a max-width of 500px.
Add
fieldset{
max-width:100%;
}
to your CSS. I recommend either at the very bottom of your theme-override.css or forms.css(if you have one). If this shouldn’t work, try the good old sledgehammer called “!important” 
best,
Anton
then all styles that I am sending from the HubSpot form will go, right?
I don’t want to do that, especially the responsive part it would take a long time for me to write the responsive part for the form and I don’t want that.
earlier it used to come in the style given in form but it recently happened.
in the early form, I can see iframe coming but in the form where the style is not coming no iframe is there
Hi @shadow42,
let’s sa:yes and no.
If you disable the HubSpot styling it won’t load the styling - correct. But it’s recommended to implement the final form styling on the page you’re embedding the form in. So My approach/suggestion would be:
Load the form without styling, and paste your form styling in the CSS of the external page. It’s more reliable and can be a bit faster in terms of page speed.
Regarding the sudden change of form styling: I can only assume that there are changes made by HubSpot since there might be an update coming soon(or there was an update). Experienced some different style loadings last week on a HubSpot page I’m currently working on. Page load 1: Custom styling; Page load 2: HubSpot default styling.
best,
Anton