Submit button underneath Back button

  • matheg
    Asked on March 18, 2019 at 1:09 PM

    Hi!

    I've found a previous question with an answer in this topic, but unfortunately, the numbers don't work for me. I've experienced a lot, but I couldn't get the correct setting. The Back button size also changes (it is not the same size as before). And the position of the Submit button is also not correct. (All the button sizes are "block".)

    I would appreciate if you could help me with the correct setting.

    Anyway, I think, I am not the only one, who is frustrated by this. It would be a great development if the Submit button would appear beneath the Submit button.

    Thanks in advance for your response.

    Best regards, Gábor

    Page URL: https://eu.jotform.com/build/90562883581365
  • Richie JotForm Support
    Replied on March 18, 2019 at 2:23 PM

    You may use CSS to change the properties of your buttons.

    To clarify, are you referring to your back button and submit button?

    You may use these custom CSS to change your submit button

    #input_2{
        width: 120px;/*You  may increase or decrease your button width*/
       margin-left: 230px;/*You  may increase the negative number to move the button up*/
    {

    For the back button

    #form-pagebreak-back_5{
    width: 120px;/*You  may increase or decrease your button width*/

    margin-top: -70px;/*You  may increase the negative number to move the button up*/

    }

    Guide:https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Please give it a try and let us know if this fits your requirements.

  • matheg
    Replied on March 19, 2019 at 3:18 AM

    Hi Richie!

    Thank you for your answer. I gave a try with the code, but it is still not working for me.
    Let me clarify the task: I want the Submit button to appear either beneath the Back button in block size (full with) or exactly in the position of the Forward button in the same size. Both solutions are fine for me.
    First of all, WYSIWYG means in this case: What You See Is What You better forGet. :( In the editor (left figure) the positions of the buttons are different from the preview (right figure).
    Unfortunately, the Back button in the new (and still not correct) position overlaps the text object above.
    You referred to the Submit button as #input_2, I've tried .form-submit-button. Is there any difference? (It took me a while to find #input_2.)
    The solution in a former article of Richie_P doesn't work if I set the button size to Block in the advanced editor.
     
    Since I've no more time to experience with these settings, at the moment the only acceptable solution is for me to hide the Back button on the last page. Any user-friendly ideas? Please, feel free to check my CSS code trials.
    I'm a little bit upset, that such an excellent application as JotForm doesn't have a user-friendly solution for this task.
     
    Best regards, Gábor
  • Nik_C
    Replied on March 19, 2019 at 4:48 AM

    I inserted the below CSS:

    li#id_2 {

        width: 367px;

        position: relative;

        left: 45%;

        top: -27px;

    }

    button#input_2 {

        height: 45px;

    }

    And it will make your form look like this:

    15529852672019 03 19 9 44 28 Screenshot 10

    Hope it helps.

    Let us know if you have any further questions.

    Thank you!

  • matheg
    Replied on March 19, 2019 at 6:28 AM

    Thank you, Nik for your quick efforts. This is exactly what I wanted!

    You are great!

    Anyway, imho this is not a user-friendly solution. You have to be a CSS expert, to solve this problem.

    Best regards, Gábor