What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Back button image and positioning

    Asked by Angela on October 26, 2014 at 03:39 PM

    Hi

    If possible, how do I change the back buttons to an image? I've inserted some code but it doesn't seem to work out.

    And how do I position the back buttons to be always at the bottom center as shown in (3)?

    I've also realised when viewed in mobile, the back button stretches along the full width. Can I let it remain as an image positioned at the bottom center as shown in (3)? 

    Page URL:
    http://form.jotform.me/form/42986042136456?

    Screenshot
    button image back button and Mobile 3 shown
  • Profile Image
    JotForm Support

    Answered by ashwin_d on October 27, 2014 at 01:13 AM

    Hello Angela,

    Upon checking the image URL you have used in your custom css code seems to be not correct. You need to use the direct URL of your image.

    Please inject the following custom css code in your form and see if this is what you wanted to achieve:

    #form-pagebreak-back_29, #form-pagebreak-back_30, #form-pagebreak-back_53{position:absolute; text-size:12px;float:left;margin-left: 738px;margin-top: -40px;background:url("http://i49.tinypic.com/jz86cn.jpg") no-repeat  !important;width:150px !important;height:50px !important;box-shadow: none !important;border: none !important;}

    You will have to remove the following custom css code from your form:

    .form-pagebreak-back_29-container, .form-pagebreak-back_30-container, .form-pagebreak-back_53-container { float: none; background: url('http://i49.tinypic.com/jz86cn.jpg') no-repeat bottom center;box-shadow: none !important;border: none !important;}

    The size of the back image seems to be an issue and does not look good. The above css code should give your the following output:

    Do get back to us if you need any other changes.

    Thank you!

  • Profile Image

    Answered by woolalaa on October 27, 2014 at 02:32 AM

    Hi Ashwin_d, I've made the changes you mentioned but the back button seems to be displaced and hidden from view as the window width decreases. 

    Is there a way I can fix it in position regardless of the window width size? The back button should be centered below the next buttons.

     

    url: http://form.jotform.me/form/42815639855467

  • Profile Image
    JotForm Support

    Answered by ashwin_d on October 27, 2014 at 04:01 AM

    Hello woolalaa,

    Okay its seems to be taking some time to adjust the css code. You have so many css code in your form. I will get back to you on this a little later.

    Thank you!

  • Profile Image

    Answered by woolalaa on October 27, 2014 at 10:30 AM

    Sure. And yes the css code is a little messy.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on October 27, 2014 at 11:48 AM

    Hello woolalaa,

    What I am trying to do now is, remove the page break related css code and then try to sort out the issue of your form. 

    I will get back to you soon.

    Thank you!

  • Profile Image

    Answered by woolalaa on October 29, 2014 at 08:12 AM

    Hi Ashwin_d, able to sort out the issue?

  • Profile Image
    JotForm Support

    Answered by ashwin_d on October 29, 2014 at 09:45 AM

    Hello woolalaa,

    I am sorry for the delay but I am still working on it. I seems to have sorted out the css issue but the back button image still seems to have issue. 

    I will get back to you as soon as I have any update on this. I will also try to ask my colleagues to extend help on your form. 

    Thank you!

  • Profile Image

    Answered by woolalaa on October 29, 2014 at 09:52 AM

    Okay, thanks alot!

  • Profile Image

    Answered by woolalaa on November 02, 2014 at 10:10 AM

    Hi Ashwin_d, have you figured it out?

  • Profile Image
    JotForm Support

    Answered by BDAVID on November 02, 2014 at 11:11 AM

    Hi, our colleague aswhin_d will get back to you as soon as possible, meanwhile, I have tried to understand what the issue is, I believe it has to do with the positioning of the back button, which has to be placed bellow the next button. I did cloned your form and added this CSS code:

    .form-pagebreak-back {

    margin-top:100px !important;

    }

    And the result is this:

    Here is the link to my cloned version: http://form.jotform.co/form/43054538462859, Hope this helps, thanks.