Skip to main content
Nintex Community Menu Bar
Solved

Is there a way to force a text field in forms to capitalize the first letter of the text?

  • Oct 27, 2014 9:08 PM UTC
  • 10 replies
  • 588 views
  • Translate All

Forum|alt.badge.img+2

I have a form with two text fields,(first name/last name).  I would like the forms to format those fields with the first letter entered as a capital.

Best answer by shirin

You can achieve this by using custom css. please look at below step.

 

  1. Add custom CSS into Form Settings.
    1. Click on Settings button on form designer
    2. Expand Custom CSS
    3. add new style like this: .transformToCapital {text-transform: capitalize;}
    4. Click Save
  2. Open Textbox control settings and expand Formatting
  3. Add Control CSS class value >> transformToCapital
  4. Publish form and it should work

 

Please let me know if it doesn't work.

 

Thanks,

Shirin

View original

10 replies

Forum|alt.badge.img+4
  • Nintex Employee
  • Answer
  • Oct 29, 2014 12:13 AM UTC

You can achieve this by using custom css. please look at below step.

 

  1. Add custom CSS into Form Settings.
    1. Click on Settings button on form designer
    2. Expand Custom CSS
    3. add new style like this: .transformToCapital {text-transform: capitalize;}
    4. Click Save
  2. Open Textbox control settings and expand Formatting
  3. Add Control CSS class value >> transformToCapital
  4. Publish form and it should work

 

Please let me know if it doesn't work.

 

Thanks,

Shirin

Translate

Forum|alt.badge.img+2
  • Author
  • Oct 29, 2014 4:19 PM UTC

Thank you for this solution.  Works great!!

Translate

Forum|alt.badge.img+11
  • Oct 30, 2014 4:26 PM UTC

I thought the same thing!

Translate

Forum|alt.badge.img+11
  • Scholar
  • Jan 21, 2016 5:17 AM UTC

Thank you very much. Very useful. I also used this method for transformToUppercase.

Translate

Forum|alt.badge.img+11
  • Jan 13, 2017 2:53 PM UTC

I tried this for all letters to be capital but it still does turns only the first letter to capital.
Any advise?


Translate

Forum|alt.badge.img+11
  • Jan 13, 2017 2:56 PM UTC

UPDATE:

.transformToCapital {text-transform: uppercase;}

Translate

  • May 22, 2017 6:20 PM UTC

This worked great for the form. My issue is it is not pushing all caps to the SP list. However when I view the form everything is in caps.

Any advice? 

Translate

Forum|alt.badge.img+11
  • May 26, 2017 9:39 AM UTC

This is only doable in one of the following ways:

- create an extra field and use the calculated value =UPPER([columnName])

- create a workflow that updates the text to capital

For example you got a field named "Username" and you want that to be uppercase in SP list.
create a new field and name it "ucUsername" (as in uppercaseUsername) and tick the Calculated Value option in default value

then finally click the Column Validation and enter =UPPER([Username])

Translate

  • May 26, 2017 1:15 PM UTC

Much appreciated! This is what i conceptually thought I'd have to do. Was hoping for an easier way. 

Translate

Forum|alt.badge.img+11
  • Mar 5, 2021 1:40 PM UTC

An alternative would be using JavaScript to update the TextField:

NWF$(document).ready(function () { NWF$("#" + txtFirstName).change(function () { // get the text value from the FirstNname textfield var textContent = this.value; //alert(textContent) // check to see if the value is not null if (textContent.length > 0) { // format the first letter to UpperCase and the rest to LowerCase textContent = textContent[0].toUpperCase() + textContent.substr(1).toLowerCase(); this.value = textContent; } }); });

In this case, the textField has got jS ID: txtFirstName

However, what if I wanted same approach for txtLastName and txtEmail.

 

How would I next this within one JavaScript code instead of having to replicate the above but just changhing the +txtName. Would appreciate your feedback and approvement on the above.

Translate