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 can I adjust the positioning of a form so that it sits at the very top of the page?Asked by FLXAPI on April 28, 2016 at 04:23 PM
I created a form that I am embedding within an otherwise blank web page. I managed to adjust the CSS so that the form is left-aligned on the page, but there is still a fair amount of empty space above the form, and I would like to eliminate this space so that the top of the form sits closer to the top of the page. I found some information on this in your support material, and I did make the suggested adjustment to the CSS. Namely:
margin: 0 !important;
padding: 0 !important;
This has not solved the problem, however, and I am now at a loss as to how to proceed.
Please let me know what additional CSS adjustments must be made in order to bring the top of the form closer to the top of the web page. (Note that the attached screen shot should help bring clarity to the issue and what it is that I am looking to accomplish.)
To do that you can add the following code to your form: [CSS] Remove padding at the top
Once you do it should remove the padding. If it does not, please do let us know the link to the same page and we would be happy to look into it for you and see what exactly is making it as such.
Thanks for the reply. I added the CSS code that you recommended and that did the trick.
But talk about frustrating. After I managed to manually get all of the CSS in order, I went into the Form Designer in order to make the form a little bit wider. I added just a hint of width to the overall form and then discovered that doing so also resulted in ALL of my previous CSS modifications being reset to the default. So -- Now the form is again not aligned properly, the excessive margin at the top has reappeared, and all of the color changes that I had made have been lost. Ridiculous!
What I would like to suggest is to restore your form back to the previous - working layout. You can see how to do that here: How to View Form Revision History
Now once you do, just let us know the desired width, and we can give you the CSS to do the same.
Depending on the CSS, some changes might be made when the new CSS is added, but if that happens we would be happy to assist with the same.
Thanks again. By the time I received your latest reply, however, I had actually already gone back into the CSS and recreated all of the changes that I had previously implemented. Good to know that JotForm does offer a restore function. (I was very surprised when a simple change in the width of the form -- via the Designer -- resulted in ALL prior CSS modifications being wiped out.)
As far as I know there are currently some changes being made in the way designer themes are being loaded/saved, I can only presume that something made that specific configuration be reset in a way due to the same.
I am happy to hear that you were able to restore them, but if it happens again, feel free to let us know and we would be happy to assist with the same as well.
Appreciate the support. For the moment, I think I am in OK shape with this one. Regards.
On behalf of my colleague, you are welcome.
Do get back to us if you have any questions.
Will do. Thanks.