Contact Form 7 – Datalist
Stuart Clark By Stuart Clark

February 16, 2019

Contact Form 7 – Datalist Plugin

Extension to Contact Form 7 to allow HTML5 datalists to be used.

This control works in a similar way to the existing drop-down menu, but rather than a fixed list of options that the user must select from it is presented to the user as a textbox.
Once the user begins typing a list of possible options will be shown, selecting one will fill in the rest of the field with the selected option, if the desired option is not present in the list then the user can type in their own option.

Installation

  1. Ensure Contact Form 7 is installed and activated.
  2. Install the plugin through the WordPress plugins screen or upload the plugin files to the /wp-content/plugins/cf7-datalist directory.
  3. Activate the plugin through the ‘Plugins’ screen in WordPress.

Screenshots

  1. User has typed in 'dun' and matches are shown.

    User has typed in 'dun' and matches are shown.

FAQ

How do I use this?

When editing a Contact Form 7 form you should now be able to add a datalist tag.

Which browsers support this?

According to MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist this is supported by Chrome 20+ (33+ on mobile), Edge, Firefox 4+, IE10+ and Opera 9.5+ but not Safari.

Changelog

1.2

  • Tested for WordPress 5.0.

1.1

  • Fixed Contact Form 7 depreciation errors.

1.0

  • Initial release.

Details

  • Version: 1.1
  • Active installations: 200
  • WordPress Version: 4.7
  • Tested up to: 5.1.19
  • PHP Version: 5.2.4

Ratings


5 Stars
4 Stars
3 Stars
2 Stars
1 Stars