CSS: How to remove the Next button on a specific page?

  • Stickel_Amy
    Asked on June 20, 2024 at 10:01 AM

    Is there a way to not have the Next button on Page 7?

    How to add 2 submit buttons? Image 1 Screenshot 20 Screenshot 10

  • Lara JotForm Support
    Replied on June 20, 2024 at 10:05 AM

    Hi Stickel_Amy, 

    Thanks for reaching out to Jotform Support. Although we can't remove the next button, we can hide it as a workaround. Let me walk you through it:

    1. Copy the code below:

    /*Hides the next button - 16102721*/
      #form-pagebreak-next_98 {
        display: none;
    }
    /*End of code*/

     2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

    3. In the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box.

    CSS: How to remove the Next button on a specific page? Image 1 Screenshot 30 Check out the screenshot below to see my results:

    CSS: How to remove the Next button on a specific page? Image 2 Screenshot 41Give it a try and let us know how it goes.

  • celvinpieterson09
    Replied on June 20, 2024 at 10:20 AM

    To remove the "Next" button on Page 7 in your JotForm and only have the "Submit" button, you need to adjust the form settings. Here’s how you can do it:

    Steps to Remove the "Next" Button:
    1. Open Your Form in JotForm Builder:
    • Go to JotForm and open the form you are working on.
    1. Navigate to Page 7:
    • Click on the page break that separates Page 7 and Page 8.
    1. Adjust the Page Break Settings:
    • Select the Page Break at the end of Page 7.
    • In the properties panel on the right, look for the "Next Button" option.
    1. Disable the Next Button:
    • Switch off the "Next Button" option to remove it from Page 7.
    • This should leave only the "Submit" button visible on Page 7.
    1. Save Your Changes:
    • Make sure to save your form after making these adjustments.

    By following these steps, the "Next" button should be removed from Page 7, and only the "Submit" button will be visible, as shown in your screenshot.
    Celvin Pieteroson

  • Stickel_Amy
    Replied on June 20, 2024 at 10:31 AM

    I am unsure of what I am doing wrong. I pasted the code into the Inject Custom CSS under the Styles tab, but no change happened in the form.

    CSS: How to remove the Next button on a specific page? Image 1 Screenshot 20

  • Mikhail JotForm Support
    Replied on June 20, 2024 at 10:48 AM

    Hi Amy,

    Can you try replacing the CSS code with the code below?

    /* Hide next button on the last page - 16102551*/ 
    button#form-pagebreak-next_110 {
        display: none;
    }
    /* Ends here */


    This is what it looks like after adding the code:

    CSS: How to remove the Next button on a specific page? Image 1 Screenshot 20

    Give it a try and let us know if you have any other questions.

 
Your Answer