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 swap out the "choose file" button on my form?

    Asked by photoculture on September 30, 2011 at 02:50 PM

    I was able to easily swap out the "SUBMIT" button, but in form editing, when I select the Upload Image category, there's no option at the top to modify the button image. Help, please. 

    Screenshot
  • Profile Image

    Answered by JotFormHelper on September 30, 2011 at 06:51 PM

    Although Im Training For JotForm I Would Like To Know THis Too!

  • Profile Image

    Answered by JotFormHelper on September 30, 2011 at 06:52 PM

    Good Question!

    JotForm Will Help You Soon!

    Thank You For Using JotForm

     (Im just a forum helper!) 

     -Y H

     

     

  • Profile Image

    Answered by JotFormHelper on September 30, 2011 at 07:46 PM

    Hi,

    The file upload button text is inherent to a browser and cannot be changed. Chrome and Safari are both WebKit-based browsers, and for the most part act very similarly, that is why they display the same text for the upload button.

    What you can do is configure your file upload field to accept multiple files, so that the button changes to an orange one, with "Upload a File" as text that is uniform across all browsers.

    Just in case you're wondering, the "Upload a File" text cannot be modified.

    We hope you find this useful. Let us know if you have other questions or issues that need attention.


    This Text Was Found And Made By JotForm Support On:

    https://www.jotform.com/answers/41832-File-Upload-browse-button-changes-to-choose-file

    ___________________________________________________________________________

    Thank You For Using JotForm

    (Im just a forum helper!) 

    -Y H

  • Profile Image
    JotForm Support

    Answered by abajan on September 30, 2011 at 10:16 PM

    Hi photoculture

    Just for the record, the text on multi-upload buttons can be changed but the process is a rather tedious one.

    It may also interest you to know that a request was submitted some weeks ago to have the text on multi-upload buttons changed from "Upload a file" to "Upload Files".

    Thanks for the help, Yasin.


    ~ Wayne



  • Profile Image

    Answered by estyle on November 30, 2011 at 07:56 AM

    Can we edit the orange style of the button?  Custom CSS?

  • Profile Image
    JotForm Support

    Answered by abajan on November 30, 2011 at 10:14 AM

    Yes, the color of multi-upload buttons can be changed to your liking, as outlined by my colleague NeilVicente in this thread. Moreover, editing the button's text is now a much simpler task, thanks to emrew86 who is one of our developers. Please see his post in this thread.

  • Profile Image
    JotForm Support

    Answered by abajan on November 30, 2011 at 12:15 PM

    Oops! I only just discovered, after testing Neil's solution in my browsers (Firefox 8, IE 8, Safari 5, Chrome 15 and Opera 11, all on Windows) that his soltution works only in Firefox! That's because extra declarations required to override those in JotForm's main form stylesheet are missing.

    I'll see if I can re-write the CSS that should be injected to work in all (or at least most) browsers and post it here later.

  • Profile Image
    JotForm Support

    Answered by abajan on November 30, 2011 at 06:23 PM

    The following CSS works in all of the browsers mentioned above however neither IE 8 nor Opera 11 render the gradient effect. Moreover, rounded corners are not be displayed in IE 8 but that's another topic.

    .qq-upload-button {
    background: #03C;
    background: -moz-linear-gradient(top, #06C 0%, #003 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#06C), color-stop(100%,#003));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#06C', endColorstr='#003',GradientType=0 );
    text-shadow: 0 -1px #003;
    border: 1px solid #003;
    }

    .qq-upload-button-hover {
    background: #039;
    background: -moz-linear-gradient(top, #003 0%, #06C 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003), color-stop(100%,#06C));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003', endColorstr='#06C',GradientType=0 );
    }

    Of course, if you're good at blending colors, feel free to change the values to suit.