How to specify the autocomplete attribute in MW WP Form

Table of Contents

• Method using jQuery
• Method using filter hooks

Method using jQuery

You can specify it with JavaScript.

Here is a sample source code.

$(function(){
	// Add autocomplete attribute to MW WP Form
	const formAttr = [
		// Described as ["name attribute value", "autocomplete attribute value"]
		["name", "name"],
		["year", "bday-year"],
		["month", "bday-month"],
		["day", "bday-day"],
		["zip", "postal-code"],
		["pref", "address-level1"],
		["addr", "address-line1"],
		["bill", "address-line2"],
		["tel_ext", "tel-extension"],
		["tel", "tel"],
		["email", "email"],
		["confirm", "email"]
	];
	const formAttrLen = formAttr.length;
	for(let i=0; i<formAttrLen; i++){
		$("[name="+formAttr[i][0]+"]").attr("autocomplete", formAttr[i][1]);
	}
});

Please add to the "formAttr" array as appropriate.

Then, for example, a tag like this

<input type="text" name="pref" id="pref" size="60" value="">

will have the autocomplete value set like this.

<input type="text" name="pref" id="pref" size="60" value="" autocomplete="address-level1">

Method using filter hooks

There were no usable filter hooks in the plugin, so
we will use WordPress's filter hook to rewrite the entire the_content().

Please paste the following into "functions.php".

// Add autocomplete attribute to MW WP Form
function mwwpform_autocomplete($contents){
	if(is_page('contact')){ // When it's the contact page
		$form_attr = array(
			// Described as ["name attribute value", "autocomplete attribute value"]
			["name", "name"],
			["year", "bday-year"],
			["month", "bday-month"],
			["day", "bday-day"],
			["zip", "postal-code"],
			["pref", "address-level1"],
			["addr", "address-line1"],
			["bill", "address-line2"],
			["tel_ext", "tel-extension"],
			["tel", "tel"],
			["email", "email"],
			["confirm", "email"]
		);
		foreach($form_attr as $attr){
			$contents = str_replace('name="'.$attr[0].'"', 'name="'.$attr[0].'" autocomplete="'.$attr[1].'"', $contents);
		}
		return $contents;
	}else{
		return $contents; // Return as is for pages other than contact
	}
}
add_filter('the_content', 'mwwpform_autocomplete', 12);

Please add to the $form_attr array as appropriate, and

also change the condition in if(is_page('contact')) as appropriate.

Then, for example, a tag like this

<input type="text" name="pref" id="pref" size="60" value="">

will have the autocomplete value set like this.

<input type="text" name="pref" autocomplete="address-level1" id="pref" size="60" value="">

Comments