# Multi-Step Forms - Required Fields

**URL:** <https://community.hubspot.com/t/multi-step-forms-required-fields/114974>\
**Category:** HubSpot Ideas\
**Created:** [August 21, 2024, 5:01pm UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974 "2024-08-21T17:01:11Z")\
**Posts on this page:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![Lbecht](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/lbecht/32/13083_2.png) [@Lbecht](https://community.hubspot.com/u/Lbecht)\
**Post date:** [March 20, 2025, 8:30pm UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/41 "2025-03-20T20:30:40Z")

</div>

agreed. upvoting for improved CRO. great idea for hubspot clients. ran into this a few times as a solutions agency partner

---

<div class="post-metadata">

**Author:** ![AKobzarenko](https://avatars.discourse-cdn.com/v4/letter/a/d07c76/32.png) [@AKobzarenko](https://community.hubspot.com/u/AKobzarenko)\
**Post date:** [March 31, 2025, 10:12am UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/42 "2025-03-31T10:12:08Z")

</div>

any updates on it?

---

<div class="post-metadata">

**Author:** ![FilipaPFaria](https://avatars.discourse-cdn.com/v4/letter/f/5e9695/32.png) [@FilipaPFaria](https://community.hubspot.com/u/FilipaPFaria)\
**Post date:** [March 31, 2025, 11:16am UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/43 "2025-03-31T11:16:38Z")

</div>

Hi all,

This workaround is just temporary as it has the id’s hardcorded and the maintenance can be a bit difficulted.

For each step I select the “next” button ID and the ID of the desired “required” field.  
The initialization ensures the function is only called once.

```lia-code-sample
let isInitialized = false; // Flag to ensure the function is only called once
function waitForRequiredElements() {
 if (isInitialized) return; // Skip if already initialized

 const button = document.getElementById("your-button-id");
 const selects = [
 document.getElementById("your-first-field-id"),
 document.getElementById("your-second-field-id"),
 ];
 const checkboxes = document.querySelectorAll("input[type='checkbox']");
 selects.forEach((select, index) => {
 });

 // Check if the button, selects, and checkboxes are available
 if (button && selects.every(select => select !== null) && checkboxes.length > 0) {
 button.addEventListener("click", function (event) {
 let allSelected = selects.every(select => {

 return select.value.trim() !== "";
 });
 let anyChecked = Array.from(checkboxes).some(checkbox => checkbox.checked);

 if (!allSelected || !anyChecked) {
 event.preventDefault();
 event.stopPropagation(); // Prevent internal HubSpot event
 alert("Please check all fields before proceed!");
 }
 });
 // Set the flag to prevent reinitialization
 isInitialized = true;
 } else {
 // Retry after 1.5 seconds if elements aren't ready yet
 setTimeout(waitForRequiredElements, 1500); 
 }
}
// Start the function when the document is ready
document.addEventListener("DOMContentLoaded", function() {
 waitForRequiredElements();
});

```

It waits for the necessary elements to be available on the page before adding an event listener to the submit button. If the conditions are not met, it prevents form submission and shows an alert. The function retries every 1.5 seconds if the elements are not ready  
Hope it helps!  
Still looking forward to the final solution 🙂

---

<div class="post-metadata">

**Author:** ![Alexander-tmp](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alexander-tmp/32/101103_2.png) [@Alexander-tmp](https://community.hubspot.com/u/Alexander-tmp)\
**Post date:** [April 7, 2025, 11:42am UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/44 "2025-04-07T11:42:48Z")

</div>

+1 (commenting for updates when this is delivered).

---

<div class="post-metadata">

**Author:** ![EPBrivity](https://avatars.discourse-cdn.com/v4/letter/e/91b2a8/32.png) [@EPBrivity](https://community.hubspot.com/u/EPBrivity)\
**Post date:** [April 10, 2025, 5:03pm UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/45 "2025-04-10T17:03:45Z")

</div>

@FilipaPFaria Where do we put this code?

---

<div class="post-metadata">

**Author:** ![JSchlag9](https://avatars.discourse-cdn.com/v4/letter/j/b2d939/32.png) [@JSchlag9](https://community.hubspot.com/u/JSchlag9)\
**Post date:** [April 15, 2025, 3:50pm UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/46 "2025-04-15T15:50:43Z")

</div>

How does this get implemented without field validation between steps? Major oversight. Glad to see it’s being resolved, but a bit disappointed to have to implement a workaround in the meantime.

---

<div class="post-metadata">

**Author:** ![DominikRich](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dominikrich/32/53257_2.png) [@DominikRich](https://community.hubspot.com/u/DominikRich)\
**Post date:** [April 17, 2025, 7:35am UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/47 "2025-04-17T07:35:54Z")

</div>

I´m really happy to read that this is in development… from a user and conversion perspective I also see this very relevant to only let the users to the next step if all the required fields on the step are filled!

Any updates about the timing?!

---

<div class="post-metadata">

**Author:** ![Jigar\_Thakker](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jigar_thakker/32/63606_2.png) [@Jigar\_Thakker](https://community.hubspot.com/u/Jigar_Thakker)\
**Post date:** [April 28, 2025, 9:11pm UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/48 "2025-04-28T21:11:42Z")

</div>

+1 on this

---

<div class="post-metadata">

**Author:** ![Jigar\_Thakker](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jigar_thakker/32/63606_2.png) [@Jigar\_Thakker](https://community.hubspot.com/u/Jigar_Thakker)\
**Post date:** [April 28, 2025, 9:17pm UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/49 "2025-04-28T21:17:17Z")

</div>

Waiting to try this!

---

<div class="post-metadata">

**Author:** ![AAntunez](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@AAntunez](https://community.hubspot.com/u/AAntunez)\
**Post date:** [May 6, 2025, 9:20pm UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/50 "2025-05-06T21:20:30Z")

</div>

Waiting for this as well! Would also like some good logic that if a field choice is selected from a drop down lest say, we do not let them proceed at all, aka not even showing them a button.

---

<div class="post-metadata">

**Author:** ![Briana03](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/briana03/32/99678_2.png) [@Briana03](https://community.hubspot.com/u/Briana03)\
**Post date:** [May 19, 2025, 6:16pm UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/51 "2025-05-19T18:16:24Z")

</div>

Thank you for having this “in planning”! Same sentiments with our business cases.

---

<div class="post-metadata">

**Author:** ![JLoomis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jloomis/32/31184_2.png) [@JLoomis](https://community.hubspot.com/u/JLoomis)\
**Post date:** [May 30, 2025, 4:11pm UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/52 "2025-05-30T16:11:46Z")

</div>

It is completely unbelievable to me that this is not a default option for the form.

---

<div class="post-metadata">

**Author:** ![Pierre\_T](https://avatars.discourse-cdn.com/v4/letter/p/73ab20/32.png) [@Pierre\_T](https://community.hubspot.com/u/Pierre_T)\
**Post date:** [May 30, 2025, 6:33pm UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/53 "2025-05-30T18:33:45Z")

</div>

Agreed @JLoomis - I think a pretty large oversight that it wasn’t included with the new form launch, and still not available after being brought to their attention over 9 months ago.

---

<div class="post-metadata">

**Author:** ![AKobzarenko](https://avatars.discourse-cdn.com/v4/letter/a/d07c76/32.png) [@AKobzarenko](https://community.hubspot.com/u/AKobzarenko)\
**Post date:** [June 4, 2025, 8:23am UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/54 "2025-06-04T08:23:59Z")

</div>

come on guys, this fix takes max 2hrs of work using chatGPT. It’s been almost a year since we ask for it -\_-

---

<div class="post-metadata">

**Author:** ![TransparencyCo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/transparencyco/32/66201_2.png) [@TransparencyCo](https://community.hubspot.com/u/TransparencyCo)\
**Post date:** [June 15, 2025, 3:58am UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/55 "2025-06-15T03:58:00Z")

</div>

I don’t see this in **Product Updates** section of HubSpot so asking here if there are any updates. We also have several multi-step forms with required fields across each step. Looking forward to seeing this feature added ASAP! 🤞

---

<div class="post-metadata">

**Author:** ![dsanchezRW](https://avatars.discourse-cdn.com/v4/letter/d/f08c70/32.png) [@dsanchezRW](https://community.hubspot.com/u/dsanchezRW)\
**Post date:** [June 24, 2025, 3:00pm UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/56 "2025-06-24T15:00:09Z")

</div>

@FilipaPFaria Where are you adding this code? Do you add it in that page settings → footer?

---

<div class="post-metadata">

**Author:** ![dsanchezRW](https://avatars.discourse-cdn.com/v4/letter/d/f08c70/32.png) [@dsanchezRW](https://community.hubspot.com/u/dsanchezRW)\
**Post date:** [June 24, 2025, 4:30pm UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/57 "2025-06-24T16:30:10Z")

</div>

@SwissArmyKnife your solutions works best. @FilipaPFaria’s only works on checkboxes whiles yours covers input fields.

Question for Swiss: How would I include a phone number field in your code.

For those wondering, you add this in your page Settings → Footer Html and you have to include \<script\> tags to sandwhich the code (already included in the solutions).

---

<div class="post-metadata">

**Author:** ![kkbockin](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kkbockin/32/34870_2.png) [@kkbockin](https://community.hubspot.com/u/kkbockin)\
**Post date:** [July 14, 2025, 5:13pm UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/58 "2025-07-14T17:13:32Z")

</div>

Looking for an update on this as well. Seems like a basic UX functionality that was overlooked!

---

<div class="post-metadata">

**Author:** ![SGuzman7](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sguzman7/32/89217_2.png) [@SGuzman7](https://community.hubspot.com/u/SGuzman7)\
**Post date:** [July 21, 2025, 10:34pm UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/59 "2025-07-21T22:34:42Z")

</div>

1 year later and this solution doesn´t finish the develop. 😥

---

<div class="post-metadata">

**Author:** ![yanjun](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/yanjun/32/165003_2.png) [@yanjun](https://community.hubspot.com/u/yanjun)\
**Post date:** [July 28, 2025, 4:16pm UTC](https://community.hubspot.com/t/multi-step-forms-required-fields/114974/60 "2025-07-28T16:16:29Z")

</div>

7/28/2025, still not solved… it’s a major bug in my idea 😞

[Previous page](https://community.hubspot.com/t/multi-step-forms-required-fields/114974.md?page=2)

[Next page](https://community.hubspot.com/t/multi-step-forms-required-fields/114974.md?page=4)