Can I have different colours/sizes for "Back" and "Next" buttons on my form?

  • nadine_newman
    Asked on August 19, 2019 at 3:13 PM

    I am trying to create a "Clear Path to Completion" on my form. One way to create a clear path to completion is to have the Next button and the Back Button be different colours/sizes etc. 

    Is this possible? If not, is there a way to create a hyperlink for the back button to make it look different.

    Thanks

  • nadine_newman
    Replied on August 20, 2019 at 5:54 PM

    HI there - 

    Thanks for the info.  The code didn't work for me when the form is published.  This is the form - https://form.jotform.com/nadine_newman/organizer-notification


    I would like to have back button a whitish colour (and smaller) and the next button Green.

  • David JotForm Support Manager
    Replied on August 20, 2019 at 7:44 PM

    I did some minor changes to the previous code, please remove the exiting one, and inject this one instead:

    .form-pagebreak-back {

        color : white!important;

        font-size : 20px !important;

        text-shadow : none;

    }

    .form-pagebreak-next {

        background : green !important;

        border : 1px solid black!important;

        box-shadow : inset 0px 1px 0px 0px #4b4b4b !important;

        color : white!important;

        font-size : 20px !important;

        text-shadow : none !important;

        width: 100px !important;

    }


    Result:

    1566344595result Screenshot 10

    Hope this helps.

  • nadine_newman
    Replied on August 21, 2019 at 11:43 AM
    Worked perfectly!
    Thanks.
    Nadine
    On Tuesday, August 20, 2019, 05:44:29 p.m. MDT, JotForm wrote:

    New response received#yiv5441912462 p img {width:100%;} A new response has been received: Answered by BDAVID

    I did some minor changes to the previous code,please remove the exiting one, and inject this one instead:
    .form-pagebreak-back{
        color :white!important;
        font-size : 20px!important;
        text-shadow :none;
    }
    .form-pagebreak-next{
        background : green!important;
        border : 1px solidblack!important;
        box-shadow : inset 0px1px 0px 0px #4b4b4b !important;
        color :white!important;
        font-size : 20px!important;
        text-shadow : none!important;
        width: 100px!important;
    }
    Result:
    Hope this helps.
    View this thread on browser » Unsubscribe Thread 1566344668
    ...
  • David JotForm Support Manager
    Replied on August 21, 2019 at 1:30 PM

    Glad to know that! Open a new forum thread if you need anything else, we will be glad to assist you.