skip to Main Content

i have a react js website and i want to insert a hubspot form.

Hubspot form:

<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/shell.js"></script>
<script>
  hbspt.forms.create({
    region: "eu1",
    portalId: "25082527",
    formId: "8a7c2adb-5c41-4c47-8478-b1f1abe01e3f"
});
</script>

react js page contact

import React from 'react';
import SEO from "../common/SEO";
import Layout from "../common/Layout";
import ContactOne from "../elements/contact/ContactOne";

const ContactPage = () => {
    return (
        <>
            <SEO title="Contact" desc="EXIGOH - Contact us now"/>
            <Layout>
                <div className="main-content">
                    {/* Start Contact Area  */}
                    <div className="rwt-contact-area rn-section-gap">


                        <div className="container">
                            <div className="row">
                                <div className="col-lg-12 mb--40">
                                    <div className="text-center">
                                        <h1 className="title theme-gradient h2" dangerouslySetInnerHTML={{__html: 'The Easiest Way To Start <br /> fill in & send.'}}/>
                                    </div>
                                </div>
                            </div>
                            
                            **<<<<<<<< -------------- insert it here >>** 

                            {/*<ContactOne/>*/}
                        </div>
                    </div>
                    {/* End Contact Area  */}
                </div>
            </Layout>
        </>
    )
}
export default ContactPage;

so my question is: how can i do that? i tried to use <helmet> but this don’t work for me. how can i insert script tags in react js?

3

Answers


  1. Here’s what I did, worked like a charm…

    1. create a Component called HubspotContactForm
        import React, {useEffect} from "react";
        
        const HubspotContactForm = props => {
            const { region, portalId, formId } = props;
            useEffect(() => {
                const script = document.createElement('script');
                script.src='https://js.hsforms.net/forms/shell.js';
                document.body.appendChild(script);
        
                script.addEventListener('load', () => {
                    // @TS-ignore
                    if (window.hbspt) {
                        // @TS-ignore
                        window.hbspt.forms.create({
                            region: {region},
                            portalId: {portalId},
                            formId: {formId},
                            target: '#hubspotForm'
                        })
                    }
                });
            }, []);
        
            return (
                <div>
                    <div id="hubspotForm"></div>
                </div>
            );
        };
        
        export default HubspotContactForm;
    
    1. import this component and use it on a page:
    import {
      HubspotContactForm,
    } from '../components';
    
    export default function MyPage() {
      return (
        <main>
          <div className="container">
            <div className="row">
              <div className="col">
                    <HubspotContactForm 
                    region="na1"
                    portalId="12345678"
                    formId='4333d218-20e3-41f9-a478-47bd0c26bf1a'
                    />
              </div>
            </div>
          </div>  
         </main>
      );
    };
    
    Login or Signup to reply.
  2. Somehow the functional component solution posted by @jeffreyaven didn’t work (the target div remained unchanged even though JS got executed).

    The solution that worked for me was based on a class component:

    import React from "react";
    
    class HubspotContactForm extends React.Component<{
      portalId: string;
      formId: string;
      region: string;
    }> {
      componentDidMount() {
        const script = document.createElement("script");
        script.src = "https://js.hsforms.net/forms/v2.js";
        document.body.appendChild(script);
    
        script.addEventListener("load", () => {
          // @ts-ignore
          if (window.hbspt) {
            // @ts-ignore
            window.hbspt.forms.create({
              target: "#hubspotForm",
              ...this.props,
            });
          }
        });
      }
    
      render() {
        return (
          <div>
            <div id="hubspotForm" />
          </div>
        );
      }
    }
    
    export default HubspotContactForm;
    

    this component can be used in exactly the same way:

    import {
      HubspotContactForm,
    } from '../components';
    
    export default function MyPage() {
      return (
        <main>
          <div className="container">
            <div className="row">
              <div className="col">
                    <HubspotContactForm 
                    region="na1"
                    portalId="12345678"
                    formId='4333d218-20e3-41f9-a478-47bd0c26bf1a'
                    />
              </div>
            </div>
          </div>  
         </main>
      );
    };
    

    JSFiddle example

    Source

    Login or Signup to reply.
  3. I tried jeffreyaven reply but the form wasn’t showing. I removed the destructured props and it worked:

    import React, { useEffect } from 'react'
    
    const HubspotContactForm = (props) => {
      useEffect(() => {
        const script = document.createElement('script')
        script.src = 'https://js-eu1.hsforms.net/forms/embed/v2.js'
        document.body.appendChild(script)
    
        script.addEventListener('load', () => {
          if (window.hbspt) {
            window.hbspt.forms.create({
              target: '#hubspotForm',
              ...props
            })
          }
        })
      }, [])
    
      return <div id="hubspotForm"></div>
    }
    
    export default HubspotContactForm
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search