Best practice for embedding hubspot form?

Developing with Prismic
1

Is there a best practice implementation for embedding a hubspot form within a custom type/slice?

Hubspot provides a pair of scripts for embedding a form on your page, ex.

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "5555555",
    formId: "5555555-5555-5555-5555-555555555555"
  });
</script>```
3

Hello @ianboyte, you can create a custom code component in your Custom Types:

4

Hey @ianboyte, I've done this for many of my clients and the solution doesn't require injecting custom HTML. I'm quite busy right now, but I'll try to write and publish a tutorial over the coming days for you

3 Likes
6

I'm sure you have already solved your problem, but for everyone else that might come across this post in the future, I just published a blog post explaining of how you can set it up:

1 Like
7

Hi @kris, did you ever find time to write a tutorial for this? I'm working on a project that needs a Hubspot form slice and I'm running into issues with having multiple forms on the same page.

1 Like
8

Hi @jennifer2, yes, I just posted it 1 hour ago (see my previous comment). Hope it helps!

9

@kris Perfect timing, thank you! I couldn't find a solution to using a custom target id, so multiple slices can be used on the same page, but everything else works great.

1 Like
10

@jennifer2 glad that it works - you could generate a unique random ID per slice and identify the DIV like this