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

    Style of File Upload button changes when enabling Allow Multiple option

    Asked by d_lane on May 29, 2016 at 04:02 AM

    ok great that solved my issue. My next issue arises when I change the allow multiple files to yes. It makes my button swell to triple the size of the original. Weird. Any help here?

    before and after the allow multiple file uploads

     

    does that automatically.. (??)

    and then this happens to the upload button when I edit the button in the designer.

    file upload file upload button style custom CSS allow multiple
  • Profile Image
    JotForm Support

    Answered by Boris on May 29, 2016 at 04:05 AM

    When using the Allow Multiple option on a file upload button, the button will start following the same styling as the Submit button of your form. This is because a traditional (HTML) button for uploading files uses styling from your browser, and can only accept a single file to be uploaded.

    In order to allow multiple files to be uploaded, we have implemented our own mechanism which is not a traditional (HTML) file upload, and can therefore accept multiple files. Our custom implementation also follows the styling for the Submit and Print buttons of your form, which is why the button will appear to "swell" when using Allow Multiple option.

    Is there a specific styling you wanted to apply to the file upload field when it is in Allow Multiple mode?

  • Profile Image

    Answered by d_lane on May 29, 2016 at 09:55 AM

    yes like the basic one showed in this picture.

  • Profile Image
    JotForm Support

    Answered by Jan on May 29, 2016 at 11:54 AM

    Please use this custom CSS code: 

    .qq-upload-button {
    padding: 2px 6px !important;
    border : 1px solid #ccc  !important;
    color : #666  !important;
    text-shadow : 0 1px #fff  !important;
    cursor : pointer  !important;
    -moz-border-radius : 3px 3px  !important;
    -webkit-border-radius : 3px 3px  !important;
    border-radius : 3px 3px  !important;
    -moz-box-shadow : 0 1px #fff inset, 0 1px #ddd  !important;
    -webkit-box-shadow : 0 1px #fff inset, 0 1px #ddd  !important;
    box-shadow : 0 1px #fff inset, 0 1px #ddd  !important;
    background : #f5f5f5  !important;
    background : -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%) !important;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)) !important;
    background : -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%) !important;
    background : -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%) !important;
    background : -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%) !important;
    background : linear-gradient(top, #f5f5f5 0%,#eeeeee 100%) !important;
    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ) !important;
    }

    Here's a guide on how to inject custom CSS on the form. The upload button for allow multiple option should look like this:

    Hope that helps. Thank you.

  • Profile Image

    Answered by d_lane on May 29, 2016 at 12:16 PM

    Ok it changed somewhat but I want it to look just like the original button in pic 2. Also the bottom button is still not right.

     

  • Profile Image
    JotForm Support

    Answered by Jan on May 29, 2016 at 12:42 PM

    You need to add this CSS declaration inside the .qq-upload-button {...}.

    width : 70px !important;
    font: 13.3333px Arial !important;

    After that, go to the properties of the upload field and change the button text.

    Here's the result:

    What would you want the bottom upload button to look like?

  • Profile Image

    Answered by d_lane on May 29, 2016 at 12:47 PM

    I want the smooth rounded corners, I want the text and button to be slimmer.

     

  • Profile Image

    Answered by d_lane on May 29, 2016 at 01:23 PM

    and no matter what code i inject it still shows as the grey boxy upload button in my web browser. Please advise exactly where to inject the code you send.

  • Profile Image
    JotForm Support

    Answered by Jan on May 29, 2016 at 01:31 PM

    Is this the form you're referring to? (https://www.jotform.us/form/61433506389156)

    Would you like me to log in to your account and insert that CSS code on the form?

  • Profile Image

    Answered by d_lane on May 29, 2016 at 01:35 PM

    please I would rather have the simple instructions so that in the future I will know how to get it done.

  • Profile Image
    JotForm Support

    Answered by Mike_G on May 29, 2016 at 03:41 PM

    Here's how you can make the button of the upload button with "Allow Multiple" option enabled somehow similar with the upload button that can only upload one file at a time.

    You need to add the following CSS codes below to your form.

    .qq-upload-button {

        background-color: #E4E4E4 !important;

        border-radius: 2px !important;

        width: 86px !important;

        height: 6px !important;

        border-width: 2px;

        border: 1px solid #A2A2A2;

        text-align: center !important;

        background-color: buttonface;

        box-sizing: border-box;

        padding: 2px 5px 17px 7px !important;

        font: 1.09em Arial !important;

        letter-spacing: 0.1px !important;

    }

    You may also refer to this guide to learn how to inject Custom CSS codes to your form.

    How-to-Inject-Custom-CSS-Codes

    Also, change the Button Text of the button in its Properties once the "Allow Multiple" option is enabled.

    I hope this helps. Let us know if you need any further assistance. Thank you.