Forcing a field to be uppercase only

I have a form that uses a series of conditional redirects: if the user enters product code beginning with AAA, redirect to page X, if the user enters a product code beginning with BBB, redirect to page Y.

I had a teeny problem in that Caldera forms treats Aaa as different to AAA, as different to AaA, so my redirects didn’t work if the user entered the product code in the wrong format. So I needed to force my form field to be all uppercase.

I thought I’d just leave a note how I did it in case someone else needs to do the same.

1) copy the ID of the form field that needs to be only uppercase

2) add this bit of script to the page: *after* the form. (You could use a custom template, or put the code into a child theme footer, or hook it from your functions.php)

<?php if(is_page(999)){  // Only show if it's the right page, in this case page id 999 ?>

<!-- Force form field code on field MyFormFieldID  to uppercase -->
<script>
document.getElementById("MyFormFieldID").onblur = function() {makeuppercase()};

function makeuppercase() {
    var UPMyFormField = document.getElementById("MyFormFieldID");
    UPMyFormField.value = UPMyFormField.value.toUpperCase();
}
</script>

<?php } // end of stuff inserted only on page 999 ?>

3) obviously you’ll need to change MyFormFieldID in the above to whatever form field ID you found in 1 ??

Now the contents of the form field will be forced to uppercase as soon as the user moves away from that form field.

Hope that saves someone a few mins.

https://www.ads-software.com/plugins/caldera-forms/