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 position the form in respect of the background image?Asked by CarlosGilBallesteros on May 12, 2015 at 07:35 AM
Hi there supporters, maybe you've received lots of questions like this one, but I've been checking in the forum and I could not find the exact solution or answer.
This is the form I want help with
There is a background image with a smartphone in the center. I would like to position the form so it looks like the form is in the white zone of the smartphone's screen. I guess it has to be done injecting CSS codes, but I cannot find which CSS codes are the right ones.
Thanks in advance!
Yes, you can achieve that by injecting the following small bit of custom CSS:
You can also open the Designer, and paste your CSS code in the textarea under the CSS tab of the Designer.
This is what it would look like on a desktop:
However, please note that there might be some problems with getting it perfectly aligned in some screen resolutions, and it may look especially non-aligned on small screen sizes, tablets and smart phones.
It is possible to use @media queries in the CSS to limit this positioning to only screen sizes that display it properly.
Please test out if this is what you are trying to achieve, and let us know.
Great Boris, it is exactly what I needed
I will take the risk with the screen resolutions, if I do not try I will never know ;-)
However, I'm surpised it is also needed to insert the CSS code for width... I thought it was set up with the option "Form Width" of menu "Form Layout" in the Designer
Anyway, thanks a lot!
You are welcome, I'm very glad to have helped.
When it comes to using custom CSS for width, it is not required. I just wanted to keep this entire tweak as short and as contained as possible, so that you can easily remove everything in one go if you do not like how it turns out.
Also, as the form's width is closely related to the positioning it into the background image of a phone, I thought it makes more sense to do both positioning tweaks in one short bit of code.
I hope my explanation was clear.
Thank you for using JotForm, please ask if you need further help in setting up your form, we are here to help.