# Phone field value is cleared programmatically, but not reflected in UI

**URL:** <https://community.hubspot.com/t/phone-field-value-is-cleared-programmatically-but-not-reflected-in-ui/136393>\
**Category:** APIs & Integrations\
**Tags:** forms\
**Created:** [July 17, 2025, 10:03am UTC](https://community.hubspot.com/t/phone-field-value-is-cleared-programmatically-but-not-reflected-in-ui/136393 "2025-07-17T10:03:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![svirchenko](https://avatars.discourse-cdn.com/v4/letter/s/34f0e0/32.png) [@svirchenko](https://community.hubspot.com/u/svirchenko)\
**Post date:** [July 17, 2025, 10:03am UTC](https://community.hubspot.com/t/phone-field-value-is-cleared-programmatically-but-not-reflected-in-ui/136393/1 "2025-07-17T10:03:50Z")

</div>

When using HubSpotFormsV4, calling form.setFieldValue() on the phone field **clears the value in the form state** , but the UI **still displays the old value** (the phone number remains visible in the input).

1. **Enter phone number manually** in the embedded HubSpot form (e.g. +34232131231)

2. Get the form instance:

`const form = HubSpotFormsV4.getForms()[0];`

3. Check current field value:

```lia-code-sample
await form.getFormFieldValues();
// => [{ name: '0-1/phone', value: '+34232131231' }]

```

4. Try to clear the field:

```lia-code-sample
form.setFieldValue("0-1/phone", ""); 
// or 
form.setFieldValue("0-1/phone", null);

```

5. Check form field values again:

```lia-code-sample
await form.getFormFieldValues();
// => [{ name: '0-1/phone', value: '' }]

```

The internal value **is cleared** , but UI still shows:

 ![Screenshot 2025-07-17 at 12.02.25.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/0/f042132dff39210f12921f37be3c0680de65040c.png)

---

<div class="post-metadata">

**Author:** ![ASam26](https://avatars.discourse-cdn.com/v4/letter/a/82dd89/32.png) [@ASam26](https://community.hubspot.com/u/ASam26)\
**Post date:** [July 17, 2025, 11:37am UTC](https://community.hubspot.com/t/phone-field-value-is-cleared-programmatically-but-not-reflected-in-ui/136393/2 "2025-07-17T11:37:04Z")

</div>

I ran into the same thing with the phone input when working with HubSpotFormsV4. The short version: setting the value to “” or null does update the internal state, but the UI won’t visually clear unless the phone input field is re-rendered, and HubSpot doesn’t force a rerender when setFieldValue is used with empty values on this particular field type.

What worked for us was triggering a small DOM change manually. After setFieldValue, try also resetting the input directly via JavaScript, something like:

const phoneInput = document.querySelector(“input[name=‘0-1/phone’]”);  
if (phoneInput) phoneInput.value = “”;

It keeps UI and state in sync. Just make sure this runs after the field value update to avoid race conditions

---

<div class="post-metadata">

**Author:** ![svirchenko](https://avatars.discourse-cdn.com/v4/letter/s/34f0e0/32.png) [@svirchenko](https://community.hubspot.com/u/svirchenko)\
**Post date:** [July 17, 2025, 12:14pm UTC](https://community.hubspot.com/t/phone-field-value-is-cleared-programmatically-but-not-reflected-in-ui/136393/3 "2025-07-17T12:14:00Z")

</div>

Hi @ASam26 ,

Thanks a lot for the suggestion — I can confirm that works well on regular forms!

Unfortunately, in my case I’m dealing with an **embedded HubSpot form** , which is injected into the DOM via an \<iframe src=…\>. Because of that, I can’t access the internal document or query its elements with document.querySelector, due to **cross-origin restrictions**.

So even though form.setFieldValue(“0-1/phone”, “”) clears the internal state, there’s no way for me to sync the UI manually from the outside. I guess what’s really needed is for HubSpot to **trigger a re-render** or update the phone input directly when clearing the value through the API.

Still appreciate your input though — it helped clarify the root cause!