Multi-Step Forms - Required Fields

Status: In Beta

Status history

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

any updates on it?

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.

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 :slightly_smiling_face:

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

@FilipaPFaria Where do we put this code?

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.

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?!

+1 on this

Waiting to try this!

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.

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

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

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.

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

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! :crossed_fingers:

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

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

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

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

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