How can I swap out the "choose file" button on my form?

  • Profile Image
    photoculture
    Asked 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. 

  • Profile Image
    abajan
    Answered 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
    estyle
    Answered on November 30, 2011 at 07:56 AM

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

  • Profile Image
    abajan
    Answered 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
    abajan
    Answered 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
    abajan
    Answered 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.