Skip to main content

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.

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


Thank you for this solution.  Works great!!


I thought the same thing!


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


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



UPDATE:

.transformToCapital {text-transform: uppercase;}


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? 


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(EUsername])


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


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.


Reply