enhancement(fields): add autocomplete attributes to form fields

[faisalahammad]

🎯 Summary

Added autocomplete attributes to the form field generator and default form content to improve accessibility and user experience by allowing browsers to autofill user information.

📋 Issue Reference

Fixes #777

🔍 Problem Description

Current Behavior

Mailchimp for WordPress form fields (Email, First Name, Last Name) do not have autocomplete attributes. This prevents browsers and password managers from reliably identifying these fields and offering autofill suggestions.

Expected Behavior

• The Email field should have autocomplete="email".
• The First Name field should have autocomplete="given-name".
• The Last Name field should have autocomplete="family-name".

✨ Solution Overview

Approach Taken

1. Updated Field Definitions: Modified field-manager.js to include the autocomplete property.
2. Updated Field Generator: Modified field-generator.js to render the autocomplete attribute.
3. Updated Default Content: Modified config/default-form-content.php to include autocomplete="email".

🔧 Changes Made

Files Modified

• assets/src/js/admin/form-editor/fields.js: Added autocomplete property to Field object.
• assets/src/js/admin/form-editor/field-manager.js: Configured default autocomplete values.
• assets/src/js/admin/form-editor/field-generator.js: Updated generator to output the attribute.
• config/default-form-content.php: Added autocomplete="email".

Detailed Changes

1. Generated Form HTML (config/default-form-content.php)

Before:

<p>
	<label for="email">Email address: 
		<input type="email" id="email" name="EMAIL" placeholder="Your email address" required>
	</label>
</p>

<p>
	<input type="submit" value="Sign up">
</p>

After:

<p>
	<label for="email">Email address: 
		<input type="email" id="email" name="EMAIL" placeholder="Your email address" autocomplete="email" required>
	</label>
</p>

<p>
	<input type="submit" value="Sign up">
</p>

2. Field Generator Logic (field-generator.js)

Before:

  if (config.placeholder.length > 0) {
    attributes.placeholder = config.placeholder
  }

  attributes.required = config.required

After:

  if (config.placeholder.length > 0) {
    attributes.placeholder = config.placeholder
  }

  // ✅ Add autocomplete attribute if properly configured
  if (config.autocomplete && config.autocomplete.length > 0) {
    attributes.autocomplete = config.autocomplete
  }

  attributes.required = config.required

3. Field Manager Definitions (field-manager.js)

Before:

    name: 'EMAIL',
    title: i18n.emailAddress,
    required: true,
    forceRequired: true,
    type: 'email'
  }, true)

After:

    name: 'EMAIL',
    title: i18n.emailAddress,
    required: true,
    forceRequired: true,
    type: 'email',
    autocomplete: 'email' // ✅ Default autofill type
  }, true)

🧪 Testing Performed

Manual Testing

• Code Review: Verified that the attribute is correctly passed from definition to generation.
• Default Form Verification: Validated that config/default-form-content.php contains the correct HTML attribute.
• Build Verification: Ran npm run build to ensure assets compile correctly.

⚠️ Breaking Changes

✅ No breaking changes - Fully backward compatible. Existing forms will remain unchanged until updated by the user.

Plugin Zip

mailchimp-for-wordpress-en777.zip

✅ PR Checklist

• Code follows WordPress Coding Standards
• Input sanitized, output escaped
• No PHP warnings/errors
• Backward compatible
• Self-reviewed for quality

[dannyvankooten]

Looks good @faisalahammad - thank you for the contribution!