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

    Upload button tweaking

    Asked by m1hunter on October 23, 2016 at 12:54 AM

    When I use my upload button to to upload files to my form I do not want the file details to be displayed under the file upload button it makes my form look uncentered when the upload button adds the details of the file that was uploaded under the button. How do I use CSS to get rid of that.  I hope you understand what I need. Thanks again for all of your help.

     

    Page URL:
    https://form.jotform.com/62938639407165

  • Profile Image
    JotForm Support

    Answered by Mike_G on October 23, 2016 at 02:58 AM

    To hide the list of items that were uploaded, please add the CSS codes below.

    ul.qq-upload-list {

        display: none !important;

    }

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    I hope this helps. However, please be reminded that the list serves as a way to let your respondents know what was already uploaded and if it was successfully uploaded.

    If you need any further assistance, please feel free to contact us anytime. Thank you.

  • Profile Image

    Answered by m1hunter on October 23, 2016 at 10:31 AM

    Thanks that is what I needed. I have a few more things I need css code for.

    1. When the mouse hovers over the send info / images button it turns white. I need it to not turn any       color at all.

    2. I need to change the Attach image / images button to this color #B71427.

    3. I need all the text boxes (First Name,Last name Ect.) Black like the messages box.

    4. When I submit the form with the required fields not field out I get a red border around them I would     like to make this red  border thicker / wider.

    5. One more thing when I upload images to my form the Send info / images button says Please wait.....

        I would like to change that to Attaching images....

    Page URL:
    https://form.jotform.com/62938639407165 

     

    Thanks for all of your previous help.

     

     

     

  • Profile Image
    JotForm Support

    Answered by Mike_G on October 23, 2016 at 11:35 AM

    I see that you've already opened a separate thread for all your other concerns. 

    https://www.jotform.com/answers/969149-Some-more-tweaks-css-code-needed-help-please-#0

    Please allow me some time to work on a solution for your concerns then I will get back to you as soon as possible and respond on the other thread. 

    Thank you.

  • Profile Image

    Answered by m1hunter on October 23, 2016 at 11:43 AM

    Thank you so much.

  • Profile Image

    Answered by m1hunter on June 27, 2017 at 10:23 AM

    The above CSS code worked great but a couple of my customers are not sure if their images are sent.

    I added this code so my forms would not change size when the attaches images were listed.

    Could the attached images be added to the messages box or something like that so when the images

    my customers upload get listed it does not make my form taller. Pic below to show you what I mean.

    The form: https://form.jotform.us/63266119691158

     

    My website: http://www.americanpatchandpin.com

     

      

  • Profile Image
    JotForm Support

    Answered by ashwin_d on June 27, 2017 at 12:22 PM

    Hello,

    When you say "Could the attached images be added to the messages box", do you mean to say that you want to add the list of uploaded file in a separate box?

    Please note that it is possible to change the placement of the uploaded file name section within the form by injecting custom css code but it is not possible to show the uploaded file names in a separate message box. I would suggest you to please explain your requirement a bit more in detail and we will surely try to help you.

    We will wait for your response.

    Thank you!

  • Profile Image

    Answered by m1hunter on June 27, 2017 at 01:09 PM

    I need the uploaded file names to be added to my form so the form does not get any bigger vertically when the files are listed.

  • Profile Image
    JotForm Support

    Answered by Kevin_G on June 27, 2017 at 02:58 PM

    Could you please injecting this CSS code and see if that would work for you?

    ul.qq-upload-list {

        height: 37px;

        overflow-y: auto;

        margin-top: 0px !important;

        position: relative;

    }

     

     

    [data-type="control_fileupload"] {

        padding-bottom: 0px !important;

        margin-bottom: 0px !important;

        height: 80px;

        z-index:3;

    }

     

    li#id_15 {

        padding-top: 0px;

        margin-top: 0px;

        position: relative;

        margin-top: -10px; 

        z-index: 2;

        height: 60px;

    }

    This should be the result: 

    This guide will help you injecting the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Let us know how it goes on your end. 

  • Profile Image

    Answered by m1hunter on June 27, 2017 at 04:15 PM

    Super idea thank you soooo very much you guys and gals are the best!!!! I combined this idea with this one. Now the form is perfect :).

    https://www.jotform.com/answers/1184827-Upload-button-tweaking-again-please-help-/?entrymessage=10732640770

  • Profile Image
    JotForm Support

    Answered by Kevin_G on June 27, 2017 at 05:28 PM

    You are most welcome  m1hunter. 

    Glad to know you were able to your form like you wanted. 

    If there is anything else that we can assist you, please let us know, we will be glad to help you.