1

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!

4
  • you'll need a way to identify the user, are your users logged in? Or are these anonymous? This has major consequences for your task. Note though that you need to be able to mark an answer as the factually correct answer, not just guidance
    – Tom J Nowell
    May 16, 2023 at 16:27
  • I'm sorry thought I made it clear - yes, this form in particular is post-registration. They have to engage/pay for a service first (using Forminator Pro for purchases for that phase, but Forminator doesn't support autosaving so it's a dud for this long form situation unless I somehow figure out a way to modify it, lol). This really is "just" a survey that facilitates service for them, but is essential for the process.
    – ylluminate
    May 16, 2023 at 16:36
  • and you're happy to build it without a plugin? 3rd party plugins are offtopic so you can't ask how to do it with Forminator, but the question is still on topic
    – Tom J Nowell
    May 16, 2023 at 16:38
  • I believe I have to build it without a plugin. I don't see any other option at this point since this is somewhat custom and the autosave functionality is essential. Furthermore it is integral to the process and so I want to be sure this is streamlined into the system as closely as possible without something blowing up during a plugin or WP update...
    – ylluminate
    May 16, 2023 at 16:41

2 Answers 2

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 );
        }
    );
}));
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.