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

    How do I style the email and phone number fields?

    Asked by markferrell 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. :)

     

    Mark

    Page URL:
    http://www.flyingdogcollars.com/pages/drop-ship-form

  • Profile Image

    Answered by markferrell 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?

     

    thanksMark

  • Profile Image
    JotForm Support

    Answered by NeilVicente 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!


    Neil

  • Profile Image

    Answered by markferrell 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?

    Mark

  • Profile Image
    JotForm Support

    Answered by NeilVicente on July 05, 2011 at 04:19 PM

    Mark,

    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.

    Thanks!


    Neil