CMS Development

HollandPark
Member

Formatting issues with embedded Hubspot form on Wordpress site

Hello,

We have a Hubspot customer enquiry form which we have embedded on every page of our Wordpress site. It should be nicely formatted in the centre at the bottom of each page, but occasionally - usually when you first enter our website - the form is displayed on the left hand side and the formatting and button style is wrong. 

I have seen there is this article: https://knowledge.hubspot.com/articles/kcs_article/forms/why-has-my-embedded-form-moved-on-my-page , but the example code in the article isn't quite what we need. How would I adjust this code so that it forces the form to render in the centre of the page? 

Any solutions very welcome - and please note I am quite new to coding! 

Many thanks,

Anna 

0 Upvotes
1 Reply 1
TRooInbound
Key Advisor

Formatting issues with embedded Hubspot form on Wordpress site

Hi @HollandPark,

 

yes, we have faced this issue before and did some Javascript fixed this is an issue with HubSpot embed a form.

  

the answer is in the HubSpot article which you provided in the question. just give the class to parent class of the form code as below mentions or paste my code with replacing your embed code,

 

<div class="form-section">

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    portalId: '295464',
    formId: '05e5896a-8cef-4l6a-b415-e4b6f3gh4ba8',
    css: '',
    target:'.form-section'
  });
</script>


</div>

 just compare your embed code with my code and do changes.

 

Thanks Team 
Team TRooInbound