enhancement(fields): add autocomplete attributes to form fields

assets/src/js/admin/form-editor/field-generator.js

@@ -137,6 +137,10 @@
     attributes.placeholder = config.placeholder
   }
 
+  if (config.autocomplete && config.autocomplete.length > 0) {
+    attributes.autocomplete = config.autocomplete
+  }
+
   attributes.required = config.required
   attributes.oncreate = setAttributes
 
@@ -154,7 +158,7 @@
  * @param {object} config
  * @returns {string}
  */
-function generate (config) {
+function generate(config) {
   const labelAtts = {}
   const label = config.label.length > 0 && config.showLabel ? m('label', labelAtts, config.label) : ''
   const field = typeof (generators[config.type]) === 'function' ? generators[config.type](config) : generators.default(config)

assets/src/js/admin/form-editor/field-manager.js

@@ -10,7 +10,7 @@
 /**
  * Reset all previously registered fields
  */
-function reset () {
+function reset() {
   // clear all of our fields
   registeredFields.forEach(fields.deregister)
   m.redraw()
@@ -23,7 +23,7 @@
  * @param {object} data
  * @param {boolean} sticky
  */
-function register (category, data, sticky) {
+function register(category, data, sticky) {
   const field = fields.register(category, data)
 
   if (!sticky) {
@@ -37,7 +37,7 @@
  * @param type
  * @returns {*}
  */
-function getFieldType (type) {
+function getFieldType(type) {
   const map = {
     phone: 'tel',
     dropdown: 'select',
@@ -54,7 +54,7 @@
  * @param mergeField
  * @returns {boolean}
  */
-function registerMergeField (mergeField) {
+function registerMergeField(mergeField) {
   const category = i18n.listFields
   const fieldType = getFieldType(mergeField.type)
 
@@ -66,17 +66,29 @@
     forceRequired: mergeField.required,
     type: fieldType,
     choices: mergeField.options.choices,
-    acceptsMultipleValues: false // merge fields never accept multiple values.
+    choices: mergeField.options.choices,
+    acceptsMultipleValues: false, // merge fields never accept multiple values.
+    autocomplete: (function (tag) {
+      if (tag === 'FNAME') {
+        return 'given-name'
+      }
+
+      if (tag === 'LNAME') {
+        return 'family-name'
+      }
+
+      return ''
+    }(mergeField.tag))
   }
 
   if (data.type !== 'address') {
     register(category, data, false)
   } else {
-    register(category, { name: data.name + '[addr1]', type: 'text', mailchimpType: 'address', title: i18n.streetAddress }, false)
-    register(category, { name: data.name + '[city]', type: 'text', mailchimpType: 'address', title: i18n.city }, false)
-    register(category, { name: data.name + '[state]', type: 'text', mailchimpType: 'address', title: i18n.state }, false)
-    register(category, { name: data.name + '[zip]', type: 'text', mailchimpType: 'address', title: i18n.zip }, false)
-    register(category, { name: data.name + '[country]', type: 'select', mailchimpType: 'address', title: i18n.country, choices: countries }, false)
+    register(category, { name: data.name + '[addr1]', type: 'text', mailchimpType: 'address', title: i18n.streetAddress, autocomplete: 'address-line1' }, false)
+    register(category, { name: data.name + '[city]', type: 'text', mailchimpType: 'address', title: i18n.city, autocomplete: 'address-level2' }, false)
+    register(category, { name: data.name + '[state]', type: 'text', mailchimpType: 'address', title: i18n.state, autocomplete: 'address-level1' }, false)
+    register(category, { name: data.name + '[zip]', type: 'text', mailchimpType: 'address', title: i18n.zip, autocomplete: 'postal-code' }, false)
+    register(category, { name: data.name + '[country]', type: 'select', mailchimpType: 'address', title: i18n.country, choices: countries, autocomplete: 'country' }, false)
   }
 
   return true
@@ -87,7 +99,7 @@
  *
  * @param interestCategory
  */
-function registerInterestCategory (interestCategory) {
+function registerInterestCategory(interestCategory) {
   const fieldType = getFieldType(interestCategory.type)
 
   const data = {
@@ -105,7 +117,7 @@
  *
  * @param list
  */
-function registerListFields (list) {
+function registerListFields(list) {
   // make sure EMAIL && public fields come first
   list.merge_fields = list.merge_fields.sort(function (a, b) {
     if (a.tag === 'EMAIL' || (a.public && !b.public)) {
@@ -133,7 +145,7 @@
  *
  * @param lists
  */
-function registerListsFields (lists) {
+function registerListsFields(lists) {
   const url = ajaxurl + '?action=mc4wp_get_list_details&ids=' + lists.map(l => l.id).join(',')
 
   m.request({
@@ -146,13 +158,14 @@
   })
 }
 
-function registerCustomFields (lists) {
+function registerCustomFields(lists) {
   register(i18n.listFields, {
     name: 'EMAIL',
     title: i18n.emailAddress,
     required: true,
     forceRequired: true,
-    type: 'email'
+    type: 'email',
+    autocomplete: 'email'
   }, true)
 
   // register submit button

assets/src/js/admin/form-editor/fields.js

@@ -12,6 +12,7 @@ function Field (data) {
     showLabel: typeof (data.showLabel) === 'boolean' ? data.showLabel : true,
     value: data.value || '',
     placeholder: data.placeholder || '',
+    autocomplete: data.autocomplete || '',
     required: typeof (data.required) === 'boolean' ? data.required : false,
     forceRequired: typeof (data.forceRequired) === 'boolean' ? data.forceRequired : false,
     wrap: typeof (data.wrap) === 'boolean' ? data.wrap : true,

config/default-form-content.php

@@ -5,7 +5,7 @@
 $signup_button_value    = esc_attr__('Sign up', 'mailchimp-for-wp');
 
 $content  = "<p>\n\t<label for=\"email\">{$email_label}: \n";
-$content .= "\t\t<input type=\"email\" id=\"email\" name=\"EMAIL\" placeholder=\"{$email_placeholder_attr}\" required>\n\t</label>\n</p>\n\n";
+$content .= "\t\t<input type=\"email\" id=\"email\" name=\"EMAIL\" placeholder=\"{$email_placeholder_attr}\" autocomplete=\"email\" required>\n\t</label>\n</p>\n\n";
 $content .= "<p>\n\t<input type=\"submit\" value=\"{$signup_button_value}\">\n</p>";
 
 return $content;