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

    Adding image over another image on the form

    Asked by shardwick on September 15, 2015 at 05:38 PM
    Lastly, I am trying to add a jpeg OVER the the star plate, but keep the red banner. Can I do that and how? I was able to add it at one point, but I lost the red banner :(
    Image Form Image CSS layout custom layout
  • Profile Image

    Answered by Ben on September 15, 2015 at 06:33 PM

    I am answering this one first, since I think that the space that you want to remove is the one that is used by the smaller image, which is the one that you want to have above the one with the banner - having the smaller image in the middle of this one.

    To do this, you can use the following code:

    #id_1 {
        margin-top: -100px !important;
    }
    #id_83 {
        min-width: 100%;
        text-align: center;
    }
    .headerimg.pngfix {
        height: auto;
        margin-left: -13%;
        max-width: 100%;
    }
    #id_83 .form-image {
        display: block;
        height: 150px;
        margin: 0 auto;
        position: relative;
        top: 80px;
        width: auto;
        z-index: 9;
    }
    @media screen and (max-width:768px) {
        .headerimg.pngfix {
            height: auto;
            margin-left: 0;
            max-width: 100%;
        }
        #id_83 .form-image {
            height: 160px;
            top: 110px;
        }
    }
    @media screen and (max-width:360px) {
        #header > table > tbody > tr td {
            max-width: 240px !important;
        }
        #header > table > tbody > tr:nth-child(2) td div:first-child {
            margin-top: 70px;
        }
        #header > table > tbody > tr:nth-child(2) td div {
            margin-left: -30px;
            text-align: left !important;
        }
        #header > table > tbody > tr:nth-child(2) td div span {
            font-size: 17px !important;
        }
        #id_83 .form-image {
            top: 80px;
        }
    }
    @media screen and (max-width:320px) {
        #id_1 {
            margin-top: -100px !important;
        }
        #header > table > tbody > tr td {
            max-width: 210px !important;
        }
        #id_83 .form-image {
            height: 100px;
            top: 20px;
        }
        #header > table > tbody > tr:nth-child(2) td div:first-child {
            margin-top: 30px;
        }
        #header > table > tbody > tr:nth-child(2) td div span {
            font-size: 16px !important;
        }
    }

    There is a lot of code this time, but as mentioned above, it also removes the space at the top and aligns the image above the larger one.

    In the same time this holds the code to position the image properly on the desktop devices as well as on the mobile devices.

    You can see how it looks by taking a look at this clone of your form: http://form.jotformpro.com/form/52577199331968

    If you like it, you can copy paste the code above to your form, or simply clone the form above to your account following these steps: How to Clone an Existing Form from a URL

    I will update the other thread about the spacing and will separate the exact part that is lowering the space so that you can adjust it further if needed.

  • Profile Image

    Answered by shardwick on September 15, 2015 at 06:44 PM

    Ben, I don't show the changes on my end? I see them on the link you sent, but when I either go to add the code or clone the form, it does not show up? Any idea why?

  • Profile Image
    JotForm Support

    Answered by jonathan on September 15, 2015 at 11:48 PM

    I have cloned our colleague's form instead to your account so that all the customization will be on the form already.

    Please check your form http://www.jotform.us/form/52578680494166 . You should see it like this

    You can start using this form instead of the previous one. If you check your My Forms page http://www.jotform.com/myforms/ you will see the form that have the word (cloned version) on its title/name.

    Let us know if you need further assistance.

     

     

  • Profile Image

    Answered by shardwick on September 15, 2015 at 11:56 PM

    Hello, thanks again for your help with this. Part of my problem is this....do you see the gray lines on each side of the page? Do you see how much room is below the school name & logo/title? I was hoping to eliminate some of that. One bc it's too much room and looks bad & two to make the form not so long. I guess there is no way to get it on 1 page and it look decent? Also not centered on the page. This is 50% enlarged in a PDF file.

  • Profile Image

    Answered by shardwick on September 16, 2015 at 12:37 AM

    I am still here, are you by chance?!

  • Profile Image

    Answered by shardwick on September 16, 2015 at 12:45 AM

    Ok, are you still getting back to me on the other stuff now?

  • Profile Image
    JotForm Support

    Answered by Charlie on September 16, 2015 at 04:14 AM

    Hi,

    Based form your last responses, it seems like you are referring to the fillable PDF version of the form, is that correct? To avoid confusion and for us to better assist you, I went ahead and opened a separate thread for it, please refer to this link instead: http://www.jotform.com/answers/663110. We will address it accordingly.

    Thank you for understanding.