-2

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.

enter image description here

syed1234
  • 761
  • 5
  • 12
  • 30
  • It seems that most time you post, you add needy statements that have been removed by editors multiple times before, and you use "plz" and other language abominations as if Stack Overflow is a chatroom. Please try to refrain from these behaviours - they will only earn you downvotes. – halfer Jan 06 '23 at 23:44

1 Answers1

0

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).

egremont of yorke
  • 893
  • 5
  • 17
  • Hello @egremont of yorke , I have edit my questions please check Where I have shown my component and attached a screenshot If I inspect firstname field. I am for now trying to populate firstname field with test123 but unable to do so far. Can you please check above and let me know where I am exactly wrong? – syed1234 Jan 07 '23 at 19:33