[Forminator] - Store Fields In Cookie. Useful for huge forms with several pages, so member can come back later and continue from where he stopped

forminator-store-fields-in-cookies.php

<?php
/**
 * Plugin Name: [Forminator] - Store Fields In Cookie
 * Plugin URI: https://premium.wpmudev.org/
 * Description: Useful for huge forms with several pages, so member can come back later and continue from where he stopped
 * Author: Panos Lyrakis @ WPMUDEV
 * Author URI: https://premium.wpmudev.org/
 * License: GPLv2 or later
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

if ( defined( 'WP_CLI' ) && WP_CLI ) {
	return;
}

add_action(
	'wp_footer',
	function() {

		/**
		* This is an array of form ids that will apply this script
		* In order to make it applicable for all forms you can leave the array empty:
		* $allowed_form_ids = array();
		*/
		$allowed_form_ids = array( 6, 11, 12, 345, 6434 );

		/**
		* Accepted values can be
		*   "button" : With button, the script will store form's inputs in cookies when then Next/Previous buttons are clicked
		*   "focusout" : With focusout, the script will store only the
		*/
		// $store_trigger = 'button'; // OR 'focusout'
		$store_trigger = 'focusout'; // OR 'button'

		global $post;
		if ( ! $post instanceof WP_Post || ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
			return;
		}

		?>
	<script type="text/javascript">
	document.addEventListener("DOMContentLoaded", function(event) {

		(($,d)=>{
			if ( window.wpmudev_forminator_saved_fields ) {
				return;
			}

			window.wpmudev_forminator_saved_fields = {
				cform_ajax_action 		: 'forminator_load_cform',
				cookie_name 			: 'wpmudev_forminator_saved_fields',
				cookie_expire_days 		: 15,
				saved_fields 			: [],
				allowed_form_ids 		: <?php echo json_encode( $allowed_form_ids ); ?>,
				store_trigger 			: '<?php echo $store_trigger; ?>',
				path 					: window.location.pathname,
				excluded_fields			: [ 'forminator_nonce' ],

				init : function() {
					$(d).ajaxComplete( function( event, xhr, settings ) {

						let _this = wpmudev_forminator_saved_fields,
							action = _this.get_query_var( 'action', settings.data );
						
						if ( action === _this.cform_ajax_action ) {
							_this.load_cookie_values();
						}
					});

					this.load_cookie_values();
					if ( 'button' === this.store_trigger ) {
						$( d ).on( 'click', '.forminator-button', wpmudev_forminator_saved_fields.record_fields );
					} else {
						$( d ).on( 'focusout', '.forminator-custom-form input, .forminator-custom-form select, .forminator-custom-form textarea', wpmudev_forminator_saved_fields.record_fields );	
					}
				},

				load_cookie_values : function() {
					const forms = $( 'form.forminator-custom-form' );
					forms.each( this.fill_in_form );
				},

				fill_in_form : function() {
					let _this = wpmudev_forminator_saved_fields,
						form_id = $(this).attr( 'id' ),
						_form_id = form_id.replace( 'forminator-module-', '' ),
						form_cookie = wpmudev_forminator_saved_fields.get_cookie( form_id ),
						form_fields;

					if ( form_cookie != null ) {

						form_fields = form_cookie.split('&');

						$.each( form_fields, function( k, v ) {
							let field = v.split('='),
								value = decodeURIComponent( field[1] );

							// Let's skip nonce
							if ( _this.excluded_fields.includes( field[0] ) ) {
								return;
							}

							if ( field[0].startsWith( 'radio' ) || field[0].startsWith( 'checkbox' ) ) {
								$(`#${form_id} [name="${field[0]}"]`).filter(`[value="${value}"]`).prop( 'checked', true );
							}else if ( field[0].startsWith( 'select' ) ) {
								// For Select fields we need to trigger `fui:change`
								$( `#${form_id} [name="${field[0]}"]` ).val( value ).trigger('fui:change');
							}else {
								// For another fields
								$( `#${form_id} [name="${field[0]}"]` ).val( value ).trigger('change');
							}
						});
					}
					
					if ( _this.allowed_form_ids.length !== 0 && ! _this.in_json( _form_id, _this.allowed_form_ids ) ) {
						return;
					}

					/*
					if ( form_cookie ) {
						let cookie_json = JSON.parse( `[${form_cookie}]` ),
							form_json = cookie_json[0];

						Object.keys( form_json ).forEach( function( key ) {
							let field = $( `#${form_id} #${key}` );

							if ( '' != form_json[key] ) {
								field.val( form_json[key] );
							}
						});
					}
					*/

				},

				record_fields : function() {
					let _this = wpmudev_forminator_saved_fields,
						form_id = $( this ).closest( 'form' ).attr( 'id' ),
						form = $( `#${form_id}` );

					_this.set_cookie( form_id, _this.serialize( form ) );

					$(document).on( 'response.success.load.forminator', wpmudev_forminator_saved_fields.delete_cookie.run );

					form.on( 'submit', function(){
						let _this = wpmudev_forminator_saved_fields
						_this.delete_cookie( $( this ).attr( 'id' ) );
					} );
				},

				get_cookie : function( form_id ) {
					let _this = wpmudev_forminator_saved_fields,
						name = _this.cookie_name + '_' + form_id + "=",
						ca = document.cookie.split(';');

					for( var i = 0; i < ca.length; i++ ) {
						var c = ca[i];

						while ( c.charAt(0) == ' ' ) {
							c = c.substring(1);
						}

						if ( c.indexOf( name ) == 0 ) {
							return c.substring( name.length, c.length );
						}
					}
					return "";
				},

				set_cookie: function( form_id, cvalue ) {
					let _this = wpmudev_forminator_saved_fields,
						current_date = new Date(),
						cookie_name = _this.cookie_name + '_' + form_id,
						expires = '';

					current_date.setTime( current_date.getTime() + ( _this.cookie_expire_days * 24 * 60 * 60 * 1000 ) );
					expires = `expires=${current_date.toUTCString()}`;
					d.cookie = `${cookie_name}=${cvalue}; ${expires} ;path=${_this.path};`;

				},

				delete_cookie: function( form_id ) {
					let _this = wpmudev_forminator_saved_fields,
						cookie_name = _this.cookie_name + '_' + form_id;

					d.cookie = `${cookie_name}=; max-age=0; path=${_this.path}; expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
				},

				serialize: function( form ){
					return $.map( form.serializeArray(), function(val) {
						return [val.name, encodeURIComponent(val.value)].join('=');
					}).join('&');
				},

				in_json: function( needle, haystack ) {
					var length = haystack.length;
					for( var i = 0; i < length; i++ ) {
						if( haystack[i] == needle ) {
							return true;
						}
					}
					return false;
				},

				get_query_var: function( name, url ) {
					if ( ! url ) {
						return false;
					}

					name = name.replace(/[\[\]]/g, "\\$&");
					var regex = new RegExp(name + "(=([^&#]*)|&|#|$)"),
						results = regex.exec(url);
					if (!results) return false;
					if (!results[2]) return false;
					return decodeURIComponent( results[2].replace(/\+/g, " ") );
				}

			};

			$( d ).ready( function(){
				wpmudev_forminator_saved_fields.init();				
			} );

		})(jQuery,document);
	});
	</script>
		<?php
	},
	20
);

Hello,

Is this plugin still working with forminator? I have added it in my wp-content/mu-plugins and it doesn't seem to be working for my forms.

Hi! I've made an update and should be working now. Could you give it another spin?

Hi! I've made an update and should be working now. Could you give it another spin?

Hey, thanks for updating! It still doesn't seem to be working. I'm testing it on radio buttons which are selected (I have about 200 of them to be completed in a form). Upon returning to the form, the radio buttons are no longer selected which means they aren't being cached

That should store form data in cookie when the Next/Previous buttons are clicked. I did another update just now with an option to store data on button click or on focusout of an input. You can set those in these lines:

/**
	* Accepted values can be
	*	"button" : With button, the script will store form's inputs in cookies when then Next/Previous buttons are clicked
	* 	"focusout" : With focusout, the script will store only the 
	*/
	$store_trigger = 'button'; // OR 'focusout'

You can also set the form ids this snippet should apply to in these lines

/**
	* This is an array of form ids that will apply this script
	* In order to make it applicable for all forms you can leave the array empty:
	* $allowed_form_ids = array();
	*/
	$allowed_form_ids = array( 6, 12, 345, 6434 );

You can leave the array empty so the snippet gets applied on all forms

I've added a method to delete the cookie upon submit. Could you clone/downlowd and try once more?

Could you make an WPForms version ? :)