# React app generates non-hubspot forms with random names

**URL:** <https://community.hubspot.com/t/react-app-generates-non-hubspot-forms-with-random-names/81947>\
**Category:** CMS Development\
**Tags:** forms\
**Created:** [May 24, 2023, 4:52pm UTC](https://community.hubspot.com/t/react-app-generates-non-hubspot-forms-with-random-names/81947 "2023-05-24T16:52:07Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![AY1](https://avatars.discourse-cdn.com/v4/letter/a/f6c823/32.png) [@AY1](https://community.hubspot.com/u/AY1)\
**Post date:** [May 24, 2023, 4:52pm UTC](https://community.hubspot.com/t/react-app-generates-non-hubspot-forms-with-random-names/81947/1 "2023-05-24T16:52:07Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![himanshurauthan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/himanshurauthan/32/53076_2.png) [@himanshurauthan](https://community.hubspot.com/u/himanshurauthan)\
**Post date:** [May 25, 2023, 9:45am UTC](https://community.hubspot.com/t/react-app-generates-non-hubspot-forms-with-random-names/81947/2 "2023-05-25T09:45:06Z")

</div>

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.

```lia-code-sample
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.