How to avoid clearing fields on submit

Hello,

I’ve been looking for a way to avoid clearing some fields on submit, and now I have a working solution that I thought I’d share here if anyone else is looking for the same thing. Most answers I’ve read on this forum involves editing the plugin files, which is clearly suboptimal since the changes would reset on the next plugin update.

First of all, the reason why I don’t want to reset some fields is that I am prefilling them dynamically by attaching a filter hook function:

add_filter("wpcf7_form_tag", "modify_contact_form");

modify_contact_form($field) is my own function that looks at the field type and name and enters some external data. After having done that, the field also gets a special class that we can then hook onto with JavaScript to actually disable the field:

array_push($field["options"], "class:readonly");

Now, on the page that uses the form, I run the following JavaScript:

jQuery(document).ready(function ($) {
	$('.wpcf7-form .readonly').prop('readonly', true);
});

This makes the field uneditable but its value will still be sent with the form, unlike a disabled field.

When submitting, all fields would normally be cleared, but for our new readonly fields that is not desirable, since we would end up with empty fields that cannot be edited, which is kind of useless.

To avoid this, we will override the clearForm() function in jquery.form.js that Contact Form 7 uses, adding an extra filter so that fields with the readonly attribute will not be reset. This piece of JavaScript does exactly that:

jQuery(document).ready(function ($) {
	// This will override the clearForm() function in jquery.form.js so that any
	// readonly fields will retain their value instead of clearing on submit.
	// Since we prefill these fields, clearing them would render them unusable.
	$.fn.clearForm = function(includeHidden) {
		return this.each(function() {
			$('input,select,textarea', this).not('[readonly]').clearFields(includeHidden);
		});
	};
});

Note that the above function is a copy of the same function from jquery.form.js but with .not('[readonly]') added.

If you don’t do the readonly dance and just want a simple way to mark certain fields so that they are not cleared on submit, just add some class to them (e.g. class:dontclear) when creating the form, and then exclude that class in the override function, like this:

jQuery(document).ready(function ($) {
	// This will override the clearForm() function in jquery.form.js so that any
	// readonly fields will retain their value instead of clearing on submit.
	// Since we prefill these fields, clearing them would render them unusable.
	$.fn.clearForm = function(includeHidden) {
		return this.each(function() {
			$('input,select,textarea', this).not('.dontclear').clearFields(includeHidden);
		});
	};
});

Hope that helps anyone!

http://wordpress.org/extend/plugins/contact-form-7/