Setting Up a HubSpot Form

Sign up for HubSpot, create a contact form, and retrieve the code. Add it to a page or widget. Integrate HubSpot Live Chat with WordPress.

Sign Up for HubSpot

Visit the official HubSpot website ( https://app.hubspot.com/). For more details, see the support document “Sign Up for HubSpot and Integrate Live Chat with WordPress.”

Create a form and get the embed code

  1. Go to the dashboard ( https://app.hubspot.com/reports-dashboard/).
  2. Click the [Forms] menu under [Marketing].
  3. Click the [Create Form] button.
  4. Select “Embedded Form” and click the [Next] button.
  5. Select a template or create your own form, then click [Get Started].
  6. Click [Publish].
  7. Click [Embed Code] to retrieve the JavaScript code for embedding.
  8. Click the [Copy] button to copy the code. …And it’s copied.

Embedding on a Page

  1. Launch WordPress and log in.

  2. Click [Add New] under [Pages].

  3. Click [+] to add a block.

  4. Type “Custom HTML” and click [Custom HTML] under the [Format] menu.

  5. Paste the copied HubSpot form JavaScript code and click [Publish].

  6. Generate an artifact and verify that it works.

    Example:

    <!-- HubSpot form embed code -->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    portalId: "YOUR_PORTAL_ID",
    formId: "YOUR_FORM_ID"
  });
</script>

Embed in a Sidebar Widget

  1. Click the [Custom HTML] menu.
  2. Select the location where you want to apply it, then click the [Add Widget] button.
  3. Paste the copied code and save.
  4. Generate an artifact and verify that it works.

That’s it!

Integrating HubSpot Live Chat with WordPress

Please refer to the documentation titled “Sign up for HubSpot and integrate Live Chat with WordPress.”