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

    Set backgroung image

    Asked by fuone on September 19, 2013 at 03:03 PM

    Hi, there...

    I`m trying to set an image as background of a form, but this image is quite smaller than the form.

    So, is there any way to enlarge the image to fit it into the form width and height?

    Here is the form: http://jotform.co/form/32605770762860

    And here is the image: http://www.jotform.com/uploads/pinoytech/form_files/pin.png

     

    Hope you can help me.

     

    Thanks!

    form width JotForm uploads height background image
  • Profile Image

    Answered by fuone on September 19, 2013 at 03:57 PM

    Hi,

    I`m almost there! :)

    I insert this custom CSS: and I get the image in the background. But...

    The problem is: Some fields are required. So, if you click the Post Button without complete all the fields, some messages will be shown notifing you. Because of this messages, the forms increase its height. But the background image does not.

    How do I set the image do increase dinamically with the form????

     

    Here is the Custom CSS I used:

    /*background */
    .form-all{
    background: url(http://www.jotform.com/uploads/pinoytech/form_files/pin.png);
    background-repeat:no-repeat;
    background-size: contain;
    -webkit-background-size: contain; /*for webKit*/
    -moz-background-size: contain; /*Mozilla*/
    -o-background-size: contain; /*opera*/
    background-size: contain; /*generic*/
    }

  • Profile Image

    Answered by pinoytech on September 19, 2013 at 04:17 PM

    Hi,

    I've clone your form and make some workaround on it to fix the issue. Can you please take a look at it if you like what I did or not? http://www.jotformpro.com/form/32616723656963

    Thank you!

  • Profile Image

    Answered by fuone on September 19, 2013 at 04:29 PM

    Yeah!!!!

    Its exactlly what I was looking for!!!

    Thank you so so so much!!!

  • Profile Image

    Answered by pinoytech on September 19, 2013 at 04:50 PM

    Good to hear that!

    In order to achieve this in your form, there are few things that you need to do.

    1. Instead of shrinking the fields, I've change it to Expand.

    2. I've injected some custom css into the form.

    .form-error-message {

    display: none;

    }

    .form-html {

    width: 580px !important;

    }

    .form-button-error {

    position: absolute;

    margin-top: -70px !important;

    margin-left: 125px !important;

    }

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image

    Answered by fuone on September 19, 2013 at 05:04 PM

    I`ve noticed that.

    And I did this modifications.

     

    Thank you, man!

  • Profile Image

    Answered by pinoytech on September 19, 2013 at 05:06 PM

    It's my pleasure! If you need our assistance again, please feel free to contact us at anytime.

    Have a nice day!