How to force "The onFormSubmit function in hbspt.forms.create requires jQuery. It was not run." Error in Gatsby SPA

user_13197332 0
Viewed 1713

I'm trying to implement HubspotForm into my SAP. It render's but when I click submit button I get error "The onFormSubmit function in hbspt.forms.create requires jQuery. It was not run." How can I force this?

My component:

import React from "react"
import style from "./bottomForm.module.sass"
import BackgroundImage from "gatsby-background-image"
import classNames from "../../helpers/classNames"
import HubspotForm from "react-hubspot-form"
import { graphql, useStaticQuery } from "gatsby"

const BottomForm = ({ image, title, children }) => {
  const defaultImage = useStaticQuery(graphql`
    query {
      form_bg: file(relativePath: { eq: "common/form_bg.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 1920) {
            ...GatsbyImageSharpFluid_noBase64
          }
        }
      }
    }
  `)

  return (
    <BackgroundImage
      Tag="section"
      className={style.section}
      fluid={image || defaultImage.form_bg.childImageSharp.fluid}
      id={"bottomForm"}
    >
      <div className={style.content}>
        <h2 className={style.title}>{title}</h2>
        <div className={style.form_box}>
          <div className={classNames(style.form_column, style.form_info)}>
            {children}
          </div>
          <div className={style.form_column}>
            {/*<div id="contactFormBottom" />*/}
            <div className={style.form_contact_box}>
              <HubspotForm
                portalId="9075801"
                formId="6ee5300e-5ffe-471d-a400-92b06ca18a11"
                onSubmit={() => console.log('Submit!')}
                onReady={(form) => console.log('Form ready!')}
                loading={<div>Loading...</div>}
              />
            </div>
          </div>
        </div>
      </div>
    </BackgroundImage>
  )
}

export default BottomForm
react-redux gatsby react-native reactjs
2 Answers

For me works next solution ---> I add on "onReady" property code which check if jQuery script is in DOM and add it if it isn't. Also I add "onSubmit={() => {}}". Without it error drop down again.

<HubspotForm
  portalId="9075800"
  formId="11ba4132-6072-4c18-9ea7-f21b70191120"
  loading={<div>Loading...</div>}
  onReady={() => {
    const script = document.createElement('script');
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js';
    let jqueryScript = document.getElementsByTagName('script');
    let src = Array.from(jqueryScript).filter(item => item.src === script.src)
    if(src.length === 0) {
      document.body.appendChild(script)
    }
  }}
  onSubmit={() => {}}
/>
user_131973320

Check this GitHub thread's solution:

import React, { useEffect } from 'react';

.... 

    useEffect(() => {
        window.addEventListener('message', handler);
        return () => {
            window.removeEventListener('message', handler);
        }
    }, [])
    
      function handler(event) {
        if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
            if (event.data.id === 'formidhere')
                //do stuff
            else if (event.data.id === 'formidhere')
                //do stuff
        }
    }

This is one of the solutions proposed. Another one that I will try to avoid is importing jQuery directly on your project.

user_55853710
Related