We have this Salesforce form on the footer of our website:
I'm trying to replace it with a HubSpot form, but I can't get it to look right. The form looks all scrunched and misaligned like this:
If I try increasing the width of the form, then the input containters overlap like so:
Anyone have ideas on how to get it to look like the original? Here's the CSS code I have in there right now which makes it look like the second screenshot:
I believe in order to custom style your form in CSS you need to take care of these three points:
These options are only available for forms created using the marketing form builder in Marketing Hub and CMS Hub Professional or Enterprise subscriptions.
I am using the "hbspt.forms.create" stuff you mentioned. I embedded the HubSpot form as a raw HTML form. Now I'm trying to get the HubSpot form (second and third image) to look like the original form we had built through Salesfroce (first image).
The code I posted is the custom CSS code I'm using to style the raw HTML form, but I can't get it to look right. Do you know how to get the input containers to either stop overlapping or getting misaligned (examples in the second and third images)?
Did you try using "target attribute" in your form styling ?
In the form embed code, add a comma (,) after the formId attribute value, then enter a new line and enter target: '[container name]' .For example, you can force the form to render in a container on the page with the CSS class of the sidebar.
Or
Multiple forms embed codes added to same <div> tag
To ensure the forms load and display correctly, add the form InstanceId attribute and specify a unique value for each form embed code.
In the form embed code, add a comma (,) after the form Id attribute value, then enter a new line and enter form InstanceId: '[number]' .It's recommended to number each form in the order it appears on the page (e.g., '1' for the first form, '2' for the second form, etc.).