contact form 7 auto tab to next field

Solution:1

First, in your functions.php of your theme or child theme, you have to enqueue jQuery UI.

If you wanted to, you could even limit it to the page that your form is on.

If you really want to get fancy, you can set the text field to be readonly which forces people to use the datepicker-ui. However, that requires additional coding.

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    // Check if is page where contact form is, or leave out to enqueue everywhere
    //if (is_page(123)) { 
        // WordPress already has this...
        wp_enqueue_script( 'jquery-ui-datepicker' );
        // Serve locally if you want by downloading.
        wp_enqueue_style( 'ui-datepicker-style', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css' );
        // You can pick whatever theme you want here
        wp_enqueue_style( 'ui-datepicker-theme', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/theme.min.css' );
    //}
}

Then in your contact form do this:

[text* your-field class:use-datepicker]
[submit]
<script>
    jQuery(function($){
        $(".use-datepicker").datepicker({
            dateFormat: "yy-mm-dd"
            // Set Whatever Options you want here 
            // See https://api.jqueryui.com/datepicker/
        }); 
    });
</script>

Solution:2

Ok so I got a working line of code for Contact Form 7 to jump to the next field when the max length of the input is reached. I added ID’s to the 3 fields and then created a function that worked. Here is the final code that works:

jQuery('#inputs1').keyup(function () {
    if(this.value.length >= this.maxLength){
        jQuery('#inputs2').focus();
    } });
jQuery('#inputs2').keyup(function () {
    if(this.value.length >= this.maxLength){
        jQuery('#inputs3').focus();
    } });