When I open the form page for the first time, the hidden fields are correctly populated, and I can see their values in the API call after submitting the form.
However, when I revisit the same page internally (without a full page reload), the getFieldValues are already filled, but the values are not reflected in the hidden field elements or in the form payload when I submit again.
This only happens when navigating internally between pages — a hard page refresh fixes the issue.
I also noticed that the onReady event is triggered twice.
Nuxtjs code:
<script setup lang="ts">import {useScriptTag} from '@vueuse/core';import {DATALAYER_CONTRACT_ID, DATALAYER_EVENT} from '../../models/tracking';interface HubSpotForm { getFormFieldValues: () => Promise<Array<{name: string; value: any}>>; setFieldValue: (fieldName: string, value: string | number) => void;}interface HubSpotFormsV4 { getFormFromEvent: (event: Event) => HubSpotForm;}declare global { interface Window { HubSpotFormsV4: HubSpotFormsV4; }}const props = defineProps({ formId: { type: String, required: true, }, portalId: { type: String, }, prefill: { type: Object as PropType<Record<string, string | number>>, required: false, default: () => ({}), },});const runtimeConfig = useRuntimeConfig();const portalId = props.portalId ?? (runtimeConfig.public.hubspotPortalId as string) ?? null;const formIdTag = form-${props.formId.split(‘-’)[0]};const formContainer = ref<HTMLElement>();const {pushFormEvent} = useTracking();async function handleReady(ev: Event) { const {formId} = (ev as CustomEvent).detail; const form = window.HubSpotFormsV4.getFormFromEvent(ev); const fieldsArray = await form.getFormFieldValues(); if (formId === props.formId && fieldsArray.length > 0) { Object.entries(props.prefill).forEach(([fieldId, value]) => { const field = fieldsArray.find((f: any) => f.name.endsWith(/${fieldId})); if (field?.name) { form.setFieldValue(field.name, value); } }); pushFormEvent(DATALAYER_EVENT.FORM_READY, DATALAYER_CONTRACT_ID.FORM_READY, formId); }}const {load, unload} = useScriptTag( https://js-eu1.hsforms.net/forms/embed/developer/${portalId}.js?date=${new Date().getTime()}, () => {}, { manual: true, attrs: { 'data-hs-embed': props.formId, defer: 'true', }, },);onMounted(async () => { if (!portalId || !props.formId || !formContainer.value) { return; } formContainer.value.innerHTML = ''; window.removeEventListener('hs-form-event:on-ready', handleReady); window.addEventListener('hs-form-event:on-ready', handleReady, {once: false}); document .querySelectorAll<HTMLScriptElement>(script[data-hs-embed=“${props.formId}”]) .forEach(s => s.remove()); formContainer.value.querySelectorAll('form').forEach(n => n.remove()); await load();});onUnmounted(() => { unload(); window.removeEventListener('hs-form-event:on-ready', handleReady);});</script><template> <div :id="formIdTag" ref="formContainer" :data-form-id="formId" :data-portal-id="portalId" class="hs-form-html" data-region="eu1" /></template>