React app generates non-hubspot forms with random names

[AY1]

Hi,

We have a React app, which generates random class names for HTML tags. Because of that, I have forms like <form class="jss77"> where 77 is a random number that may change. As a result, my app is generating a ton of non-Hubspot forms like .jss13, .jss43, .jss128, etc.

Is there a way, to provide a form name except for the full CSS selector?

My expectation was: if there is an "id" attribute specified, then HubSpot will use #form_id as the name, but instead it generates a lot of forms like "#form_id .random_class_123". 

Is there a way to fix form names without altering our app? 

[himanshurauthan · Accepted solution]

Hello @AY1 

you can use the name attribute on the <form> element. HubSpot's form submission process relies on the form's name, so specifying a unique and consistent name for each form will allow you to track and manage them effectively. Ensure that each dynamically generated form in your React app includes a unique name attribute.

import React from 'react';

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
  }

  componentDidMount() {
    // Access the form name using the ref and update it in HubSpot
    const formName = this.formRef.current.getAttribute('name');
    // Use formName to perform any necessary actions with HubSpot, such as tracking or customization.
  }

  render() {
    // Generate a unique form name, for example, using a prefix and a timestamp
    const formName = `myForm_${Date.now()}`;

    return (
      <form ref={this.formRef} name={formName}>
        {/* Form fields and other components */}
      </form>
    );
  }
}

export default MyForm;

each instance of the MyForm component will generate a unique form name based on the current timestamp. You can customize the form name generation logic according to your requirements.