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

    Filepicker Feature Request: Button Style Option Required

    Asked by markashton on July 04, 2013 at 03:20 PM

    Hi,

    The big blue button would be nice to ... well at least change colour. Can it be done please

    Thanks Mark

    colour thanks filepicker.io
  • Profile Image
    JotForm Support

    Answered by jonathan on July 04, 2013 at 03:49 PM

    Hi Mark,

    It seems it can be done using injected CSS codes. Because I can see in the inspect element the CSS for that filepicker.io button.

     

    a quick test result

     

    Thanks.

  • Profile Image

    Answered by markashton on July 04, 2013 at 04:36 PM

    Hi Jonathan,

    Yeah i did look at the CSS via Inspect element ... but it scaredme to death as there seems to be stacks of it. It's a bit overkill isn't it ... for a button.

    Can I feature request the button style and colour thing that we have with the submit button

    Many thanks

  • Profile Image

    Answered by pinoytech on July 04, 2013 at 04:37 PM

    @Mark,

    Use and inject this custom css into your form in addition to my colleague's response.

    .filePicker-button {

    background: linear-gradient(to bottom, #008000 0%,#008000 100%);

    }

    .filePicker-button:hover {

    background: linear-gradient(to bottom, #008000 0%,#008000 100%);

    }

     

    You can check this cloned form: http://www.jotformpro.com/form/31846176706965

    Thank you!

  • Profile Image

    Answered by markashton on July 04, 2013 at 04:40 PM

    Ahh ... good call pinoytech.

    Now that I can handle

    Much Gusto Mon Amigo

  • Profile Image

    Answered by pinoytech on July 04, 2013 at 04:42 PM

    It's my pleasure Mark! If you need our assistance again, feel free to let us know.

    Have a nice day!

  • Profile Image

    Answered by markashton on July 04, 2013 at 04:59 PM

    Strangely, this button only changes colour via CSS on desktops. I've tried on Iphone Safari & mini Opera ... still blue? I've cleared the cache twice too.

    Does that CSS only apply to desktops?

    If not please give it a try on your smartphone ... do you get a change in colour.

    Thanks Mark

  • Profile Image
    JotForm Support

    Answered by Mike_T on July 04, 2013 at 05:59 PM

    We can use more css browser specific prefixed to cover mobile and other browsers.

    I have tried with the following CSS generator and it worked just fine:

    http://www.colorzilla.com/gradient-editor/

    1. Generate your background and copy the CSS code.

    2. Paste it twice, for default and hover button state:

    .filePicker-button {

    background: #fefcea; /* Old browsers */
    background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(99%,#f1da36)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fefcea 0%,#f1da36 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fefcea 0%,#f1da36 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fefcea 0%,#f1da36 99%); /* IE10+ */
    background: linear-gradient(to bottom, #fefcea 0%,#f1da36 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */

    }


    .filePicker-button:hover {


    background: #fefcea; /* Old browsers */
    background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(99%,#f1da36)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fefcea 0%,#f1da36 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fefcea 0%,#f1da36 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fefcea 0%,#f1da36 99%); /* IE10+ */
    background: linear-gradient(to bottom, #fefcea 0%,#f1da36 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */

    }

    Thank you.

  • Profile Image

    Answered by markashton on July 05, 2013 at 05:27 AM

    Mike,

    Thanks for that ... genius ... great web tool.

    So, for mobile everyone you should use the second technique to change the color of the filepicker.io button ... if you are working on smartphones.

    Also note that the hover css is not needed as it is touch screen ... you can't actually hover on a mobile device can you?

    Point for the developers ... filepicker.io has changed its name .. a bit to Ink Filepicker

    Point for the developers ... obviously this is a massive pain ... could I flag up that I would love the button style gallery just like the submit button has. far better.

    Thanks Mark

  • Profile Image
    JotForm Support

    Answered by abajan on July 05, 2013 at 06:34 AM

    It's a good idea, Mark. We'll submit the request for you. (And no, one cannot hover over a mobile device ... at least not yet!)

    Cheers

  • Profile Image

    Answered by markashton on July 05, 2013 at 06:45 AM

    Hi Abajan,

    I've also noticed that when you come back from the filepicker.io interface (on a smartphone) the color of the button reverts back to the original blue.

    I thought this perhaps required a .filePicker-button:visited class ... but it doesn't seem to make a difference.

    Yeah ... this to much of a ball-ache ...

    What needs to happen is the button style gallery ... then you can marry up your upload file ... and Submit buttons.

    At the moment the design is all over the shop.

    Thanks ... any chance that can be implemented soon.

    Regards Mark

  • Profile Image
    JotForm Support

    Answered by abajan on July 05, 2013 at 06:57 AM

    Mark,

    The ticket has been submitted but we're in no position to indicate when the requested functionality will be implemented. We'll keep you updated.

    Regards


    Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on July 05, 2013 at 07:00 AM

    Oh yeah, we'll see if we can adjust the injected CSS to fix the reverting issue.

  • Profile Image

    Answered by markashton on July 06, 2013 at 07:54 AM

    Yeah ... the filepicker.io service is excellent and a great addition to jotform. I've been testing it.

    However, its integration creates design dismay .. ;-)  as we've discussed

    The CSS thing is actually quite wieldy and doesn't totally work

    I know this is in the pipeline ... but I would like to flag this up as a "Highly important" rather than a "nice to have"

    Thanks mark

  • Profile Image
    JotForm Support

    Answered by Welvin on July 06, 2013 at 09:09 AM

    Hi Mark,

    I've noted your suggestion to set this as Important. While waiting for an update, please try to add/inject this CSS Mobile Query to the form: http://pastebin.com/Uy1Dra3Y

    Let me know if it's working or not. I've done this method to my form: http://www.jotformpro.com/form/31471334025949

    Note that I couldn't make a test because I have No SmartPhone. My colleagues may have, but they're not available at this moment. I'd appreciate if you could. So far, it works when using Emulators.

     

    Thanks

  • Profile Image

    Answered by markashton on July 09, 2013 at 04:43 AM

    Welvin,

    Well intentioned and thanks for that .... but I would have to say we are going into the realms of crazy CSS inject just for a button color. No one is going to do it ... ormost won't have a clue.

    The solution is the button style gallery ... job done.

    Possible while the new filepicker api and libarraies are being implemented.

    Thanks Mark

  • Profile Image
    JotForm Support

    Answered by Welvin on July 09, 2013 at 05:27 AM

    Hi Mark,

    Yes, our developer is working with updating our Filepicker API. This thread is already forwarded to them as well.

    We'll keep you updated and thanks for your effort with reporting bugs and suggesting features. :)

    Cheers!

  • Profile Image

    Answered by markashton on July 09, 2013 at 05:32 AM

    Hi Welvin,

    Kenneth is ... can you put it to him to integrate the button style gallery

    Thanks Mark

  • Profile Image
    JotForm Support

    Answered by Welvin on July 09, 2013 at 05:36 AM

    Hi Mark,

    I hope that you will understand that we have a process to follow. We cannot assigned thread directly to our developers, and we can't mandate them to work on this per posting.

    All we can assure you is every request/report will be accommodated. We just can't give anyone a timeframe.

    Thanks for your patience and understanding.

  • Profile Image
    JotForm Support

    Answered by kenneth on July 09, 2013 at 09:55 AM

    Hi, I have now made some changes on the Filepicker button. You can now set the button style as well as the custom button text. 

    Please try them out and let us hear some feedbacks from you. Confirm if its working from your end.

    Thanks,
    Kenneth

  • Profile Image

    Answered by markashton on July 09, 2013 at 10:01 AM

    Kenneth

    Great stuff doing that - well needed.

    Have tested.... check this ....

    Please note that I have used the same button from the button gallery for submit and filepicker.

    Note they are different on smartphones .. but not on desktops ... some stylesheet thing for filepicker needed

    http://screencast.com/t/FAPCO4DliL

    Come back I'll test again

    Regards Mark

  • Profile Image

    Answered by markashton on July 09, 2013 at 10:03 AM

    So, to be clear ... smartphones where the real use will be for filepicker is ... dispolays the same button differently for submit and filepicker.

    Thanks mark ... waiting to test again ;-)

  • Profile Image

    Answered by markashton on July 09, 2013 at 11:17 AM

    Kenneth,

    I still had the CSS injected ... that may have been causing a problem. 

    Removed it ... there does appear to be a problem with that button actually i.e. filepicker button has white text where submit button has dark text

    Thanks

  • Profile Image
    JotForm Support

    Answered by kenneth on July 09, 2013 at 11:26 AM

    Unfortunately, the button style for submit button as well as the filepicker button were using the same stylesheets. So there might be still some cache involved. Have you tried to clear some browser cache?

    Thanks,
    Kenneth 

  • Profile Image

    Answered by markashton on July 09, 2013 at 11:30 AM

    Kenneth,

    I've done a little form to demonstrate. What do you see. The button is exactly the same in the Jotform builder - I've used same button for both ... but it looks different in browser doesn't it:

    http://form.jotform.co/form/31894874069874

    Thanks Mark

  • Profile Image
    JotForm Support

    Answered by kenneth on July 09, 2013 at 11:44 AM

    You are right, okay I have again made some few changes with the stylesheets. They should be working fine now.

    Thanks,
    Kenneth 

  • Profile Image

    Answered by markashton on July 09, 2013 at 11:47 AM

    Hi Kenneth,

     

    created a new form here: http://form.jotform.co/form/31894288736874

    No change?

    Thanks mark

  • Profile Image
    JotForm Support

    Answered by kenneth on July 09, 2013 at 11:58 AM
    Actually there is. Just please wait a lil bit more. We have multiple servers that needs to be re-updated. It will take some time to propagate.If still not reflecting, try to reintegrate with your form or clear some form cache.-Kenneth
  • Profile Image

    Answered by markashton on July 09, 2013 at 12:27 PM

    Kenneth,

    Shall test this in 1 hour then ... one thing ...

    Is it possible that with your filepicker genius at this point that you might possibly be able to look at implementing a thumbnail image into the html reports for images for filepicker.

    Exactly the way it is for the normal upload function ... a little magnifying glass that popsup a thumbnail.

    It's worth me asking while you're focused on filepicker ... because this addition is sorely needed ... as I have advised here:  http://www.jotform.com/answers/239447-Filepicker-io-Possible-to-get-thumbnail-popup-in-reports

    Thanks for all your help and getting the button nailed

    I really appreciate it.

    Regards Mark

  • Profile Image

    Answered by markashton on July 09, 2013 at 03:44 PM

    That works beautifully Ken .. but what's happened to the ability to edit the filepicker interface as per this thread ... you need to make the open dialog sub-header editable ...

    http://www.jotform.com/answers/240923-Filepicker-s-Interface-Is-Now-Not-Editable-Why?entrymessage=10732640770