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

    How can I customize File Upload Buttons?

    Asked by HACA on December 24, 2016 at 09:07 AM

    I understand how to customize Submit buttons using Button Style or Design/CSS.

    However, I am not successful in changing the button colors for file uploads. I have seen several posts on this topic, but they are dated and there may be new functionality available. Additionally, when attempting to use the posted CSS, no changes were applied.  I did not find anything on adjusting Widget Buttons.

    I am testing two types of file uploads:

    One is using the Basic File Upload button and the other is using a Widget.

     

    How can I customize the file upload buttons (Basic Field Image Upload and Image Upload Preview Widget) to look like the Submit Button.

     

    https://form.jotform.com/63583482173966

    Thank you,

     

     

  • Profile Image
    JotForm Support

    Answered by KadeJM on December 24, 2016 at 11:42 AM

    That's an interesting point you have that I don't think was considered much before other than creating workarounds for such with injected css. Thanks for bringing this to our attention again.

    I also think this would be something useful to have if built-in though for now yes, the only way would be through custom css to customize the styling of your upload buttons.

    It is possible to use simple css to customize the basic file upload field but, for widgets if the widget doesn't support css then no this would not be possible.

    How were you trying to style them roughly?

     

  • Profile Image

    Answered by HACA on December 24, 2016 at 12:27 PM

    Yes, I agree. I think for the basic built-in file upload button there should be an option similar to the submit button.  If available for one, I would think it could be made available for the other.

    I am not sure if the CSS works because when applying to the basic file upload button I was not able to have any luck.

    I am trying to get the upload button roughly like the Submit button.  It could be basic blue (or any darker color) background and white text. 

    The upload widget I am using does support CSS.

    The challenge is that I have a white background and the buttons essentially blend in, which may make it easy to overlook.  This field will be a required field and I want to ensure users upload the required file.

    Any assistance is greatly appreciate it.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by Mike_G on December 24, 2016 at 03:21 PM

    The following codes below is for the "Select Image" button in the Image Upload Preview widget in your form.

    button#pickImage{

        color: #eeeeee !important;

        background: #1c0f6d !important;

        box-shadow: none !important;

        text-shadow: none !important;

        border: 1px solid #0d4aab !important;

    }

    button#pickImage:hover{

        text-shadow: -1px -1px 0px #003ea1 !important;

        border: 1px solid #0d4aab !important;

        -moz-box-shadow: inset 0px 1px 0px 0px #97c4fe !important;

        -webkit-box-shadow: inset 0px 1px 0px 0px #97c4fe !important;

        box-shadow: inset 0px 1px 0px 0px #97c4fe !important;

        background: #1e62d0 !important;

        background: -moz-linear-gradient(top, #3d94f6 0%, #1e62d0 100%) !important;

        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3d94f6), color-stop(100%,#1e62d0)) !important;

    }

    button#pickImage::before {

        background-image: url(https://cms.jotform.com/uploads/image_upload/image_upload/Mike_G/39360_download.png) !important;

    }

    button#pickImage:active {

        transform: translateY(2px) !important;

    }

    As instructed by my colleague above, the codes above need to be added in the custom CSS tab of the widget.

    With regards to the "Choose File" button of the basic File Upload field, you can add the following CSS codes below to your form. https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    input#input_3:before {

        content: "Choose File" !important;

        -webkit-appearance: button !important;

        -moz-appearance: button !important;

        appearance: button !important;

        cursor: pointer !important;

        position: absolute !important;

        padding: 3px !important;

        width: 80px !important;

        text-align: center !important;

        color: #eeeeee !important;

        background: #1c0f6d !important;

        box-shadow: none !important;

        text-shadow: none !important;

        border: 1px solid #0d4aab !important;

    }

    input#input_3:hover::before {

        text-shadow: -1px -1px 0px #003ea1 !important;

        border: 1px solid #0d4aab !important;

        -moz-box-shadow: inset 0px 1px 0px 0px #97c4fe !important;

        -webkit-box-shadow: inset 0px 1px 0px 0px #97c4fe !important;

        box-shadow: inset 0px 1px 0px 0px #97c4fe !important;

        background: #1e62d0 !important;

        background: -moz-linear-gradient(top, #3d94f6 0%, #1e62d0 100%) !important;

    }

    input#input_3:active::before {

        transform: translateY(2px) !important;

    }

    Or, you can also try to enable the "Allow Multiple" option of basic File Upload field.

    Then, set the maximum number of files allowed to 1 (if you don't want your respondents to upload more than 1 file) and its Button Style to "Simple Blue" similar to your "Submit" button.

    You can also apply the CSS codes below to your form instead (If "Allow Multiple" is enabled)

    .qq-upload-button-hover{

        text-shadow: -1px -1px 0px #003ea1 !important;

        border: 1px solid #0d4aab !important;

        -moz-box-shadow: inset 0px 1px 0px 0px #97c4fe !important;

        -webkit-box-shadow: inset 0px 1px 0px 0px #97c4fe !important;

        box-shadow: inset 0px 1px 0px 0px #97c4fe !important;

        background: #1e62d0 !important;

        background: -moz-linear-gradient(top, #3d94f6 0%, #1e62d0 100%) !important;

    }

    Here's the form where I have applied the changes above: https://form.jotform.com/63584937334971

    I hope this helps. If you need any further assistance, please feel free to contact us again anytime

    Thank you.

  • Profile Image

    Answered by HACA on December 26, 2016 at 01:17 PM

    This is great.  I appreciate the assist and it worked.

    I customized my form and tested.  However, for the Widget - after attaching the file, the "Trash" and "Upload Image" buttons are the gray colors (having the same issue with blending into a white background). Is there way to customize these button colors?  Preferably to the same colors as with the select button.

    Thanks,

     

  • Profile Image
    JotForm Support

    Answered by Nik_C on December 26, 2016 at 02:15 PM

    Please try adding the below CSS in Custom CSS field of the Image picker:

    button#deleteImage {

     color: #eeeeee !important;

        background: #1c0f6d !important;

        box-shadow: none !important;

        text-shadow: none !important;

        border: 1px solid #0d4aab !important;

    }

    button#uploadImage {

     color: #eeeeee !important;

        background: #1c0f6d !important;

        box-shadow: none !important;

        text-shadow: none !important;

        border: 1px solid #0d4aab !important;

    }

    If you have any further questions please let us know.

    Thank you!

     

  • Profile Image

    Answered by HACA on December 27, 2016 at 11:23 AM

    Thanks.  It works with the exception that now the black icons on the buttons do not show up.  So, I used a lighter background and changed the text to black. I could also use the hover color for consistency.  The solution provided works great.

     

     

    Thanks for the assist!

     

    Regard,