Sometimes it’s nice to have large inputs to help users enter the right information. Adding large + and – buttons to number inputs is a great way to make life easier for your users.

Here’s how to do it:

• Add a number field to your form and then go to Settings > Customise HTML and find the number field you just added.
• Add a class to the [input] shortcode like this: [input class="myNum"]
• Add 2 <span> elements either side of the [input] shortcode like this:

<span class="min button">-</span>
[input class="myNum"]
<span class="plus button">+</span>

Next add this JS to ‘After Fields’ section of your form:

< script >
	jQuery(".myNum").each(function () {
		var j = jQuery; //Just a variable for using jQuery without conflicts
		var addInput = (this); 
		var n = 1; //n is equal to 1

		//Set default value to n (n = 1)
		j(addInput).val(n);

		//On click add 1 to n
		j(this).next("span").on('click', function () {
			j(addInput).val(++n);
		})

		j(this).prev("span").on('click', function () {
			//If n is bigger or equal to 1 subtract 1 from n
			if (n >= 1) {
				j(addInput).val(--n);
			} else {
				//Otherwise do nothing
			}
		});
	}); <
/script>

And finally add some CSS to style your new buttons.

.plus.button,
.min.button {
	display: inline-block;
	position: relative;
	padding: 0.5em 1em;
	background-color: #7f3690;
	color: #fff;
	cursor: pointer;
	text-align: center;
	width: 50px;
}

.plus.button {
	left: -6px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.min.button {
	right: -6px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.myNum {
	width: 58% !important;
	text-align: center;
}

/* Hide Number Inputs - Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Hide Number Inputs - Firefox */

input[type=number] {
	-moz-appearance: textfield;
}