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

    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

    http://form.jotformpro.com/form/42664624775969

    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!

    background image in style find thanks
  • Profile Image
    JotForm Support

    Answered by Boris on May 12, 2015 at 09:21 AM

    Hello Carlos.

    Yes, you can achieve that by injecting the following small bit of custom CSS:

    .form-all {
        width: 393px;
        margin-top: 75px;
    }

    Here is a guide on injecting custom CSS to your form.

    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.

    Kind regards.

  • Profile Image

    Answered by CarlosGilBallesteros on May 12, 2015 at 09:35 AM

    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!

     

  • Profile Image
    JotForm Support

    Answered by Boris on May 12, 2015 at 09:42 AM

    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.