How to Capitalize Form Field Inputs

Introduction

Would you like to capitalize form field inputs on your WPForms? You can easily use CSS and text-transform to format the input values, but the entry will be saved with exactly how it’s typed in. Using the CSS with a small JavaScript snippet you can, in real-time, guarantee that these values are shown and stored with capitalization. In this tutorial, we’ll walk you through each step on how to achieve this.

Creating the form

First, you’ll need to create your form. For the purpose of this tutorial, we’re adding a Single Line Text and Paragraph Text form fields to our form.

If you need any help in creating a form, please review this documentation.

We’re going to use a CSS class for each of these fields to trigger the CSS to use the text-transform CSS rule that we’ll be adding in another step. To add the required CSS class, click on the Single Line Text field in your form builder and then click to open the Advanced Options.

Under the CSS Classes, add capitalize and repeat these steps for the Paragraph Text field as well.

add the CSS class name of capitalize to each form field to trigger the CSS and JavaScript

Adding the CSS

Next, we’re going to add the CSS rule that will transform any text typed into these fields to be capitalized.

.capitalize {
    text-transform: capitalize;
}

If you need help on how to add CSS to your site, please see this tutorial.

Adding the JavaScript

Finally, to capitalize form field input values on the fly, we’re going to add a small script that immediately triggers the CSS but will also save the entries with capital letters.

For help with adding JavaScript to your site, please take a look at this tutorial.

/*
 * Capitalize form field
 *
 * @link  https://wpforms.com/developers/how-to-capitalize-form-field-inputs/ 
 */

function wpf_dev_capitalize() {
    ?>
    <script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery('.wpforms-field.capitalize input').keyup(function() {
				jQuery(this).val(jQuery(this).val().substr(0, 1).toUpperCase() + 	jQuery(this).val().substr(1).toLowerCase());
				});
		jQuery('.wpforms-field.capitalize textarea').keyup(function() {
				jQuery(this).val(jQuery(this).val().substr(0, 1).toUpperCase() + 	jQuery(this).val().substr(1).toLowerCase());
			});
	});
    </script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_capitalize' );

This snippet will look for any form field that has not only the default CSS class of wpforms-field but that also has the CSS class of capitalize so as the user is typing, the text will automatically be capitalized and when the form is submitted the entry will store those fields with the capital letters.

once the steps are completed your form fields will automatically begin with capital letters

And that’s all you need! Would you like to stop users from entering URLs into your form fields? Take a look at our article on How to Block URLs Inside the Form Fields.

Action Reference: wpforms_wp_footer_end