Jetformbuilder number field custom responsive quantity control with plus and minus buttons

gistfile1.txt

Add this code to your snippet plugin, and create a new HTML snippet, and paste the code there and save it.

Note: Before implementing the code, verify that the form field name in your Jetformbuilder form is my_number. Should your form field bear a different name, you'll need to replace number throughout the code with the correct name. Alternatively, setting your form's number field name to my_number simplifies the process, removing the need for any code adjustments. Once the code is ready, copy it to your snippet plugin, create a new HTML snippet, and paste the code therein. Ensure to set this snippet to load in the footer through your snippet plugin settings. Additionally, this code references the form field name my_number in the CSS. If you alter the form field name, remember to update the CSS selectors accordingly to maintain consistency and functionality.


Jetformbuilder Number Field Custom Responsive Quantity Control offers a sleek, modern solution for Jetformbuilder forms, 
featuring custom plus and minus buttons. Designed for responsiveness across various devices, it enhances user interaction by
providing intuitive controls for quantity adjustment, replacing default number inputs. This setup delivers a visually appealing
and user-friendly experience, ideal for streamlined form interactions and 
efficient data entry.

_____________________________________________________________________________

<style>
/* Reset and style for all number inputs */
input[type="number"].jet-form-builder__field::-webkit-inner-spin-button,
input[type="number"].jet-form-builder__field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"].jet-form-builder__field {
    -moz-appearance: textfield;
    appearance: textfield;
    width: 70px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 30px;
    padding: 5px;
    text-align: center;
    background-color: white;
    color: black;
    margin: 0 5px; /* Ensures spacing around the input */
}

/* Focus state styling for all number inputs */
input[type="number"].jet-form-builder__field:focus {
    border-color: blue;
    outline: none;
}

/* Flex container for horizontal layout */
.flex-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Space between elements */
}

/* Button styling */
.custom-number-btn {
    cursor: pointer;
    background-color: blue;
    color: white;
    font-size: 20px;
    border-radius: 30px;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 22px;
    padding: 0;
    transition: background-color 0.3s;
    line-height: 1;
    box-sizing: border-box;
}

/* Hover effect for buttons */
.custom-number-btn:hover {
    background-color: black;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Target inputs by ID pattern
    document.querySelectorAll('input[type="number"][id^="my_number"]').forEach((input) => {
        const flexContainer = document.createElement('div');
        flexContainer.className = 'flex-container';
        input.parentNode.insertBefore(flexContainer, input);
        flexContainer.appendChild(input);

        const minusBtn = document.createElement('div');
        minusBtn.textContent = '-';
        minusBtn.className = 'custom-number-btn custom-number-minus';
        flexContainer.insertBefore(minusBtn, input);

        const plusBtn = document.createElement('div');
        plusBtn.textContent = '+';
        plusBtn.className = 'custom-number-btn custom-number-plus';
        flexContainer.appendChild(plusBtn);

        minusBtn.addEventListener('click', () => changeValue(input, -1));
        plusBtn.addEventListener('click', () => changeValue(input, 1));

        function changeValue(input, delta) {
            let value = parseInt(input.value, 10) || 0;
            value = Math.max(0, value + delta);
            input.value = value;
            // Trigger the input event to notify any other listeners of the change
            input.dispatchEvent(new Event('input'));
        }
    });
});
</script>

Works nice. Thanks