Altering the size and shape of a number input box

Hello @davedw

You can change the fields’ sizes through the “Field size” attribute in their settings, where you can select any of the options: small, medium, large.

About to concept of bulky, I don’t know what do you mean without checking your form. However, the styles defined by the theme active on your website affect every tag on the page. If the theme actives on your WordPress applies padding to the input tags, the appearance of the number fields, single-line text fields, calculated fields, and others would be affected.

The solution, in this case, would be to overwrite the styles defined by the through the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png), using #fbuilder as part of the selector. More information by reading the following post in the plugin’s blog:

https://cff.dwbooster.com/blog/2020/01/12/form-design

Best regards.

Thanks for the quick reply.

This is the form, the number fields look a fair bit taller (maybe lots of padding?) than the drop downs in Safari especially: https://www.teslaev.co.uk/tesla-cost-to-charge-calculator/

I’m thinking based on that link, I can do something in the CSS section to adjust the font size of .cff-number-field

Dave.

Hello @davedw

Your theme includes the style definition:

input[type="date"], input[type="time"], input[type="datetime-local"], input[type="week"], input[type="month"], input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea {
    padding: 11px 14px;
}

You simply should enter the following style definition:

#fbuilder .cff-number-field input{padding: 5px 14px;}

Through the “Customize Form Design” attribute in the “Form Settings” tab.

Best regards.

Brilliant, thank you! ??