I need all input fields to be in uppercase

  • Profile Image
    detlondon
    Asked on November 08, 2015 at 09: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

  • Profile Image
    Mike_G
    Answered on November 08, 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;

    }


    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.

  • Profile Image
    Mike_G
    Answered on November 08, 2015 at 01: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!

  • Profile Image
    Mike_G
    Answered on November 08, 2015 at 02: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)

  • Profile Image
    abajan
    Answered on November 08, 2015 at 06:16 PM

    The information provided in this thread may also be helpful.

    Thanks