How do I make file upload buttons the same as a submit button?

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.

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. 

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.

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.

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?

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.