file upload button (dropbox template form)

  • Profile Image
    diversityjournal
    Asked on March 21, 2011 at 03:12 PM

    How do I edit the look of the file upload button (orange one) that is included in the dropbox upload template form?

  • Profile Image
    NeilVicente
    Answered on March 22, 2011 at 02:57 AM

    Hi,

    If you are knowledgeable with CSS, customizing that button is a breeze. Here is an example form which I edited by injecting custom CSS.

     

    Go to Setup & Embed > Preferences > Form Styles > Inject Custom CSS

    Copy the following codes to customize every single aspect of the button. Play around with the colors to find the style you like best. For color codes, go to HTML Color Codes

    .qq-upload-button {
    -moz-border-radius: 5px 5px 5px 5px;
    background: -moz-linear-gradient(center top , #0066CC 0%, #000033 100%) repeat scroll 0 0 transparent;
    border: 1px solid #000033;
    color: #fff;
    display: block;
    font-size: 16px;
    padding: 8px 0;
    text-align: center;
    text-shadow: 0 -1px #000;
    }
    .qq-upload-button-hover {
    background: -moz-linear-gradient(center top , #000033 0%, #0066CC 100%) repeat scroll 0 0 transparent;
    }

    Note:

    The codes inside qq-upload-button-hover refers to the properties of the button when you hover your mouse over it.

  • Profile Image
    diversityjournal
    Answered on March 22, 2011 at 01:06 PM

    What about changing the "upload a file" button text?

  • Profile Image
    NeilVicente
    Answered on March 22, 2011 at 10:23 PM

    The "Upload a File" button is hardcoded in the JavaScript files called by the form. The only way to have the text changed it is to download and edit the .js files, upload it on your web server and make the necessary changes in your embed codes so that instead of calling the JavaScript files from our server, it will instead call the ones hosted on your web server.

    It's a little cumbersome, you'll have to really know what you're doing to prevent any consequent problems from occurring.

  • Profile Image
    leonardochiesi
    Answered on June 28, 2011 at 04:44 AM

    please make the button text editable. English is not the only language in the world.

  • Profile Image
    aytekin
    Answered on June 30, 2011 at 05:27 AM

    Thanks for your suggestion. I agree with you that it should be possible to change it.

    My suggestion would be to disable the "Allow Multiple" option for the upload field for now. It will then turn into the default single file upload button which will show up on the language of the browser.

     

  • Profile Image
    mzelicskovics
    Answered on August 04, 2011 at 02:20 PM

    Button text should def be editable on the multiple upload form!

    But, JotForm is the new standard for online forms so I'm sure in the next update, it will be included =)

  • Profile Image
    NeilVicente
    Answered on August 04, 2011 at 02:35 PM

    @mzelicskovics

    Thank you for your ideas. To my knowledge, it has been added to our deveopment team's todo list. We will let you know once it is made possible.


    Neil

  • Profile Image
    sunilv
    Answered on September 02, 2011 at 11:06 AM

    At a minimum, it should be changed to "Upload Files" It's for uploading multiple files, right?

  • Profile Image
    NeilVicente
    Answered on September 02, 2011 at 11:11 AM

    @sunilv

    Good call. I will forward your suggestion to our developers. Thanks!


    Neil

  • Profile Image
    cronopotencia
    Answered on September 29, 2011 at 02:00 PM
    Hi..thanks for the response.

    I read the reply from Neil but I dont know how to change data in CSS. I
    know what it is but it looked a bit complicated. Is there any other way to
    change the language in the upload file button?

    Thanks again for the assistance

  • Profile Image
    mliz
    Answered on October 01, 2011 at 01:19 AM

    Hi cronoptencia,

    I posted the answer to your question on the following thread.  You can post your comments or feedbacks there to keep it in one place and much easier to keep track.

    Regards.

  • Profile Image
    abajan
    Answered on November 30, 2011 at 10:27 AM

    You will be happy to note that it's now a very simple task to edit the text on multi-upload buttons, thanks to our developer emrew86. For details, please see his post in this thread.

  • Profile Image
    abajan
    Answered on December 22, 2011 at 11:33 PM

    @diversityjournal

    There's now a user guide article regarding custom colors for the button. The CSS codes provided in the said article display the buttons correctly in IE6+ and Opera 11.10+ as well as other browsers.