Implementing Autosave Functionality for Long, Multi-page Forms in WordPress

Question

I'm working on a project in WordPress that involves creating long, multi-page forms with conditional logic. One of the challenges I'm facing is that these forms can take a while to complete (and I have very non-savvy users that are prone to misnavigation), so I'm trying to implement an autosave feature that would save the user's progress as they go along.

I'd like to figure out a way to store form submissions in a database as the user progresses through the form, so that if they need to leave the page or their session times out, their answers won't be lost. Ideally, I would like the user to be able to come back to the form at a later time and pick up where they left off.

The particular form in question is a post-user-registration form that is filled out as part of the "fulfillment" process, so it would be associated with their user account.

I understand that handling this on the server-side might involve using AJAX to send the form data to the server at regular intervals, but I'm not sure how to go about implementing this in WordPress or what potential issues I might run into.

Any guidance on how to implement this feature in a way that is efficient and appropriate to WordPress would be really appreciated!

Answer 1

If you can stash the fields one at a time, I'd do something like this:

In functions.php or somewhere:

add_action ( 'wp_ajax_save_long_form_field', 'my_save_long_form_field', 10, 0 );

function my_save_long_form_field () {
    $user_id = get_current_user_id();
    $name = sanitize_text_field( filter_input( INPUT_POST, 'name' ) );
    $value = sanitize_text_field( filter_input( INPUT_POST, 'value' ) );
    // do something with the name value pair, like: 
    // update_user_meta( $user_id, $name, $value
    // but with better validation.
    echo "Received: $name = $value";// remove once you have it working
    wp_die ();
}

and then some javascript (this is if you are going to write it directly into the html output stream with php - you'd want to use localize_script to get the admin-ajax url in there if it's a .js file you're loading):

jQuery("form :input").on('change',(function() {
    var data = {
        action : 'save_long_form_field', 
        value : jQuery(this).val(),
        name : jQuery(this).attr('name'),
    }
    //  var form_id = $(this).closest('form').attr('id') );// in case you need to find the form, this is how.
    jQuery.post(
        '<?php echo admin_url( 'admin-ajax.php' )?>',
        data,
        function( response ) { // Again, you don't need this for your use case, but this is where you'd change the page html, if you wanted to for any reason
            console.log( 'Safe!' + response );
        }
    );
}));

Answer 2

You can use JS localStorage to store the data (as JSON for example) and then dynamically pull this data from localStorage and pass everything to the proper fields. In this case, you won't need to make any AJAX requests and use your database memory. The only caveat is that your users won't be able to use this data if they use another device or browser.

Alternatively, you can still use your MySQL database to store the data as JSON or serialize it and pull it when a user returns to the form.