Need to change the Submit Button Width

Trying to customize the submit button width

When in the Advanced Designer

• select the submit button
• edit the button width

Anything below 200 does nothing.

Also the output to the iFrame on an actual server/wesbite does not keep the button width as shown in the JotForm editor UI.

The button height works great in the Advanced Designer, but the button width doesn't work very well or even at all.

Please see screenshot.

Hello mrwongus,

Thanks for reaching out to Jotform Support. We're very sorry for the difficulties you've experienced. Please add the below code in your form to change the width of the submit button.

.form-submit-button {

transform: scale(1.5);

margin-bottom: 24px;

}

or 

.form-submit-button {

width : 140px;

}

To add the CSS code in your form follow the steps below and screencast:

• In Form Builder, click on the Paint brush Icon menu on the right side of the page.
• Go to Style Menu.
• Scroll down to the end and add the above CSS code in the Inject Custom CSS section.

Additionally please check this guide on How to Inject Custom CSS Codes.

If you need further assistance, please let us know.

You solution does not resolve the width lower than 200px; If you go from 200px; to 100px; nothing happens. WHY?

.form-submit-button {

width : 200px;

}

TO THIS

.form-submit-button {

width : 100px;

}

Changes nothing. Why can't I make the button width less thank 150px; ???

Hello mrwongus,

Thank you for reaching out to Jotform Support. I've tested it out and you're correct, the submit button does not change if it's lower than 150px. Looks like this is the minimum width you can set; however, allow me some time to check and see if there's a workaround. As soon as I have an update, I'll let you know.

Hello mrwongus,

Thank you for your patience. Upon element inspection, the code below restricts the button's minimum width.

To resolve this, please inject this CSS code and adjust the px according to your needs.

.submit-button {
min-width: none !important;
width: 60px !important;
}

Still does not work for me. Not sure why you would restrict the button width, as the button height is unrestricted. Also to note, I feel the entire current Jotform UI regarding Button customization is so obsolete and feels like from 1990. Have you even seen the options for button styles, they all look terrible. Why is there not a UI to enter a custom button color code? This would seem like a very common use. I have to inject CSS to change for custom colors. An idea, have a toggle so a selected button just adapts to the current websites btn CSS we designate, for example: use-current-webpage-button=true, then use=btn-primary.

This works to change button color and hover. But seems like something so common and there's no UI.

.formFooter-button, .submit-button {

  background-color : #cb9992;

  border-color : #dfc6c1;

  color : #fff;

}



.formFooter-button:hover, .submit-button:hover {

  background-color : #dfc6c1;

}

This does not work:

.submit-button {

min-width: none !important;

width: 60px !important;

}

Hi there,

Thank you for getting in touch. Please give us more time to review on this and we'll get back to you for updates.

Thank you,

Hi there,

Thank you for waiting. For some reason, the size of the Submit button reflects changes if you add the size in the min-width properties.

With regards to your suggestions on our UI, we'll forward it to our developer's team for review and apply changes in future updates.

Regards,

Great support as always. I am happy to be a paying member. I look forward to future improved UI features and updates. Thank you.