Saving form data for later

Quform WordPress v2 DocumentationGuidesCustomizationSaving form data for later

WARNING: If you are using a page caching plugin it’s possible that private user data could be visible to other people. To prevent this, make sure the page with the form is excluded from the page cache.

“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').on('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 + '=' + encodeURIComponent($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').on('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 + '=' + encodeURIComponent($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 + '=' + encodeURIComponent($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 + '=' + encodeURIComponent($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. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy