How To Hide Certain Next Buttons

Hi Alexander,

I'm not aware of any settings to do it. Best and easier way I can think of is to use CSS to hide it.

Regards,
Sujeevan

Hi

Any chance you know the CSS how to do it?

I tried but wasn't able to.

Alex

You can try the followings. It hides the buttons in the 2nd page in my form. Change 30 with you Formidable form ID and change 2 with the page number to hide.

If you don't know how to add CSS, try one of the followings,
a) your theme --> additional/custom CSS
b) Install "Simple Custom CSS" plugin where you can add the CSS

This hides both next and previous buttons
#frm_form_30_container .frm_page_num_2 .frm_submit {
display: none;
}

This hides only previous button
#frm_form_30_container .frm_page_num_2 .frm_submit .frm_prev_page {
display: none;
}

This hides only next button
#frm_form_30_container .frm_page_num_2 .frm_submit .frm_button_submit {
display: none;
}

Thanks! I'll try that.

Is there maybe an easier way?

I have this on the buttons that I'd want to hide in the hTML:

<div class="frm_opt_container">[input class="frm_button_submit"]</div>

Could there be a 'hide' class added?

<div class="frm_opt_container hidden-next">[input class="frm_button_submit"]</div>
<div class="frm_opt_container">[input class="frm_button_submit hidden-next"]</div>

Do you think that would work? (i tried that but couldn't get it working)

Yes, that will work as well. Not sure what it is not working for you. You can use the Chrome/Firefox dev tool to find out why it is not working.

.hidden-next {
display: none;
}

Thanks! For some reason that doesn't work. Any ideas why? (I always like to learn why something isn't working as expected!)

This does work:

/*START - Hide Next Button*/
#frm_form_7_container .frm_page_num_1 .frm_submit .frm_button_submit {
display: none;
}
/*END - Hide Next Button*/

The reason I'm not a huge fan of the above solution is that what if the form get's updated and then the frm_page_num_1 won't match.  (I need to update around 80 fields, so would rather find a more robust solution)

Do you have any other ideas on how to add the hide class to a specific next button?

is this <div class="frm_opt_container hidden-next"> or [input class="frm_button_submit hidden-next"] a more robust option?

<div class="hidden-next">[input class="frm_button_submit"]</div>

this hides the field! So the class hidden is working but doesn't get allocated to the next button.

[input class="frm_button_submit hidden-next"]

this does nothing to hide the next button!

Where did you modify the HTML to add the "hidden-next" class for each page? I don't think it is possible. If you look at your form --> Settings --> Customize HTML --> Submit Button (see the code below), you can see that previous and next buttons for all pages are generated by this single template. If you modify this, all pages will be affected. As far as I know, there is no way to modify HTML for a specific page because Formidable forms use a template to generate actual HTML.

<div class="frm_submit">
[if back_button]<button type="submit" name="frm_prev_page" formnovalidate="formnovalidate" class="frm_prev_page" [back_hook]>[back_label]</button>[/if back_button]
<button class="frm_button_submit" type="submit" [button_action]>[button_label]</button>
[if save_draft]<a href="#" tabindex="0" class="frm_save_draft" [draft_hook]>[draft_label]</a>[/if save_draft]
</div>

Regarding your comment on "The reason I'm not a huge fan of the above solution is that what if the form get's updated and then the frm_page_num_1 won't match.  (I need to update around 80 fields, so would rather find a more robust solution)"
You will need to specify only the page numbers. How many page breaks (not fields) this form has? I hope it is not 80 :)

Thanks. It's not 80 next for 1 form but across 5 forms. Looks like there's no easy solution.

yah, CSS that I gave you is the best way I can think of. You can group multiple CSS selectors by separating them with the comma. This will save some space. If you change the form, all you need is to update the page numbers in the CSS.

Another idea. This will make things complex also I'm not sure it is possible. You can try on your own.
Add an HTML field to every page that you want to hide. In the HTML field, add a div or span with no text but with "hidden-text" class. Now use CSS to identify which page has this element then locate the next button in the same page and hide. You might want to use CSS Sibling Selector. Good luck.

Thanks. I'll consider that as well. It might be a bit tricky for me though!

Hi

I have this: https://skipandbinhire.co.uk/

/*START - Quick Submit Form - Hide Next Button*/
#frm_form_47_container .frm_page_num_1 .frm_submit .frm_button_submit {
display: none;
}
/*END - Quick Submit Form - Hide Next Button*/

But can't get the first next button hidden. Any ideas what I might be doing wrong?

Hi,
HTML generated for your Next buttons are different from my one. Are you using an older version of Formidable forms or changed the HTML template?
I think not just the first button but none of the next buttons will work with my CSS because it doesn't have the class I'm checking ".frm_button_submit"

Google Chrome dev tool is your friend. Learn how to use it if you're not familiar with it. There are plenty of guides online (See attached screenshot how easy to identify the issue).

In your case, Next button is generated as
<input type="submit" value="NEXT">

With the latest version, it is generated as
<button class="frm_button_submit" type="submit">Next</button>

You can see that in my case "frm_button_submit" class is added.
You can try to upgrade to the latest version or go to your form --> Settings --> Customize HTML --> Submit button, then identify the line which generates the next button and add the "frm_button_submit" class. Once added, it should generate HTML something like below
<input type="submit" value="NEXT" class="frm_button_submit" >

All solved! Thanks! I really appreciate the help & guidance!

It's looking so neat!