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

    Change Colour & Shrink Upload Button

    Asked by longo on May 09, 2012 at 12:18 PM

    Hi Folks

    I have an upload button on my form, my problem is its massive and the colour doesn't suit my site theme. Is there a method i.e CSS which I could use to change the size and colour or even use a custom button image of my own.

    Thanks

    Page URL:
    http://leathersolutions.co.uk/Contact%20Us.html

  • Profile Image
    JotForm Support

    Answered by abajan on May 09, 2012 at 02:30 PM

    There's a guide on changing the button's color but I'll have to check and see if the size can be also be changed.

    I'll get back to you later today (Barbados time).

  • Profile Image
    JotForm Support

    Answered by abajan on May 09, 2012 at 03:08 PM

    Okay, it's actually easier than I thought. The class to change the width is qq-uploader. So, if you want to make it narrower than its default 224 pixels (as can be found in the form's stylesheet), inject the following CSS:

    .qq-uploader {
    width: 120px;
    }

    That will make it 120 pixels wide.

    The height and font are styled via the qq-upload-button class:

    .qq-upload-button {
    padding: 4px 0;
    font-size: 14px;
    }

    Injecting both of the above rules into your form will produce a button similar to that below:


    If you need additional assistance with this or any other JotForm related matter, please let us know.

     

  • Profile Image

    Answered by longo on May 09, 2012 at 03:42 PM

    Thanks abajan, excellent work.

  • Profile Image
    JotForm Support

    Answered by abajan on May 09, 2012 at 04:27 PM

    Glad I was able to help you :)

  • Profile Image

    Answered by longo on May 10, 2012 at 05:43 AM

    Just a thought abajan, would it be sound to harmonise the submit and upload button themes, it would help continuity as the buttons would look identical on the same form.

  • Profile Image
    JotForm Support

    Answered by abajan on May 10, 2012 at 07:03 AM

    Yes, that would be a good idea. I believe a ticket requesting this was recently submitted but I'll have to check.

  • Profile Image

    Answered by longo on May 10, 2012 at 08:22 AM

    I have one more question if I may, in my forms CSS I've used this code

    .form-submit-button-simple_white {
    font-family: Verdana, Geneva, sans-serif;
    }

    in form builder the button displays Verdana but on the live site the button still displays the default Arial.

    Your thoughts would be appreciated.

  • Profile Image
    JotForm Support

    Answered by idarktech on May 10, 2012 at 09:30 AM

    @longo,

    You can add !important after the fonts name. It should look like this:

    .form-submit-button-simple_white {

    font-family: Verdana, Geneva, sans-serif !important;

    }

    Hope this helps. Thanks!

  • Profile Image

    Answered by longo on May 10, 2012 at 10:02 AM

    Thanks idarktech, perfect