Capitalize First Letter of Form Field

jQuery Snippet

Here's a handy little snippet to help you capitalize the first letter of a form's text field.

Usage

To use this with Formidable Forms, rename the #field_xxxxxx to the ID of the field you want to apply this to.

If you want to apply this code to more than one field as in the working example below, separate the field IDs with a comma like this:

$("#field_qh4icy2, #field_ocfup12").keydown(function () {

Then, copy the code into the After Fields area on the form's Customize HTML page.

Working Example

Capitalize 1st Letter Demo

Enter First and Last names and watch first letter capitalize as your type.

Letter Capitalization Example
First
Last

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *

Comments

  1. Hi Victor, many thanks for this. It works great on a my text fields but not if they are in a repeater. Is there additional code needed to capitalise the first letter of a text field within a repeater?

    • Glad to hear it’s working for you Phil!

      As for the repeater, this is a common issue. I suggest you read this article: https://formidable-masterminds.com/repeaters-and-complex-jquery-operations/.

      The bottom line has to do with how repeaters add/delete rows using AJAX. The HTML Document Object Model (DOM) is built in it’s entirety when the web page is loaded. For jQuery to interact with any element on a page, the element has to be registered in the DOM. Rows added through AJAX are not registered in the DOM even though they appear on the page. This means you have to manually trigger an initialization process for every row added to a repeater so the jQuery can interact with it’s elements.

      For the Capitalization script, the trick is going to be addressing the new row field programmatically, since it has a dynamically generated name. You’ll have to use wild cards, CSS class, or some other means to address the field and make sure the code is working on the correct element.