Order Dropdown WooCommerce For Contact Form 7

Description

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