How to force value of First & Last Name Fields on Contact Form 7 in Wordpress to be Sentence Case be-CodePudding

I am trying to find a way to force the capitalization of the First & Last Name fields in my forms when a user submits. I don’t care if the user sees the change or not, I am more interested in the submission that gets processed being changed before the data from the form gets posted. Forcing the input to be Sentence case or validating/changing automatically before submitting would work.

So if:

joHn, jOHN, or john are entered they would all be changed to John (first letter capitalized, others lowercase).

Here are my fields for reference:

<label> First name
    [text* FirstName] </label>
<label> Last name
    [text* LastName] </label>

Thanks in advance for any direction.

I've found similar documentation on general fields, and changing the email field content after submitting, but can't seem to find how to change it before submitting so that the data that posts does so using the properly formatted values.

Tried various examples of code snippets to be run, but they only seem to affect the mailer data, not the submitted data.

CodePudding user response：

You can do something like this :

<!-- Contact Form 7 form -->

[text* your-first-name class:first-name]
[text* your-last-name class:last-name]

    <script>
    document.addEventListener( 'wpcf7submit', function( event ) {
        var firstName = document.getElementsByClassName("first-name")[0];
        var lastName = document.getElementsByClassName("last-name")[0];
    
        firstName.value = firstName.value.charAt(0).toUpperCase()   firstName.value.substring(1).toLowerCase();
        lastName.value = lastName.value.charAt(0).toUpperCase()   lastName.value.substring(1).toLowerCase();
    }, false );
    </script>

CodePudding user response：

Add this , it will cause the script to run and update the fields as soon as the user types in their first name and last name, rather than waiting for them to submit the form.

var firstName = document.getElementsByClassName("first-name")[0];
var lastName = document.getElementsByClassName("last-name")[0];

firstName.addEventListener("input", function() {
    this.value = this.value.charAt(0).toUpperCase()   this.value.substring(1).toLowerCase();
});

lastName.addEventListener("input", function() {
    this.value = this.value.charAt(0).toUpperCase()   this.value.substring(1).toLowerCase();
});