FIeld to uppercase

Thanks in advance for your help. bye

Hello @andycucca !

I trust you’re having a great day and sorry to hear about the troubles!

You can target a field in a specific form as Forminator adds an id and a custom class to each form’s code, so for example for the mentioned field and only that one field you can do:

#forminator-module-2183 #forminator-field-text-3 {
text-transform: uppercase;
}

The form’s ID in the #forminator-module-2183 selector is the same one as in the shortcode or in the address of the form’s edit screen.

This however will only cause the text to be *displayed* in uppercase on the form, the actual text that’s saved will be in whatever case the user filled it in.

To make the text actual uppercase instead, a bit of JavaScript will be needed:

<?php

add_action('wp_footer', function() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#forminator-module-2183 #forminator-field-text-3').on('keyup', function() {
 $(this).val($(this).val().toUpperCase());
});
});
</script>
<?php
});

This will convert the actual entered data to uppercase in the field itself and the value will also be sent and saved in uppercase.

To install this code, please copy it to a .php file and upload the file in wp-content/mu-plugins directory (please create the directory if it doesn’t exist).

Warm regards,
Pawel

Hello Pawel,

I applied your suggestions, but nothing has changed. maybe something else needs to be added or maybe there are other aspects to be considered. 
Anyway It remains very strange that the text-1 fields in the other forms continue to appear uppercase without any customization that foresees it.

Thanks in advance for your support,
kind regards
Andrew

Hi @andycucca

I see that the code is added to the site (it can be seen in page source) so that’s fine. There’s no errors in the console as well.

When testing code (the one that my colleague shared) directly in browser, it works as expected.

But there are two other things to check that might be related:

1. if the form is set to be loaded via AJAX, please try disabling that option (it can be set in form’s “Behavior” settings – the form loading method)

2. if that doesn’t help, try a slight modification of the code that my colleague shared by editing the last line of it; specifically change this in last line

});

to this

}, 99 );

Let us know if any of above makes it work for you, please.

Best regards,
Adam

Hello,

the suggestion is working perfectly!! Thanks a lot!

Anyway I do not understand why the “Causale del pagamento” in form 2 and “Nome del torneo” in form 3 are *displayed* in uppercase on the forms, wihout any partucular setting in place. This is really difficult to explain!?!
Do you know how to put them back in their initial state?

Thanks in advance for your support,
Best regards
Andrew

Hello @andycucca !

I think it’s due to the added CSS you’ve mentioned in the initial post – the CSS must still be there and making the fields uppercased – please double check and remove any of the code if you find it as it’s no longer needed.

Warm regards,
Pawel

Hello,

you were right! I cancelled all the local CSS, but `but I forgot that I added also the following instructions to the main CSS:

/ * Tax code in uppercase * /
input [name = “text-1”] {
text-transform: uppercase;
}

Can you confirm that this changed to uppercase text-1 only visually, but text-1 was not registered as uppercase in the DB?

Thanks again foasr the help
best regards
Andrew`

Hi @andycucca

In case you use CSS it is only on the Front end, you would need to update the value on user type using JS to modify it in the database too as the real value would be uppercase.

Forminator form has to render mode, a regular one and Ajax, so we need to use the JavaScript it needs to be based on how the Form is loading.

https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#rendering

If you are using Ajax:
https://gist.github.com/patrickfreitasdev/a6943c0682334a5ec2d653981cbbccdb

Ajax disabled:
https://gist.github.com/patrickfreitasdev/0e90151bfce42107d574e1f5319ff148

Now you just need to add this custom class custom-uppercase in the CSS setting for the field that you are looking to force the uppercase.

https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#additional-css-classes

Best Regards
Patrick Freitas

Thanks so much.