[WordPress] 外掛分享： Product Dropdown For Contact Form 7

內容簡介

Product Dropdown For Contact Form 7

此 WordPress 外掛可在聯絡表單中加入產品列表欄位，使用者可以透過下拉式選單選擇目前已購買的產品。

請確認每個產品都有被選擇的類別，才能在選單中顯示。

文件
線上範例

功能：

必填欄位
選擇產品類別
設定單選按鈕欄位的 ID 和類別 (選擇性功能)

外掛標籤

開發者團隊

原文外掛簡介

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

文章

• 文章

Filter

Mastodon