Hi Sharon, I think I can do you one better. For each of these fields, add the "capitalizeMe" CSS class in the Advanced tab. Then add this custom CSS:
.capitalizeMe input {text-transform: capitalize;}
Also add this custom JavaScript:
$(document).ready(function() {
$('.capitalizeMe input').on('change',function() {
var orig = $(this).val();
var breakSpaces = orig.split(' ');
var newWords = new Array();
$.each(breakSpaces,function(index,word) {
newWords.push(word.charAt(0).toUpperCase() + word.slice(1));
});
$(this).val(newWords.join(' '));
});
});
The JavaScript is what actually does the heavy lifting; it takes the string value of the input element and separates by space character. Then for each word detected in this string, it capitalizes the first letter. Then it puts the string back together with spaces in between each word. The custom CSS will make this appear to happen as the words are typed into the field.
Note that the CSS is merely a display, so when you apply that it will seem to already be converting to title case, but when the form is saved or when actually dealing with the variables, the actual value would not reflect that display. For that to change you need to apply the JavaScript as well.
Hope this helps!