Saving form data for later

“Save for later” button

Step 1

Add an HTML element to the form and in the content add an HTML button with the class save-for-later.

1
<button type="button" class="save-for-later">Save for later</button>
<button type="button" class="save-for-later">Save for later</button>

Step 2

Go to Forms → Settings → Custom CSS & JS and at the Custom JavaScript field add the following code.

1
2
3
4
56
7
8
9
10
1112
13
14
15
jQuery(function ($) {
    $('.save-for-later').click(function () {
        var $form = $(this).closest('.quform-form'),
            id = $form.data('quform').options.id,
            cookieDays = 180,            now = new Date(),
            expires = new Date(now.getTime() + cookieDays * 24 * 3600 * 1000);
 
        document.cookie = 'quform_' + id + '=' + $form.formSerialize() + ';expires=' + expires.toUTCString();
 
        alert('The form data has been saved, please return to this page to complete the form later'); 
        return false;
    });
});
jQuery(function ($) {
    $('.save-for-later').click(function () {
        var $form = $(this).closest('.quform-form'),
            id = $form.data('quform').options.id,
            cookieDays = 180,
            now = new Date(),
            expires = new Date(now.getTime() + cookieDays * 24 * 3600 * 1000);

        document.cookie = 'quform_' + id + '=' + $form.formSerialize() + ';expires=' + expires.toUTCString();

        alert('The form data has been saved, please return to this page to complete the form later');

        return false;
    });
});
  • On line 5, replace 180 with the number of days that the form data should be saved (in the user’s browser)
  • On line 11, the alert message text can be modified if necessary

Step 3

Add the following code to the WordPress theme functions.php file (or create a plugin for it).

1
2
3
4
5
6
add_action('quform_pre_display', function (Quform_Form $form) {
    if (isset($_COOKIE['quform_' . $form->getId()])) {
        parse_str($_COOKIE['quform_' . $form->getId()], $values);
        $form->setValues($values);
    }
});
add_action('quform_pre_display', function (Quform_Form $form) {
    if (isset($_COOKIE['quform_' . $form->getId()])) {
        parse_str($_COOKIE['quform_' . $form->getId()], $values);
        $form->setValues($values);
    }
});

That’s it! If you want to add the functionality to other forms, you only need to repeat Step 1.

Automatically save form data

Step 1

Go to Forms → Settings → Custom CSS & JS and at the Custom JavaScript field add the following code.

1
2
3
4
56
7
8
9
10
11
12
13
14
15
16
17
18
19
jQuery(function ($) {
    function saveFormData() {
        var $form = $(this).closest('.quform-form'),
            id = $form.data('quform').options.id,
            cookieDays = 180,            now = new Date(),
            expires = new Date(now.getTime() + cookieDays * 24 * 3600 * 1000);
 
        document.cookie = 'quform_' + id + '=' + $form.formSerialize() + ';expires=' + expires.toUTCString();
    }
 
    $('.quform input[type="text"], .quform input[type="email"], .quform textarea, .quform input[type="password"]').on('blur', saveFormData);
    $('.quform select, .quform input[type="checkbox"], .quform input[type="radio"]').on('change', saveFormData);
    $('.quform-field-date-enhanced, .quform-field-time-enhanced').on('change', function (e) {
        setTimeout(function () {
            saveFormData.call(e.target);
        }, 4);
    });
});
jQuery(function ($) {
    function saveFormData() {
        var $form = $(this).closest('.quform-form'),
            id = $form.data('quform').options.id,
            cookieDays = 180,
            now = new Date(),
            expires = new Date(now.getTime() + cookieDays * 24 * 3600 * 1000);

        document.cookie = 'quform_' + id + '=' + $form.formSerialize() + ';expires=' + expires.toUTCString();
    }

    $('.quform input[type="text"], .quform input[type="email"], .quform textarea, .quform input[type="password"]').on('blur', saveFormData);
    $('.quform select, .quform input[type="checkbox"], .quform input[type="radio"]').on('change', saveFormData);
    $('.quform-field-date-enhanced, .quform-field-time-enhanced').on('change', function (e) {
        setTimeout(function () {
            saveFormData.call(e.target);
        }, 4);
    });
});
  • On line 5, replace 180 with the number of days that the form data should be saved (in the user’s browser)

Step 2

Add the following code to the WordPress theme functions.php file (or create a plugin for it).

1
2
3
4
5
6
add_action('quform_pre_display', function (Quform_Form $form) {
    if (isset($_COOKIE['quform_' . $form->getId()])) {
        parse_str($_COOKIE['quform_' . $form->getId()], $values);
        $form->setValues($values);
    }
});
add_action('quform_pre_display', function (Quform_Form $form) {
    if (isset($_COOKIE['quform_' . $form->getId()])) {
        parse_str($_COOKIE['quform_' . $form->getId()], $values);
        $form->setValues($values);
    }
});

That’s it!

Be inspired. © 2019 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy