[SOLVED] Adding data attributes to FORM inputs and submit buttons, not the form itself

How To
1

Easy enough to add data attributes to elements, but with the form elements, it’s missing the ability to acope the data attributes to the button or the input, rather than the form. Any ideas or suggestions on how to add data attributes to the input field(s) or the submit button?

2

If anyone is looking at this, here is an update:

I was frustrated by the inability to do this, so I went and built and entire form using custom div elements. But, afterward, asking chatgpt, I discovered you could just use wpcodebox to add attributes when the DOM was loaded.

Something like:

// Add attributes to Bricks form input, since you cannot do that in brciks builder
document.addEventListener("DOMContentLoaded", function () {
    // Select the form by the class you can add
    var form = document.querySelector(".custom-form-class-here");

    // Ensure the form exists
    if (form) {
        // Now select the specific input field within that form
        // Adjust the querySelector argument based on how you can identify the input field
        var inputField = form.querySelector('input[aria-label="zipcode"]'); // Replace 'your-aria-label' with the actual aria-label value

        // Add your data attribute(s) to the input field
        if (inputField) {
            inputField.setAttribute("pattern", "\\d*"); 
        }
    }
});