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 make file upload buttons the same as a submit button?

    Asked by alex4478 on June 12, 2016 at 03:37 AM

    Hi,

    I currently have two buttons on my form (https://eu.jotform.com//?formID=61625848559369) one is a templated submit button and the other is from the file upload addon. The problem is though that I can't make the file upload button the same as the submit button, either using any of the preferences or the designer function. That may well be because I'm doing it wrong. On a previous form I had them looking the same but can't do it again.

    Thanks for any help.

  • Profile Image
    JotForm Support

    Answered by Kiran on June 12, 2016 at 05:16 AM

    You may enable "Allow Multiple" option for the upload field to change the style of the File upload field to match with the Submit button.

    Please check and let us know if you need any further assistance. We will be happy to assist. 

  • Profile Image

    Answered by alex4478 on June 12, 2016 at 05:25 AM

    That was it, thanks.

    Don't suppose you could let me know how to change the corners so all the buttons are rounded. Using the designer only makes the submit button rounded.

  • Profile Image
    JotForm Support

    Answered by Boris on June 12, 2016 at 05:35 AM

    Yes, we can do that. When setting rounded corners for the submit button, your form automatically adds the following CSS to your form.

    - for slightly rounded corners:

    .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {
        border-radius: 6px;
    }

    - for fully rounded corners:

    .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {
        border-radius: 100px;
    }

    The above codes are added in the back-end of the form, so you do not usually see them. We can utilize the same approach with the File Upload fields, so all you would need to do is add a small bit of custom CSS to your form.

    - for slightly rounded corners:

    .form-all .qq-upload-button {
        border-radius: 6px;
    }

    - for fully rounded corners:

    .form-all .qq-upload-button {
        border-radius: 100px;
    }

    You can add custom CSS to your form by following this guide:

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

    Your form would appear like this:

    If you need further assistance, please let us know.

  • Profile Image

    Answered by alex4478 on June 12, 2016 at 06:39 AM

    So how would I make the 'Upload a file' button the same width as the 'Submit' button. Would all of this work fine on a mobile responsive form?

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 12, 2016 at 09:05 AM

    Inject this CSS codes to your form. This should expand the file upload button in its full width like the submit button. And also, this styles the hover state the same as the submit button.

    .qq-uploader {

        width: 100%;

    }

    .qq-upload-button {

        box-sizing: border-box;

    -webkit-box-sizing: border-box;

    transition: all .5s ease-in-out;

        -webkit-transition: all .5s ease-in-out;

    }

    .qq-upload-button:hover {

        background: #E8AF7C !important;

        box-shadow: none !important;

        border: none !important;

        color: #fff !important;

     

    }

    Since the width is set to 100%, it should be mobile responsive.

    Please follow the same guide provided by my colleague on how to inject CSS codes to your form.

    If you need further assistance, do let us know.