Looking for advice on reducing the time to interactive metric on our site (SEO)

[rodcesar]

Hi everyone,

I'm looking for a way to reduce the impact of our Hubspot forms on our site for SEO purposes. I've pasted the typical form embed script that is provided every time you want to add a form to a site. One of the suggestions is adding defer and async to the script but every time I do that the forms won't load and I get: Uncaught ReferenceError: hbspt is not defined.
I've added a setTimeout function In hopes that it managers to create the form once the DOM has loaded but that doesn't seem to work. Does anyone have any pointers?

Here's the form:

<script charset="utf-8" type="text/javascript" src="/js/hsforms-v2.js"></script>

            <script>

              setTimeout(function(){

                hbspt.forms.create({

                region: "na1",

                portalId: "5472029",

                formId: "9205cf79-0753-4caf-8be6-faa7d8e14375"

                });

              },500);

            </script>

​

[dbeau79]

@rodcesar , I'm dropping some code below that you may find useful.  I've done this in the past where I created a plain old html form and submitted the data via the api (no key required).  I know it's extra work but  should help achieve what you're trying to do.  Note that hitting the api acts as triggering a form submission so any actions (ty message/redirect) you have set at the form level will fire in addition to any workflows you have set up.

<form class="" id="YOUR-FORM-ID">
  <div class="">
    <label class="labelfocus">Email</label>
    <input class="mb-3" type="email" value="" id="EMAIL">
  </div>
  <div id="submit">
    <input type="submit" value="Submit" class="">
  </div>
</form>

<script>
  const form = document.getElementById('YOUR-FORM-ID');

  form.addEventListener('submit', function (event) {
    event.preventDefault();
    const EMAIL = document.getElementById('EMAIL').value;
    submitForm(EMAIL);
  });
  function submitForm(EMAIL) {
    const xhr = new XMLHttpRequest();
    const url = "https://api.hsforms.com/submissions/v3/integration/submit/{{ PORTAL ID }}/{{ FORM GUID }}";
    xhr.open("POST", url);
    xhr.setRequestHeader("Content-Type", "application/json");

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(this.responseText);
      }
    };

    var data = {
      "submittedAt": "{{ unixtimestamp( local_dt ) }}",
      "fields": [
        {
          "name": "email", /* This is the HubSpot internal name of the field */
          "value": EMAIL
        },
        /* ANY ADDITIONAL FIELDS HERE */
      ],
      "context": {
        "hutk": "{{ request.cookies.hubspotutk }}",
        "pageUri": "{{ content.absolute_url }}",
        "ipAddress": "{{ request.remote_ip }}",
        "pageName": "{{ content.name|striptags }}"
      }
    }
    xhr.send(JSON.stringify(data));
  }
</script>

[RCesar]

Thanks for sharing the script, I'll start adapting it to the forms and report back as soon as I get it to work.

[dennisedson]

Might be worth exploring the forms API as an alternative to the embed code.  The forms team is working hard on improving the script.  Doesn't help you now, but hopefully will help sooner than later.

@dbeau79  what would you say here?