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 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:

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.