Hide the “Next” button in the Form Builder depending on the fields

Ask the Community Customization
1

Hi @Max similar question , hide the next button based on if a field (text box) for example is empty .. ? possible by js ?maybe?
example would a tick box “must be over 18” , if it not ticket there the next button or any button on the form is hidden , till it is ticked ? if u know what i mean ?

2 Likes
2

Hi there, @AndyF :waving_hand:

I’ve checked your widget and couldn’t find the Consent field there. Could you please specify which fields in your widget must be filled to show the Next button?

1 Like
3

I didnt create a form yet, but if you use any field on form just as example ..
thanks

2 Likes
4

Okay, I’ll discuss it with the devs, and we’ll let you know if it’s feasible :slightly_smiling_face:

1 Like
5

Hi @AndyF! :waving_hand:t2:

In theory, it’s possible to hide the Next button, but the solution depends on the field. It would be great if you could customize the widget you need so we can see which fields need to be modified with the code :slight_smile:

1 Like
6

Hi Helga , I have created a Test Form in our account . - Called Test Form
you see a Consent box - are you over 18 ? , for example , Its a multi step form , so need to hide the next button unless it is ticket or at least disable it .. maybe
Let me know if that is all you need
Andy

2 Likes
7

Hi Andy, that’s great!

We’ve added the following CSS code to your widget’s Custom CSS section, which should hide the Next button until the Consent box is ticked:

[class*="FormLayout__Container-sc"]:has(input[id="consent"]:not(:checked)) button[aria-label="Next"] {
  display: none;  
}

[class*="FormLayout__Container-sc"]:has(input[id="consent"]:checked) button[aria-label="Next"] {
  display: block;
}

Let me know if this is what you were looking for :blush:

1 Like
8

HI Helga

Exactly what I need , works well

Thanks for the help

Andy

2 Likes