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 to change the text in the file upload field?

    Asked by colmos on October 19, 2016 at 09:52 AM
    One last thing regarding this. I have a file upload on my form. The button (Choose File) and placeholder text (no file selected) aren't on the warnings list. Is there another place I could change this? 
  • Profile Image
    JotForm Support

    Answered by Kevin_G on October 19, 2016 at 09:58 AM

    The text shown in the File Upload field cannot be changed through the form settings, the text is shown and translated automatically in the field itself, this is something by default in the <input type="field"/> HTML tag and the text can only be translated based on the user's browser settings. 

    However, with some custom CSS code you may hide the default button and show a customized one, please inject this code to your form that will help you to change the field layout and text shown in it: 

      .form-all .form-upload::-webkit-file-upload-button {

          visibility: hidden;

    font-size: 0px;

        }

        .form-all .form-upload::before {

    visibility: visible;

            content: 'Choose File';

            background: #d9b866 none repeat scroll 0 0;

            border: 1px solid #ccc;

            border-radius: 6px;

            box-shadow: none;

            color: #fff;

            font-family: "Josefin Sans",sans-serif;

            font-size: 16px;

            font-weight: normal;

            padding: 9px 15px;

            text-shadow: none;

        }

    Do note that you may change the background color as well as the text in "Content" property. 

    This guide will help you to inject the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    However, the text cannot also be translated, it will show a fixed text and it will not change with the browser's language settings either. 

    However, you may also hide completely the file upload button and use the label as button, this can be translated from the form settings and then you may style the label to show as a button as well.

    The only change would be to apply this code to the label instead of the upload button:

    labelID {

    visibility: visible;

     

            content: 'Choose File';

     

            background: #d9b866 none repeat scroll 0 0;

     

            border: 1px solid #ccc;

     

            border-radius: 6px;

     

            box-shadow: none;

     

            color: #fff;

     

            font-family: "Josefin Sans",sans-serif;

     

            font-size: 16px;

     

            font-weight: normal;

     

            padding: 9px 15px;

     

            text-shadow: none;

     

        }

    Please if you have any question, let us know.