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

內容簡介

Order Dropdown WooCommerce For Contact Form 7是一個外掛程式，將訂單列表欄位加入您的聯絡表單中。這個欄位會形成一個下拉式選單，其中包含目前使用者的訂單清單。透過此外掛程式，您可以使您的聯絡表單變得更加專業。

若需使用多個訂單狀態，請使用 |（直線）符號隔開。
下方是範例欄位：

[woocommerce_order woocommerce_order-968 status:wc-processing|wc-on-hold]

訂單狀態包括：wc-pending、wc-processing、wc-on-hold、wc-completed、wc-cancelled、wc-refunded、wc-failed。
請勿使用 ‘status’ 屬性。

文件
實際範例

功能：

必填欄位
新增訂單狀態
設定訂單下拉式選單的 ID 和類別（可選擇）

外掛標籤

開發者團隊

原文外掛簡介

Order Dropdown Contact Form 7 For WooCommerce adds a powerful new form field type to Contact Form 7 that renders a dynamic dropdown list of WooCommerce orders. Customers can select an order directly from the form — making it ideal for support requests, return and refund enquiries, order follow-ups, and any form where a customer needs to reference a specific WooCommerce order.
The plugin registers a custom [woocommerce_order] form tag and adds a visual tag generator to the Contact Form 7 editor, so you can build and insert the field without touching any code.

Requires both Contact Form 7 and WooCommerce to be installed and activated.

📄 Documentation | 🔴 Live Demo
How It Works
Once installed, a new woocommerce_order field type appears in the Contact Form 7 tag generator. Insert the tag into any CF7 form and the field renders as a dropdown on the front end. Each option displays the order ID, current order status, and the order creation date — giving customers enough context to identify their order at a glance.
Example tag:
[woocommerce_order woocommerce_order-968 status:wc-processing|wc-on-hold]
The selected order value is then available as a mail tag, so it gets included in the notification email sent to you when the form is submitted.
Key Features
WooCommerce Order Dropdown Field
* Adds a new [woocommerce_order] form tag to Contact Form 7
* Renders a fully functional dropdown populated with live WooCommerce orders
* Each dropdown option displays the order number, status, and creation date in the format: #123 (Status: processing) - (Date: Jan 15, 2024) — making it easy for customers to identify the right order
Filter Orders by Status
* Control exactly which orders appear in the dropdown using the status: option
* Supports all standard WooCommerce order statuses: wc-pending, wc-processing, wc-on-hold, wc-completed, wc-cancelled, wc-refunded, wc-failed
* Filter by multiple statuses at once using pipe | separators — for example: status:wc-processing|wc-on-hold|wc-completed
* Leave the status option empty to show orders of all statuses
Visual Tag Generator in CF7 Editor
* A dedicated tag generator panel is added directly inside the Contact Form 7 form editor — no manual shortcode writing needed
* Configure the field name, HTML ID, CSS class, and order status filter all from a clean UI
* Generated tag is previewed live and inserted into the form with one click
* Includes a mail tag reference tip so you know exactly how to include the selected value in your notification emails
Required Field Support
* Mark the order dropdown as a required field by checking the “This is a required field” option in the tag generator (adds the * suffix to the tag)
* Full CF7 validation integration — shows CF7’s standard validation error message if the required field is left empty on submission
* Proper aria-required and aria-invalid accessibility attributes are applied automatically
Custom ID & Class
* Set a custom HTML id attribute on the dropdown for JavaScript targeting or CSS anchor styling
* Add one or more custom CSS class names to the dropdown for full styling control
Mail Tag Integration
* The selected order value is automatically available as a CF7 mail tag
* Insert the mail tag into the CF7 Mail tab to include the selected order in form notification emails sent to admins or customers
Fully Responsive
* The order dropdown is responsive and adapts gracefully on mobile and small screens
* Font size is automatically adjusted on screens under 767px for comfortable readability on smartphones and tablets
Clean & Secure
* All submitted data is sanitized using sanitize_text_field before processing
* Lightweight — only a minimal CSS file is enqueued on the front end; no unnecessary JavaScript dependencies
* Follows WordPress and Contact Form 7 coding standards throughout
Example Use Cases

Customer Support Forms — Let customers select the specific order they are asking about in a support or help desk form
Return & Refund Requests — Add an order dropdown to your returns form so customers identify the order they wish to return
Order Follow-Up Forms — Allow customers to check in on the status of a specific order by selecting it from the form
Complaint & Feedback Forms — Reference a specific WooCommerce order as part of a complaint or feedback submission
Cancellation Request Forms — Let customers select a pending or processing order they want to cancel

Order Status Reference
When using the status: option, use the following WooCommerce status slugs:

wc-pending — Payment pending
wc-processing — Payment received, order being processed
wc-on-hold — Awaiting payment confirmation
wc-completed — Order fulfilled and complete
wc-cancelled — Order cancelled
wc-refunded — Order refunded
wc-failed — Payment failed or declined

Separate multiple statuses with a pipe character: status:wc-processing|wc-on-hold