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

    File upload stops working after applying custom CSS

    Asked by tamsyn on March 28, 2016 at 11:03 AM

    Hello there!

    I seem to be having an issue with the file upload widget. I applied custom CSS to it to format the look so it better matches our brand style. But that CSS code appears to break the functionality of the button.

    I have tried temporarily disabling the custom code (using /* ... */ around the code I wanted to disable), and when I retested the form, the button works. Upon re-enabling the custom code and re-testing, the button no longer works.

    I read that some other users have found that having a page break right after the file upload button has seemed to cause the button to stop working -- but that does NOT appear to be the case for me.

    The specific button ID is #cid_75 in my form "2016 Field Day Bio and Media Form." Here is the code I have disabled:

    #cid_75 div.qq-upload-button {

        /*border : 2px solid !important;

        border-color : #9d3c22 !important;

        margin-left : 150px !important;

        margin-right : -150px !important;

        font-family : "Chaparral Pro", "myriad pro", Open Sans !important;

        font-size : 18px !important;

        font-weight : bolder !important;

        background : #f6b983 !important;

        color : #9d3c22 !important;

        text-shadow : none !important;

        */;

     

    There is also similar code for upload buttons more generally:

    .qq-upload-button.undefined {

        background : #f6b983;

        margin-left : 150px;

        margin-right : -150px;

        font-family : "Chaparral Pro",Open Sans;

        font-size : 18px;

        text-shadow : none;

        color : #9d3c22;

        border : 2px solid;

        border-color : #9d3c22;

        font-weight : bolder;

        

    }

    I have NOT disabled that code, and the button still seems to work (though it doesn't have my specific formatting applied).

    Thanks for any help you can provide!

    tamsyn

    after style size font css code
  • Profile Image
    JotForm Support

    Answered by Kiran on March 28, 2016 at 12:21 PM

    This is due to the Input container hasn't been moved along with the button. Please add the following CSS code to your JotForm so that it should be working fine.

    div.qq-uploader > div.inputContainer {

        top: 2px;

        left: 150px;

    }

    Hope this information helps! Please get back to us if you need any further assistance. We will be happy to help.