How do I style the email and phone number fields?

  • Profile Image
    Asked on July 05, 2011 at 02:55 PM

    I have styled one of my forms to match my site but the email input area, phone number input area, file upload box and text area box do not take the styling. I would also like to have the dop down boxes to be styled like the input boxes.

    I currently have rounded corners on the input boxes but do not really need to...but they look cooler than sqaure corners. :)



  • Profile Image
    Answered on July 05, 2011 at 03:07 PM

    Ok...found a post on how to style the fields using the following: 

    .form-textbox, .form-textarea, .form-upload, .form-dropdown, .form-matrix-column-headers, .form-matrix-row-headers, .form-matrix-values

    Now the only one that is not taking the styling is the "file upload" field. Any one know what I need to do to get it to match the rest now?



  • Profile Image
    Answered on July 05, 2011 at 03:24 PM

    Hi Mark,

    First off, I'd like to commend what you have done with your form. A simple css trick gave your form an entirely fresh look. Anyway, moving on to your question...

    Unfortunately, file upload fields cannot be styled by css without using custom JavaScript. Now the problem is that you cannot insert JavaScript in a form made with Jotform. The Form Builder will just strip it out.

    The best workaround I can offer to you is to set your upload field to Allow Multiple uploads so that the input box is hidden and the upload button is replaced by a better looking one.

    Click on your upload field then click the Allow Multiple button in the toolbar to toggle it on.


    Your upload field turns into this:


    Hope you find this suggestion worthwhile . Let me know if you have further questions regarding this issue. Thanks!


  • Profile Image
    Answered on July 05, 2011 at 03:42 PM

    Thank you Neil...appreciate the comment. Is there any way of changing the stock Upload a File image to my own creation that would match my other buttons?

    Does a user need to click on the button again to add additional files? Or could one present instructions to "hold down your ??????? key to select multiple files?


  • Profile Image
    Answered on July 05, 2011 at 04:19 PM


    The orange button uses css instead of an image file. Use these codes to change the color of that button: 

    .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;

    You can change the colors but I have included the other properties as well so you can modify them if you feel like doing so.

    Refer to these pages for more web-safe colors:

    HTML Color Codes

    HTML Color Names


    The user can either click the button again to add additional files or hold down the ctrl or shift key to upload multiple files at once. The latter doesn't work with IE though.

    Anyway, I think we're going a little out of topic with regards to your original post. If you have other queries that are not related to the thread's title, please create a separate thread for it. This allows for a more focused, effective and efficient discussion which can benefit other users as well.