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

    Form Designer: Submit Button background only displaying in designer mode, not online

    Asked by Nightwing308 on June 29, 2016 at 11:53 PM

    I'm trying to add a image backgrounds to the "Submit" and "Reset" buttons of my contact form and different background images to the roll-over (mouse-over) states of both buttons.

    The images display perfectly in "Designer" mode (see attached screen shot "designer.jpg"), and on the main page of the Form Builder, but in the "Preview" and the online version of my form  https://form.jotform.co/61807118013851  the buttons are grey (no background images showing)

    This is the CSS I've inserted for the buttons


    .form-submit-button {
        background-image : url(http://www.nightwingsgraphics.com/CPI/assets/img/BlueChrome2.jpg)!important;
        color : #ffffff!important;
        border-style : double!important;
        border-width : 3px!important;
        border-color : #000040!important;
        height : 50px!important;
        width : 100px!important;
        box-shadow : 5px 5px 5px #323232;
        font : bold 18px Times New Roman,sans-serif!important;
    }

    .form-submit-button:hover {
        background-image : url(http://www.nightwingsgraphics.com/CPI/assets/img/BlueChrome.jpg)!important;
        color : #ffffff!important;
        border-style : double!important;
        border-width : 3px!important;
        border-color : #000040!important;
        height : 50px!important;
        width : 100px!important;
        box-shadow : 5px 5px 5px #323232;
        font : bold 18px Times New Roman,sans-serif!important;
    }

     

    The code for the .form-submit-reset  and .form-submit-reset:hover  is the same

    I also tried using just background: url(.....) and background-img:url(....) but with the same disappointing result of the image backgrounds showing ONLY in "Designer" mode and on the main page of the Form Builder. What am I doing wrong???

    Page URL:
    https://form.jotform.co/61807118013851

    Screenshot
    designer button background http https
  • Profile Image
    JotForm Support

    Answered by Jim_R on June 30, 2016 at 12:36 AM

    I confirmed and replicated the same problem you described. It works on the designer but fails to load on the actual form. The reason behind this was because of the URL you're using for your images. Both the images you use are sitting on a plain http source while your form is running on https. This causes the browser to throw warnings thus causing the images to not display.

    To confirm this, try loading your form in a non https version: http://form.jotform.co/61807118013851

    You will notice that by using the above link, your blue images (both static and hover) works perfect.

    Now that we got the cause figured out, let's move on to the resolution, you have 2 options to choose from:

    1. Either upload your images to a secured https page (this one would be the better option so you have the image hosted by yourself on your own https page) OR

    2. Use these links instead, I took the liberty of uploading your images to a secured page. Feel free to use them if you don't have https:

    https://cms.jotform.com/uploads/image_upload/image_upload/Jim_R/37580_BlueChrome.jpg

    https://cms.jotform.com/uploads/image_upload/image_upload/Jim_R/37582_BlueChrome2.jpg

    Just update your injected CSS Codes like so:

    .form-submit-button {

        background-image : url (https://cms.jotform.com/uploads/image_upload/image_upload/Jim_R/37582_BlueChrome2.jpg) !important;

    ...

    }

     

    .form-submit-button:hover {

        background-image : url (https://cms.jotform.com/uploads/image_upload/image_upload/Jim_R/37580_BlueChrome.jpg) !important;

    ...

    }

    Hope that helped! Don't hesitate to get back to us if you need further assistance.

  • Profile Image

    Answered by Nightwing308 on June 30, 2016 at 11:03 AM

    PERFECT! Thank you so very much, Jim, for this easy solution. I updated the CSS code as suggested (since I don't have https), and that did the trick. Awesome!

  • Profile Image
    JotForm Support

    Answered by Jim_R on June 30, 2016 at 12:05 PM

    Always a pleasure to help! :)