Product Dropdown For Contact Form 7
Product Dropdown For Contact Form 7 adds a new [woocommerce_product] form tag to Contact Form 7 that renders a dynamic, searchable WooCommerce product dropdown on the front end. Customers can select one or more products directly within any CF7 form — making it ideal for order enquiries, product supp
About this tool.
Product Dropdown For Contact Form 7 adds a new [woocommerce_product] form tag to Contact Form 7 that renders a dynamic, searchable WooCommerce product dropdown on the front end. Customers can select one or more products directly within any CF7 form — making it ideal for order enquiries, product support requests, quote requests, and any form where the customer needs to reference a specific WooCommerce product.
The plugin registers a visual tag generator directly inside the Contact Form 7 form editor, so you can configure and insert the product dropdown field without writing any code. It is powered by Select2 for a polished, accessible dropdown experience with a placeholder prompt on the front end.
Requires both Contact Form 7 and WooCommerce to be installed and activated.
📄 Documentation | 🔴 Live Demo | ⭐ Upgrade to Pro
How It Works
Once activated, a new woocommerce_product button appears in the Contact Form 7 tag generator toolbar. Open the generator, configure your options — field name, ID, class, and product ID filter — then click Insert Tag to place it into your form. On the front end, the field renders as a clean Select2-powered product dropdown with a “— Select Product —” placeholder. The selected product name and product ID are passed through as a CF7 mail tag value, so the product choice appears in your notification emails.
Example tag: [woocommerce_product woocommerce_product-1 pro_id:21-22]
Free Features
WooCommerce Product Dropdown Field * Adds a new [woocommerce_product] form tag type to Contact Form 7 * Renders a fully functional <select> dropdown on the front end populated with your live WooCommerce products * Each dropdown option displays the product name — and the submitted value includes the product name along with its product ID (e.g. Product Name (product_id: 21) ) for easy identification in notification emails * Defaults to showing all published WooCommerce products when no filter is applied
Filter Products by ID * Enter specific WooCommerce product IDs — separated by hyphens — to limit the dropdown to only those products * Example: entering 21-22-45 shows only those three products in the dropdown * Useful for forms where you want to offer a curated selection of products rather than your entire catalogue
Multiple Product Selection * Enable the “Allow Multiple Product Selection” option in the tag generator to let customers pick more than one product from the dropdown * When enabled, the dropdown renders with the HTML multiple attribute and the field name uses array notation so all selected products are captured correctly
Required Field Support * Mark the product dropdown as required by checking “This is a required field” in the tag generator — appends * to the tag type * Full CF7 validation integration — displays CF7’s standard validation error if the required field is left empty on submission * aria-required="true" and aria-invalid attributes are applied automatically for accessibility compliance
