I need all input fields to be in uppercase

  • detlondon
    Asked on November 8, 2015 at 9:42 AM

    I have been unable to correctly update my form so that all feilds completed are in uppercase.  Is this something you can help with?  My URL is https://form.jotformeu.com/52793291321354

  • Mike_G JotForm Support
    Replied on November 8, 2015 at 11:33 AM

    You can do that by adding CSS codes to your form, you may click the link to learn How-to-Inject-Custom-CSS-Codes

    input {

    text-transform: uppercase !important;

    }

    I need all input fields to be in uppercase Image 1 Screenshot 20

    Once you done that every text typed on your every input field on your form will be on uppercase even without capslock turned ON.

    Here's the form I have used for testing: https://form.jotform.com/53114890483962.

    Feel free to open it and check.

    I hope this helps. If you need any further assistance, please let us know anytime and we will be glad to help you. Thank you.

  • Mike_G JotForm Support
    Replied on November 8, 2015 at 1:05 PM

    @grade4pagasa

    Thank you so much for your input.

    Yes, that is correct, the CSS codes I have indicated above will only work for the input fields on the form in a browser and not with the data in the email notification since it is added to the Inject Custom CSS of the form only.

    Also, thank you for sharing the link to Ben's answer, that would be helpful if @detlondon would want to make the data in the email notification in uppercase too. By manipulating the Source Code of the email notification data, you can add the same CSS codes(text-transform: uppercase !important;) to the "style" attribute of the <span> tag that contains/holds  the field name of the fields.

    Cheers!

  • Mike_G JotForm Support
    Replied on November 8, 2015 at 2:01 PM

    @grade4pagasa

    You are correct. The CSS codes added to make the texts in the input boxes uppercase will not affect the data or string being passed to our database. The CSS codes are just used to style (front end) and not affect the data being passed. I think, if you really want the text being passed to the submission page to appear upper-cased, you will need to use scripts(Javascript) and apply it to the form's source code. 

    http://www.w3schools.com/jsref/jsref_touppercase.asp

    Just to add, in the email notification data, aside from adding the CSS codes to the "style" attribute of the <span> tag, you can also do this (Please see image below)

    I need all input fields to be in uppercase Image 1 Screenshot 20

  • abajan Jotform Support
    Replied on November 8, 2015 at 6:16 PM

    The information provided in this thread may also be helpful.

    Thanks