JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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.
How to align Back and Next Button to bottom and retain position without jumpingAsked by NRCsupport on February 19, 2014 at 04:30 PM
I'd like to make my row of buttons sit at the bottom of the window, and not move while the rest of the form scrolls.
I thought that position: fixed would do it, but it fixes it to the bottom of the form,so that it scrolls with the form and is not visible until enough of the form has been scrolled up to see it.
Can I achieve what I want using css?
Thank you for contacting us.
Download the custom CSS code below and also embed your form using an iframe.
Download CSS code here: http://pastie.org/8750057
Please use this Iframe embed code to your website:
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/40465193394358" frameborder="0" style="width:100%; height:3815px; border:none;" scrolling="no"></iframe>
I've made a sample here https://shots.jotform.com/jed/forms/pagebreakfixedaligned.htm
Let us know if you have other questions.
Unfortunately your sample does not achieve what I want.
1. My nav buttons at the top of the screen have gone peculiar. They already use some floating button code to stop them scrolling off the screen.
2. The back and next buttons still do not sit at the bottom of the window, they are at the bottom of the 3815px which you have set as the height of the iframe. So you still have to scroll to the bottom of this to see the buttons.
3. Furthermore even with the smaller pages, you have to scroll right down to 3815pxto see the buttons. I want thebuttons to sit at the bottom of the window, regardless of where the page has been scrolled to.
4. My coloured bar for the buttons has disappeard.
Have I missed something? - or doI need to do the embedding you have listed before it will work?
I know nothing about iframes. Can you refer me to any information about what they are, and what they will do for me?
You have to embed your form using an iframe instead of regular script tag. You will also need to update your CSS code in your form with the one that I provided earlier.
Here's your iframe code I've adjusted it to height:900px to fit your webpage:
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/40465193394358" frameborder="0" style="width:100%; height:900px; border:none;" scrolling="no"></iframe>
Unfortunately I could not get that to work.
I pasted in the CSS you sent in place of what I already had.
I plugged the iframe embed stuff into my webpage, adjusting the height to 900px.
I got into the first page of the form ok, but there was no NEXT button, and never appeared however far down I scrolled.
BUT I've just looked at the cloned form in which I inserted your CSS code, and all the page breaks have disappeared. So something went wrong in the cloning.
I'll stop now (it is 1am here in London) and I'll look again tomorrow
On behalf of our colleague do let us know you findings on your second attempt tomorrow. That way if in case the issue persists. We can provide you further support, Thank you.
OK, I've tried again. Still no sign of the page break buttons in the live form (www.nrcsupport.com/html/iframecontactform.html).
Also, by cloning again I find that the page breaks are present in the cloned form, but that something in your css code has hidden them - maybe pushed them to the bottom.
Upon checking your link source code I realized your iFrame height is 763px, and you need at least 950px to show the navigation buttons. But on the 2nd page the form is bigger so the best is to put 1000px height:
<iframe frameborder="0" scrolling="no" style="width: 100%; height: 763px; border: medium none;" src="//form.jotformpro.com/form/40503715287958" allowtransparency="true" onload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></iframe>
From the tests I did I believe that by adjusting this values your form will be working as you wish.
Kindly let us know if you need more assistance.
I'm afraid it still does not work for me. There is no sign of the button anywhere.
Is the CSS code which I was sent yesterday (http://pastie.org/8750057) correct?
Are you able to show me where you have seen that the iframe code you've sent me works?
We do apologize about that not working for you either still. Just out of curiosity based on what you first said in the beginning of the thread, By any chance is this maybe what you are trying to do?
Basically what I've done is made the " Next " button float at the bottom of your form and it will continue to float no matter where you are on the form. However, As you mentioned it may not work because of the Position: Fixed but that is due to the fact of an Older|Outdated browser which would be unable to read the Code required to run this sort of ability unless it is instanced with a script somehow on your website itself. Either way though please let us know.
And if I went off track of what you were trying to acheive then I do apologize in advance so we'll continue trying to help you correct it resuming with where we left off at originally.
Demo Form: http://form.jotform.us/form/40504675416150
I think you have understood what I want - but you say 'float at bottom of form'. What I want is to float at the bottom of the window. Is that what you meant? And of course I want the back button, and if possible the submit button to float at the same level as the next button.
I am using FF 27.0.1 - so there should be no problem on my machine, but I am just not seeing the back and next buttons.
The version of my form in which I have put the css code I received earlier in this thread is 40503715287958
Yes it will float at the bottom of the window when you embed it into your website. The back button will appear when you are on the next page as the back button is ineffective when displayed on 1st page but if you are good with how my colleague KadeJM made the demo form I have updated the CSS to align submit button with Next and Back button.
Kindly check this form if this is ok with you http://form.jotformpro.com/form/40505727938966
Sorry, no it still does not work.
On loading the form, the first page fills right to the bottom with no sign of the next button. If I scroll down as far as possible, the top few pixels of the bar which should contain the buttons appears, but just a tiny bit of it. If I then click on the radio buttons, this reduces the form size (because it deletes some of the descriptive text), and the little bit of the button bar scrolls up the screen. But it remains as just the little bit with no buttons in view. Since the next button did not appear, I have not been able to test any further. I have tried on both 1024*768 and 1152*864 pixels. I didn't spot any difference.
I am puzzled as to why it does not work, but in particular why the little bit of the button moves. The bar should be there all the time, and never move.
I have been working on a method that does not use Iframes. I am using the fact that (as I have just discovered) CSS allows heights, positions etc to be expressed as a precentage of the viewport size (e.g height : 100%), and also in more recent versions of CSS it is possible to do calculations such as
position : fixed ;
top : calc(100% - 40px) ;
height : 40px ;
gives an item occupying the bottom 40 pixels of the viewport.
This is looking encouraging. I'll let you know howI get on.
The best way to implement that is to embed your form using the source code. Embedding it using iframe or the default embed code won't help because the form loads in and iframe container. You have to use the full source code and embed it to your page. After that, add the following CSS codes to the embedded form between the style tag in order for the pagebreak buttons to stay at the bottom of the screen.
Hope this helps!
Thanks very much, but still problems I'm afraid.
That demo works ok, but if I embed the code of the form into my page, the form looks ok, but none of the buttoms, radio boxes, etc actually do anything. I can click on one of the radio boxes in the first page, and the selected box dot appears, but once a selection is made the text above the radio box should disappear but it stays present. This suggests that the conditions are not working. Any further thoughts, please.
Please try to clear your browser cache, and then check it again.
I have tried your contact page in different browsers, but I was not able to reproduce the issue.
If you need any further assistance, please let us know.
What you are looking at ismy working form on my website nrcsupport.com. The problem is with the version in which I am aiming to fix the bar with the buttons at the bottom of the screen. This is at test.nrcsupport.com/html/contactform.html. You will only get to it with that full url starting with test. and ending with the name of the page containing the form. That verion has the source code of the form embedded as suggested a couple of posts up this thread by EltonCris. It is that embedding that seems to break the handling of buttons, etc. Have I not insertedit properly? The example linked to in EltonCris' message does not work. How can I see exactly what he has inserted?
You can get Elton's code from here: http://pastebin.com/WpTahQLx
On your test page - yes - Its how you have embedded the form that is causing the problem.
Why not put Elton's code exactly as it is, then you can add elements to it step by step.(I've modified the code to point to your form)
The differences between the two is not that much.
Please let us know if this helps.
I've now got my fixed button bar working quite well. See the thread "Problem with form on Safari on IPAD" for detailsof what I have done
Thank you fro the input. We will definitely take a look at your solution on said thread. Again, if you need further assistance or have additional comments. Do let us know. Thank you.