How to pre-fill Hubspot form fields using local storage in React

Question

I have a React application where all webforms are integrated with Hubspot.

My goal: I want to pre-fill following fields on every webform based on logged in user credentials(using local storage)

1. firstname
2. lastname
3. email

By using the form id I display a form on frontend and id is like below:

[hubspot]32323-3232-3232-83232-af6ab9332333[/hubspot]

I have also portal ID, and every webform has different id.

How I can achieve my above goal? Do I need to create a separate component or can I achieve this some other way?

Below is my component: For now I am trying to enter test value into firstname field

import React, { useEffect } from "react";

const HubspotContactForm = ({ pageContext, ...props }) => {


  useEffect(() => {

 document.getElementById("firstname-3478d953-3c8d-4bea-8501-af6ab93cac87").value = "test123"

      });
}

export default HubspotContactForm;

If I inspect my first name field below is output where we can see id of field which is coming from Hubspot.

Answer 1

Not sure why you have to do this with local storage. If you're fetching the user's credentials from an API after log in, then pass it directly to the form fields using controlled forms and state hooks.

If you're saying you store the user's credentials in localStorage after they log in, then retrieve them using the localStorage.getItem(key) method, then pass it — again, to your controlled form (using the value attribute within the form itself).