Keep back button at same position on each page

  • Profile Image
    reciproc8
    Asked on July 22, 2013 at 03:31 PM

    Hey guys

    Is it possible to keep the back page positioned in the exact same spot on each page?  I created a form that has a page break in between each question and every time you hit next and go to the next page, the next button moves in its position according to the field.  For the sake of uniformity, is there a way to keep the next buttons positioned in the exact same place on each page?  Ex; 300px from the top?  

     

    Thanks

  • Profile Image
    EliezerN
    Answered on July 22, 2013 at 03:57 PM

    Thanks for contacting us.

    To accomplish what you need, please insert this custom CSS code to your form:

    .form-pagebreak-back, .form-pagebreak-next

    {

    position:fixed !important;

    top:250px !important;

    }

    Please refer this guide to know how to Inject Custom CSS Codes to your form: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    I cloned your form to do the changes, you can see mine and clone it if it's helpful for you, here it is: http://www.jotform.com/form/32026659287966

     

    If you need further assistance, please let us know.

    Thanks.

  • Profile Image
    reciproc8
    Answered on July 22, 2013 at 05:30 PM

    Great thanks. I did the same for the back button.  But now it does not work properly where I have it embedded.  The first next button (re-labeled as Apply) does not respond.  

  • Profile Image
    pinoytech
    Answered on July 22, 2013 at 05:37 PM

    Hi,

    Can you please provide us URL of your website where your form embedded for further assistance?

    Thank you!

  • Profile Image
    reciproc8
    Answered on July 22, 2013 at 05:48 PM
  • Profile Image
    EliezerN
    Answered on July 22, 2013 at 06:03 PM

    hello,

    You didn't need to insert more code to your form, I had included the two buttons, back and next, in the code. 

    Also I found that there was missing a period before the form-pagebreak-back.

    This is the code you added: 

    form-pagebreak-back, .form-pagebreak-next{position:fixed !important;top:275px !important;}

    form-pagebreak-back, .form-pagebreak-back{position:fixed !important;top:275px !important;}

    Please remove it and  insert this one:

    .form-pagebreak-back, .form-pagebreak-next

    {position:fixed !important;

    top:275px !important;

    }

    That will affect both buttons. And if that does not work, please let us know.

    Thanks

  • Profile Image
    reciproc8
    Answered on July 22, 2013 at 06:08 PM

    On the embedded form, on the 2nd page for name and email, the next and back buttons do not show up

  • Profile Image
    EliezerN
    Answered on July 22, 2013 at 06:15 PM

    You are right, I am also unable to see them. But that was probably because the code you had injected was the same, so your form has the next code twice.

    form-pagebreak-back, .form-pagebreak-next

    {

    position:fixed !important;

    top:275px !important;

    }

    So, that produced a conflict in the code. Please kindly try with the code I just gave you in the previous answer.

    Thanks

  • Profile Image
    reciproc8
    Answered on July 23, 2013 at 04:41 PM

    I just did, it only has that code once and its still doing the same thing.

  • Profile Image
    reciproc8
    Answered on July 23, 2013 at 04:43 PM

    Now the Apply (next) button does not work

  • Profile Image
    EliezerN
    Answered on July 23, 2013 at 05:00 PM

    I have checked the code.

    I have cloned your form to make some tests and it works fine, maybe if you try to reduce the amount it get resolved. Please try removing the current code and insert this one:

    .form-pagebreak-back, .form-pagebreak-next

    {

    position:fixed !important;

    top:230px !important;

    }

    If that does not work' let us know.

    Thanks.


  • Profile Image
    reciproc8
    Answered on July 23, 2013 at 08:15 PM

    The buttons show up on the preview but they do not show up on the page in which the form is embedded.  I reduced the amount to 230px and still the same problem. 

    Thanks

  • Profile Image
    khrisell
    Answered on July 23, 2013 at 10:06 PM

    Hello,

    Have you tried clearing your browser cache and cookies reciproc8? 

    Let us know if problem persists after clearing browser cache and cookies, so that we could further check on the codes.

     

    Thank you.

  • Profile Image
    reciproc8
    Answered on July 24, 2013 at 12:15 AM

    Hi

    Thanks for your help so far.  The problem is still there.  I have done a hard refresh and cleared cookies and cache.

     

    Thanks

  • Profile Image
    Morian
    Answered on July 24, 2013 at 03:04 AM

    Hi! I checked your site and while I can see the apply button, the back button is also in the first page, which obviously should not be the case and neither buttons are working.

    I checked your stand-alone form and it is woking fine.

    Can you please try to remove the embed code and try to re-embed again? If it's not resolved, please let us know. Thanks!

  • Profile Image
    abajan
    Answered on July 24, 2013 at 03:26 AM

    @reciproc8

    Please replace your current form code with its iFrame equivalent. Upon searching the forum, I was able to find a user with the same issue and it was resolved once the iFrame version of the form code was substituted for the default.

  • Profile Image
    reciproc8
    Answered on July 24, 2013 at 01:31 PM

    Works great, thanks!