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.

  • Profile Image

    how can I set my own image as the form background?

    Asked by usucomms on August 02, 2011 at 05:23 AM

    how can I set my own image as the form background? is this possible? I've tried adding the following CSS in the Inject Custom CSS field:

    element.style { background: url("https://mysites.com/site/center.jpg") no-repeat; float: left; font-family: "Arial Black"; font-size: 9px; min-height: 410px !important; overflow: visible !important; width: 500px; }

     

    however, it doesnot work! Please help.

     

    Cheers,

    Chris

     

    ps:

    now change the CSS to the following:

    .form-all{
           backgound-image:url('https://mysites.com/site/center.jpg');
    }
    .form-line { background: none; }

    i've saw the background image once, just once, then disappear again. what is wrong?

    form background Inject Custom CSS style size
  • Profile Image

    Answered by allanftd on August 02, 2011 at 05:35 AM

    Hi Chris,

    Thank you for your message. Please click on the following threads related to changing the background of your forms:

    - Banner / Image Background

    http://www.jotform.com/answers/17068-Banner-Image-background

    - How can I add a background image to my form?

    http://www.jotform.com/answers/16435-How-can-I-add-a-background-image-to-my-form

    - transparent backgrounds

    http://www.jotform.com/answers/16963-transparent-backgrounds

    In all cases, please make sure that you're using the correct  image URL. The one you indicated does not work, though I assume it's just an example.

    Please let us know if you need further assistance. Thank you for using JotForm!

    JOTFORM SUPPORT

     

  • Profile Image
    JotForm Support

    Answered by abajan on August 02, 2011 at 05:44 AM

    Hi Chris

    Thanks for asking. Yes, this is indeed possible. While my colleague Allan was responding, I was logged into your account and making the required changes to the CSS. The changes are highlighted below:

    .form-all {
    background: url("https://mysites.com/site/center.jpg") repeat-y;
    float: left;
    font-family: "Arial Black";
    font-size: 9px;
    min-height: 410px !important;
    overflow: visible !important;
    width: 500px;
    }

    (Of course, in the actual injected CSS of your form, I used the actual URL of the image and not https://mysites.com/site/center.jpg)

    For further information, please review the resources my colleague Allan has referenced. If you require additional help with this or any other aspect of our product, please let us know. Our team will be happy to assist you where we can.

    Thanks.


    ~ Wayne

  • Profile Image

    Answered by brx250 on August 02, 2011 at 05:57 AM

    Hi there,

    In addition to what my colleagues have said, you can also click "Preferences" under the "Setup & Embed" tab and choose "Background" from the "Form Styles" tab and add the following,

    url(http://www.domain.com/yourfile.jpg)

    This is if you want a quick output of what your form would look like. Still, I strongly recommend CSS for a wider customization of your form's appearance.

    Thank you for using JotForm.

     

    _____________________________________________    

    Albert JotForm Support   

  • Profile Image
    JotForm Support

    Answered by abajan on August 02, 2011 at 06:00 AM

    You're quite right, Albert. I forgot about the Form Styles tab in the Preferences.

    Chris, please check your form again. I have commented out your CSS and added mine (again LOL).


    ~ Wayne

  • Profile Image

    Answered by usucomms on August 02, 2011 at 06:47 AM

    Thanks for all your help guys. Now I am able to see the background image. By the way, Wayne, where did you comment out my CSS? in the inject custom css section? cheers,

  • Profile Image
    JotForm Support

    Answered by abajan on August 02, 2011 at 07:03 AM

    Glad that everything worked out, Chris. I had commented out your original code using comment tags but now when I look into your injected CSS, I don't see what I did. Hmm... that's strange.

    Anyway, all's well that ends well.

    Incidentally, when I first looked at the form, it was taller. Did you reduce its height to match that of the image because repeating the image vertically showed a horizontal line? If so, here's a remedy for that using Photoshop. (There's probably a way to accomplish this in GIMP too.)

    If there's anything else related to your forms with which you need help, please let us know. We'll be glad to assist you where we can.


    ~ Wayne

  • Profile Image

    Answered by usucomms on August 03, 2011 at 04:42 AM

    Hi, Wayne, Thanks for answering my question. That helps a lot. Now the question is how to set the background image for the Thank You Message? I would like to use the same image for the Thank You message. Please help. Cheers,Chris

  • Profile Image
    JotForm Support

    Answered by abajan on August 03, 2011 at 07:17 AM

    Hi again Chris

    LOL What I thought would be a simple procedure is proving to be quite challenging. Clone this clone of your form, make a test submission on it and you'll see the problem.

    I have to go out for a while but when on my return I'll see if I can find a solution. Perhaps in my absence one of my colleagues or another user may provide a solution.

     

    ~ Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on August 03, 2011 at 09:20 AM

    UPDATE: Eureka!

    Replace all of the code in your form's Thank You message with this (via the Edit HTML Source button).


    ~ Wayne

    P.S Attempting to compensate for the 8 pixel margin on the body with a declaration of  margin: -8px; in the Thank You message's div gave inconsistent results across browsers. So, I simply omitted it.

  • Profile Image

    Answered by jreh on August 10, 2011 at 06:35 PM

    <script src="http://www.jotform.com/min/g=feedback" type="text/javascript">
    new JotformFeedback({
    formId: "12132950385",
    buttonText: "welcome to jotform",
    base: "http://www.jotform.com/",
    background:'#08FCF4',
    fontColor:'#050000',
    buttonSide: "top",
    buttonAlign: "right",
    type:2,
    width: 700,height: 500});
    </script>

  • Profile Image
    JotForm Support

    Answered by NeilVicente on August 10, 2011 at 07:21 PM

    @jreh

    Would you to care to provide further details regarding your issue? The codes you have posted is a feedback button code. I inspected your form and found that you're using a theme. Do you have any problems with that? Would you like to change the background as well? If yes, you may change your form's background image by following either of the solutions laid out by my colleagues.

    If you need further help, please let us know. Thanks!


    Neil

  • Profile Image

    Answered by ariel_baleli on October 21, 2011 at 11:10 AM

    how can i add image backround to one of my form i attatch it on the sidbar

    my form script <script type="text/javascript" src="http://form.jotform.com/jsform/12934519354"></script>

     my image backround <img src="http://www.greenenvironmentsolution.com/wp-content/uploads/2011/10/contact-us-e1319208129762.png"

  • Profile Image
    JotForm Support

    Answered by idarktech on October 21, 2011 at 12:06 PM

    Hi Ariel,

    I have made it simple for you, just feel free to clone my form http://www.jotform.com/form/12932725610 . If you don't know how, then please follow this guide.

    I hope that would help. Thank you!

  • Profile Image

    Answered by ariel_baleli on October 21, 2011 at 01:18 PM
    its not working please advise

    this is how it looks http://www.greenenvironmentsolution.com/

  • Profile Image
    JotForm Support

    Answered by NeilVicente on October 21, 2011 at 01:48 PM

    @ariel

    I have posted a solution to your problem in this thread - http://www.jotform.com/answers/52061-help-with-image-backround.

    Please try it and notify us how it goes from here on out.

  • Profile Image

    Answered by virtualearth on February 09, 2012 at 03:13 AM

    Hi,

    We have long forms to collect patient information (over 6500px height). When a user completes the form the thank you is delivered at the top of the form. We would like to use a repeatable thank you image for after the user submits rather than rely on the user scrolling to the top of the iframe. I have an image we have been testing with however we have not been able to get it to appear after a form is submitted.

    Image is: http://www.cityclinic.com.au/images/cityclinic_thankyou_form.jpg

    We don't want it to use as a backkgound image to the form only as a background to the thank you.

    If we can get it to work we will organise an image to roll out with.

     

    Cheers

    CC

     

  • Profile Image
    JotForm Support

    Answered by liyam on February 09, 2012 at 04:15 AM

    Unfortunately, it is not possible to put a tiled background image on the Thank You message option.  You will have to point it to your own custom URL to be able to fully customize your thank you page.

  • Profile Image
    JotForm Support

    Answered by abajan on February 09, 2012 at 05:35 AM

    @virtualearth
    With due respect to my colleague, I don't know the particular thank you message to which you're referring but a tiled background image can indeed be included in a JotForm thank you message. You'll see such a message if this form is submitted. To find out what code was used, clone the form and examine the thank you message's source.