How to Hide "Submit" Button on Form Container

Ask for Help
1

Hi All –

I have a multi-step form within a form container. There are a few “continue” buttons, which show more of the form when clicked. The “Submit” button on the form container only enables once all continue buttons are pressed and required fields are entered. Wanted to know if anyone had any CSS tricks to hide the Submit button until the last continue button is pressed?

Otherwise it looks like this:

image
image1441×638 21.9 KB

Thanks!

2

You can CTRL+ SHIFT+C, then select the submit button, then right click on the element in the source code, the copy css selector.

Paste that in the custom CSS field like this:

Pasted selector {
display: none;
}
1 Like
3

Assuming you have a step value, it would look like this:

  • Add a rich text component to the form, add something like <div></div> to its content, and set the visibility to “Step is less than [Max step]”.
  • Use a custom class name for it: prevent-submit-form-container, add a custom-form-container class name to the form container itself.
  • Add this CSS to Settings > Appearance > Custom CSS:
#page-root:has(.prevent-submit-form-container) .custom-form-container button[aria-label="Submit"] {
display: none;
}

This means that when the rich text component is visible (current step not the last step), then the submit button is set to not displayed.

3 Likes
4

Thank you, as always!

Note I had to add the rich text component to the form container itself for some reason + turn of “use compiled CSS” in the custom CSS section, which was on by default, for it to work.

2 Likes
5

The recommendation is having it off, and turn on “Preview custom CSS”.

2 Likes
6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.