Adding Wistia video to my blog posts breaks my forms

[donnakat1]

I am using Wistia videos in some of my blog posts. I have tried encapsulating the videos in rows and divs but no matter what it breaks the placement of the form embed positioning. All forms appear at the bottom of the page. Example here. Hubspot support sent this meesage: Here is the link to our Developers' documentation on customizing form embed code Javascript: http://developers.hubspot.com/docs/methods/forms/advanced_form_options
 
Please ask your designer to specify a target attribute for each form. This jQuery style selector will place the form into the desired existing element on the page.

Not sure what this means. This is what I did that didn't work:

<div class="mini-form">
<script src="//js.hsforms.net/forms/current.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">// <![CDATA[
hbspt.forms.create({
    portalId: 'my-portal-id',
    formId: 'my-form-id',
    target: 'mini-form'
  });
// ]]></script>

Does anyone have any insight into what I am actually supposed to do to fix this?
</div>

[Ty · Accepted solution]

Hi @donnakat1,

I think you have your target attribute mistyped. If i run the create form code you did:

hbspt.forms.create({
    portalId: 'your-portal-id',
    formId: 'your-form-id',
    target: 'mini-form'
  });

It returns an error because it can't find the div 'mini-form'. 

All you're missing is the class declaration, I ran this through the console and got this result:

hbspt.forms.create({
    portalId: 'your-portal-id',
    formId: 'your-form-id',
    target: '.mini-form'
  });

So try adding the class declaration and let me know if this fixes you issue!

Hope this helps!

-- Ty

[donnakat1]

Thank you so much! So the moral of the story is get more sleep so you can see when you are missing a period.

[Ty]

It's always the small stuff that causes the biggest hangups! 🙂