Product Dropdown For Contact Form 7

Description

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

Custom ID & Class
* Set a custom HTML id attribute on the dropdown for JavaScript targeting or CSS styling
* Add one or more custom CSS class names to the dropdown for full theme styling control

Select2 Powered Dropdown UI
* The dropdown is rendered using Select2 (v4.1.0) — a polished, accessible JavaScript dropdown library
* Displays a «— Select Product —» placeholder when no product is selected
* Fully responsive and works correctly on desktop, tablet, and mobile screens

Mail Tag Integration
* The selected product value is available as a CF7 mail tag
* Insert the mail tag into the CF7 Mail tab to include the customer’s product selection in notification emails sent to admins or customers

Visual Tag Generator in the CF7 Editor
* A dedicated tag generator panel is added to the Contact Form 7 form editor — no manual shortcode writing needed
* All options are configurable from a clean UI with live tag preview
* One-click Insert Tag places the generated tag directly into the form editor
* Includes a mail tag tip at the bottom of the panel

Pro Version Features

Upgrade to Product Dropdown For Contact Form 7 Pro to unlock advanced product filtering and display options — all disabled in the free tag generator panel.

⭐ Get the Pro Version →

Filter by Product Category
* Instead of filtering by product IDs, select any WooCommerce product category from the tag generator
* The dropdown will show only products belonging to the selected category — dynamically updated as products are added or removed from that category

Filter by Product Tag
* Filter the dropdown to show only products that carry a specific WooCommerce product tag
* Select the tag from the tag generator panel — all products tagged with that term will populate the dropdown

Filter by Product Color Attribute
* Filter the product dropdown by the pa_color WooCommerce product attribute
* Select a specific colour term from the tag generator — only products assigned that colour attribute will appear in the dropdown

Filter by Product Size Attribute
* Filter the product dropdown by the pa_size WooCommerce product attribute
* Select a specific size term from the tag generator — only products assigned that size attribute will appear in the dropdown

Filter by Stock Status
* Choose to display only In Stock products or only Out of Stock products in the dropdown
* Keeps the product list relevant and avoids customers selecting products they cannot order

Show Product Price in Dropdown
* Enable the «Enable Price» option to display each product’s price alongside its name in the dropdown options
* Helps customers immediately see pricing while selecting a product within the form

Product Search Box
* Enable the «Search Box» option to activate Select2’s built-in live search functionality inside the dropdown
* Customers can type to instantly filter and find the product they are looking for — essential for stores with large product catalogues

Example Use Cases

• Order Enquiry Forms — Let customers select the product they are enquiring about before submitting a message
• Quote Request Forms — Allow customers to pick one or more products they want a custom quote for
• Product Support Forms — Reference a specific product in a customer support or warranty claim form
• Return & Exchange Forms — Let customers identify the product they wish to return or exchange
• Custom Order Forms — Build bespoke order forms where customers choose from a curated list of products

What the Submitted Value Looks Like

When a customer selects a product and submits the form, the value passed to the notification email via the mail tag is formatted as:

Product Name (product_id: 21)

This gives you both the human-readable product name and the WooCommerce product ID in every form submission — making it easy to identify and process the enquiry.