{"id":161674,"date":"2022-08-25T04:26:22","date_gmt":"2022-08-25T04:26:22","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/product-dropdown-for-contact-form-7\/"},"modified":"2026-06-29T09:51:13","modified_gmt":"2026-06-29T09:51:13","slug":"product-dropdown-for-contact-form-7","status":"publish","type":"plugin","link":"https:\/\/pe.wordpress.org\/plugins\/product-dropdown-for-contact-form-7\/","author":20419894,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0","stable_tag":"trunk","tested":"7.0.2","requires":"5.5","requires_php":"7.0","requires_plugins":null,"header_name":"Product Dropdown For Contact Form 7","header_author":"","header_description":"WooCommerce Product Dropdown List.","assets_banners_color":"cbd1db","last_updated":"2026-06-29 09:51:13","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":70,"downloads":1737,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":{"1.0":"<p>Initial release. Install to add a polished, Select2-powered WooCommerce product dropdown to any Contact Form 7 form \u2014 no coding required.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3475264,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3475264,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3475264,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3475264,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":[],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":2775231,"resolution":"1","location":"assets","locale":"","width":1896,"height":887},"screenshot-2.png":{"filename":"screenshot-2.png","revision":2775231,"resolution":"2","location":"assets","locale":"","width":1899,"height":867},"screenshot-3.png":{"filename":"screenshot-3.png","revision":2775231,"resolution":"3","location":"assets","locale":"","width":1919,"height":886},"screenshot-4.png":{"filename":"screenshot-4.png","revision":2775231,"resolution":"4","location":"assets","locale":"","width":1181,"height":867}},"screenshots":{"1":"CF7 form editor \u2014 \"woocommerce_product\" tag button highlighted in the form toolbar","2":"CF7 form template \u2014 generated [woocommerce_product] shortcode tag shown in the form body","3":"Form-tag Generator modal \u2014 required field, name, ID, class, filter by ID\/category\/tag\/colour\/size, stock status, multi-select, price, and search options","4":"Front-end contact form \u2014 WooCommerce product dropdown listing products by name"}},"plugin_section":[],"plugin_tags":[269434,269432,170482,269433,269435],"plugin_category":[],"plugin_contributors":[256981],"plugin_business_model":[],"class_list":["post-161674","plugin","type-plugin","status-publish","hentry","plugin_tags-cf7-product-list","plugin_tags-contact-form-7-product-dropdown","plugin_tags-contact-form-7-woocommerce","plugin_tags-woocommerce-product-dropdown-cf7","plugin_tags-woocommerce-product-field-contact-form-7","plugin_contributors-howdytheme","plugin_committers-howdytheme"],"banners":{"banner":"https:\/\/ps.w.org\/product-dropdown-for-contact-form-7\/assets\/banner-772x250.png?rev=3475264","banner_2x":"https:\/\/ps.w.org\/product-dropdown-for-contact-form-7\/assets\/banner-1544x500.png?rev=3475264","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/product-dropdown-for-contact-form-7\/assets\/icon-128x128.png?rev=3475264","icon_2x":"https:\/\/ps.w.org\/product-dropdown-for-contact-form-7\/assets\/icon-256x256.png?rev=3475264","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/product-dropdown-for-contact-form-7\/assets\/screenshot-1.png?rev=2775231","caption":"CF7 form editor \u2014 \"woocommerce_product\" tag button highlighted in the form toolbar"},{"src":"https:\/\/ps.w.org\/product-dropdown-for-contact-form-7\/assets\/screenshot-2.png?rev=2775231","caption":"CF7 form template \u2014 generated [woocommerce_product] shortcode tag shown in the form body"},{"src":"https:\/\/ps.w.org\/product-dropdown-for-contact-form-7\/assets\/screenshot-3.png?rev=2775231","caption":"Form-tag Generator modal \u2014 required field, name, ID, class, filter by ID\/category\/tag\/colour\/size, stock status, multi-select, price, and search options"},{"src":"https:\/\/ps.w.org\/product-dropdown-for-contact-form-7\/assets\/screenshot-4.png?rev=2775231","caption":"Front-end contact form \u2014 WooCommerce product dropdown listing products by name"}],"raw_content":"<!--section=description-->\n<p><strong>Product Dropdown For Contact Form 7<\/strong> adds a new <code>[woocommerce_product]<\/code> 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 \u2014 making it ideal for order enquiries, product support requests, quote requests, and any form where the customer needs to reference a specific WooCommerce product.<\/p>\n\n<p>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 <strong>Select2<\/strong> for a polished, accessible dropdown experience with a placeholder prompt on the front end.<\/p>\n\n<blockquote>\n  <p><strong>Requires both Contact Form 7 and WooCommerce<\/strong> to be installed and activated.<\/p>\n<\/blockquote>\n\n<p><a href=\"https:\/\/topsmodule.com\/how-to-create-product-dropdown-for-contact-form-7\/\">\ud83d\udcc4 Documentation<\/a> | <a href=\"https:\/\/topsmodule.com\/task\/product-dropdown-for-contact-form-7\/\">\ud83d\udd34 Live Demo<\/a> | <a href=\"https:\/\/topsmodule.com\/product\/product-dropdown-for-contact-form-7\/\">\u2b50 Upgrade to Pro<\/a><\/p>\n\n\n\n<h4>How It Works<\/h4>\n\n<p>Once activated, a new <strong>woocommerce_product<\/strong> button appears in the Contact Form 7 tag generator toolbar. Open the generator, configure your options \u2014 field name, ID, class, and product ID filter \u2014 then click <strong>Insert Tag<\/strong> 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.<\/p>\n\n<p>Example tag:\n    [woocommerce_product woocommerce_product-1 pro_id:21-22]<\/p>\n\n\n\n<h4>Free Features<\/h4>\n\n<p><strong>WooCommerce Product Dropdown Field<\/strong>\n* Adds a new <code>[woocommerce_product]<\/code> form tag type to Contact Form 7\n* Renders a fully functional <code>&lt;select&gt;<\/code> dropdown on the front end populated with your live WooCommerce products\n* Each dropdown option displays the product name \u2014 and the submitted value includes the product name along with its product ID (e.g. <code>Product Name (product_id: 21)<\/code>) for easy identification in notification emails\n* Defaults to showing all published WooCommerce products when no filter is applied<\/p>\n\n<p><strong>Filter Products by ID<\/strong>\n* Enter specific WooCommerce product IDs \u2014 separated by hyphens \u2014 to limit the dropdown to only those products\n* Example: entering <code>21-22-45<\/code> shows only those three products in the dropdown\n* Useful for forms where you want to offer a curated selection of products rather than your entire catalogue<\/p>\n\n<p><strong>Multiple Product Selection<\/strong>\n* Enable the \"Allow Multiple Product Selection\" option in the tag generator to let customers pick more than one product from the dropdown\n* When enabled, the dropdown renders with the HTML <code>multiple<\/code> attribute and the field name uses array notation so all selected products are captured correctly<\/p>\n\n<p><strong>Required Field Support<\/strong>\n* Mark the product dropdown as required by checking \"This is a required field\" in the tag generator \u2014 appends <code>*<\/code> to the tag type\n* Full CF7 validation integration \u2014 displays CF7's standard validation error if the required field is left empty on submission\n* <code>aria-required=\"true\"<\/code> and <code>aria-invalid<\/code> attributes are applied automatically for accessibility compliance<\/p>\n\n<p><strong>Custom ID &amp; Class<\/strong>\n* Set a custom HTML <code>id<\/code> attribute on the dropdown for JavaScript targeting or CSS styling\n* Add one or more custom CSS <code>class<\/code> names to the dropdown for full theme styling control<\/p>\n\n<p><strong>Select2 Powered Dropdown UI<\/strong>\n* The dropdown is rendered using <strong>Select2<\/strong> (v4.1.0) \u2014 a polished, accessible JavaScript dropdown library\n* Displays a \"--- Select Product ---\" placeholder when no product is selected\n* Fully responsive and works correctly on desktop, tablet, and mobile screens<\/p>\n\n<p><strong>Mail Tag Integration<\/strong>\n* The selected product value is available as a CF7 mail tag\n* Insert the mail tag into the CF7 Mail tab to include the customer's product selection in notification emails sent to admins or customers<\/p>\n\n<p><strong>Visual Tag Generator in the CF7 Editor<\/strong>\n* A dedicated tag generator panel is added to the Contact Form 7 form editor \u2014 no manual shortcode writing needed\n* All options are configurable from a clean UI with live tag preview\n* One-click Insert Tag places the generated tag directly into the form editor\n* Includes a mail tag tip at the bottom of the panel<\/p>\n\n\n\n<h4>Pro Version Features<\/h4>\n\n<p>Upgrade to <strong>Product Dropdown For Contact Form 7 Pro<\/strong> to unlock advanced product filtering and display options \u2014 all disabled in the free tag generator panel.<\/p>\n\n<p><a href=\"https:\/\/topsmodule.com\/product\/product-dropdown-for-contact-form-7\/\">\u2b50 Get the Pro Version \u2192<\/a><\/p>\n\n<p><strong>Filter by Product Category<\/strong>\n* Instead of filtering by product IDs, select any WooCommerce product category from the tag generator\n* The dropdown will show only products belonging to the selected category \u2014 dynamically updated as products are added or removed from that category<\/p>\n\n<p><strong>Filter by Product Tag<\/strong>\n* Filter the dropdown to show only products that carry a specific WooCommerce product tag\n* Select the tag from the tag generator panel \u2014 all products tagged with that term will populate the dropdown<\/p>\n\n<p><strong>Filter by Product Color Attribute<\/strong>\n* Filter the product dropdown by the <code>pa_color<\/code> WooCommerce product attribute\n* Select a specific colour term from the tag generator \u2014 only products assigned that colour attribute will appear in the dropdown<\/p>\n\n<p><strong>Filter by Product Size Attribute<\/strong>\n* Filter the product dropdown by the <code>pa_size<\/code> WooCommerce product attribute\n* Select a specific size term from the tag generator \u2014 only products assigned that size attribute will appear in the dropdown<\/p>\n\n<p><strong>Filter by Stock Status<\/strong>\n* Choose to display only <strong>In Stock<\/strong> products or only <strong>Out of Stock<\/strong> products in the dropdown\n* Keeps the product list relevant and avoids customers selecting products they cannot order<\/p>\n\n<p><strong>Show Product Price in Dropdown<\/strong>\n* Enable the \"Enable Price\" option to display each product's price alongside its name in the dropdown options\n* Helps customers immediately see pricing while selecting a product within the form<\/p>\n\n<p><strong>Product Search Box<\/strong>\n* Enable the \"Search Box\" option to activate Select2's built-in live search functionality inside the dropdown\n* Customers can type to instantly filter and find the product they are looking for \u2014 essential for stores with large product catalogues<\/p>\n\n\n\n<h4>Example Use Cases<\/h4>\n\n<ul>\n<li><strong>Order Enquiry Forms<\/strong> \u2014 Let customers select the product they are enquiring about before submitting a message<\/li>\n<li><strong>Quote Request Forms<\/strong> \u2014 Allow customers to pick one or more products they want a custom quote for<\/li>\n<li><strong>Product Support Forms<\/strong> \u2014 Reference a specific product in a customer support or warranty claim form<\/li>\n<li><strong>Return &amp; Exchange Forms<\/strong> \u2014 Let customers identify the product they wish to return or exchange<\/li>\n<li><strong>Custom Order Forms<\/strong> \u2014 Build bespoke order forms where customers choose from a curated list of products<\/li>\n<\/ul>\n\n\n\n<h4>What the Submitted Value Looks Like<\/h4>\n\n<p>When a customer selects a product and submits the form, the value passed to the notification email via the mail tag is formatted as:<\/p>\n\n<pre><code>Product Name (product_id: 21)\n<\/code><\/pre>\n\n<p>This gives you both the human-readable product name and the WooCommerce product ID in every form submission \u2014 making it easy to identify and process the enquiry.<\/p>\n\n<!--section=installation-->\n<p><strong>From the WordPress Plugin Directory:<\/strong><\/p>\n\n<ol>\n<li>Make sure <strong>Contact Form 7<\/strong> and <strong>WooCommerce<\/strong> are both installed and activated.<\/li>\n<li>In your WordPress dashboard, go to <strong>Plugins &gt; Add New<\/strong>.<\/li>\n<li>Search for <strong>\"Product Dropdown For Contact Form 7\"<\/strong> and click <strong>Install Now<\/strong>.<\/li>\n<li>Click <strong>Activate<\/strong> once installation is complete.<\/li>\n<li>Open any Contact Form 7 form \u2014 click the new <strong>woocommerce_product<\/strong> button in the tag generator toolbar.<\/li>\n<li>Configure your field name, ID, class, product ID filter, and other options, then click <strong>Insert Tag<\/strong>.<\/li>\n<li>Go to the <strong>Mail<\/strong> tab of the CF7 form and add the mail tag to include the selected product in notification emails.<\/li>\n<li>Save the form and test it on the front end \u2014 the product dropdown will appear with your WooCommerce products.<\/li>\n<\/ol>\n\n<p><strong>Manual Upload:<\/strong><\/p>\n\n<ol>\n<li>Download the plugin ZIP file.<\/li>\n<li>In your WordPress dashboard, go to <strong>Plugins &gt; Add New &gt; Upload Plugin<\/strong>.<\/li>\n<li>Upload the ZIP, click <strong>Install Now<\/strong>, then <strong>Activate<\/strong>.<\/li>\n<li>Follow steps 5\u20138 above.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20plugin%20require%20contact%20form%207%20and%20woocommerce%3F\"><h3>Does this plugin require Contact Form 7 and WooCommerce?<\/h3><\/dt>\n<dd><p>Yes. Both <strong>Contact Form 7<\/strong> and <strong>WooCommerce<\/strong> must be installed and activated on your WordPress site. The plugin registers a custom CF7 form tag and queries WooCommerce products \u2014 it cannot function without either plugin.<\/p><\/dd>\n<dt id=\"where%20do%20i%20find%20the%20new%20product%20dropdown%20field%20in%20cf7%3F\"><h3>Where do I find the new product dropdown field in CF7?<\/h3><\/dt>\n<dd><p>After activating the plugin, open any Contact Form 7 form in your WordPress admin. A new <strong>woocommerce_product<\/strong> button will appear in the tag generator toolbar above the form editor. Click it to open the tag generator panel.<\/p><\/dd>\n<dt id=\"how%20do%20i%20filter%20the%20dropdown%20to%20show%20only%20specific%20products%3F\"><h3>How do I filter the dropdown to show only specific products?<\/h3><\/dt>\n<dd><p>In the tag generator, enter WooCommerce product IDs separated by hyphens in the Product ID field \u2014 for example <code>21-22-45<\/code>. Only those products will appear in the dropdown. Leave the field empty to display all published products. Filtering by category, tag, colour, and size is available in the Pro version.<\/p><\/dd>\n<dt id=\"can%20customers%20select%20more%20than%20one%20product%3F\"><h3>Can customers select more than one product?<\/h3><\/dt>\n<dd><p>Yes. Check the \"Allow Multiple Product Selection\" option in the tag generator. The dropdown will support multiple selections and all chosen products will be captured in the form submission.<\/p><\/dd>\n<dt id=\"can%20i%20make%20the%20product%20dropdown%20a%20required%20field%3F\"><h3>Can I make the product dropdown a required field?<\/h3><\/dt>\n<dd><p>Yes. Check \"This is a required field\" in the tag generator. CF7 will display a validation error if the customer submits the form without selecting a product.<\/p><\/dd>\n<dt id=\"how%20does%20the%20selected%20product%20appear%20in%20the%20notification%20email%3F\"><h3>How does the selected product appear in the notification email?<\/h3><\/dt>\n<dd><p>The submitted value is formatted as <code>Product Name (product_id: 21)<\/code>. Add the corresponding mail tag in the CF7 Mail tab to include it in your email notification. The mail tag tip is shown at the bottom of the tag generator panel.<\/p><\/dd>\n<dt id=\"can%20i%20show%20product%20prices%20in%20the%20dropdown%3F\"><h3>Can I show product prices in the dropdown?<\/h3><\/dt>\n<dd><p>Yes \u2014 this is a <strong>Pro version<\/strong> feature. Enable the \"Enable Price\" option in the tag generator to display product prices alongside names in the dropdown options.<\/p><\/dd>\n<dt id=\"can%20customers%20search%20for%20a%20product%20within%20the%20dropdown%3F\"><h3>Can customers search for a product within the dropdown?<\/h3><\/dt>\n<dd><p>Yes \u2014 this is a <strong>Pro version<\/strong> feature. Enable the \"Search Box\" option to activate Select2's live search functionality inside the dropdown.<\/p><\/dd>\n<dt id=\"is%20the%20dropdown%20mobile-friendly%3F\"><h3>Is the dropdown mobile-friendly?<\/h3><\/dt>\n<dd><p>Yes. The dropdown is powered by Select2 and is fully responsive, adapting correctly to all screen sizes including smartphones and tablets.<\/p><\/dd>\n<dt id=\"can%20i%20filter%20by%20stock%20status%20so%20only%20in%20stock%20products%20show%3F\"><h3>Can I filter by stock status so only In Stock products show?<\/h3><\/dt>\n<dd><p>Yes \u2014 this is a <strong>Pro version<\/strong> feature. The stock status filter lets you restrict the dropdown to only In Stock or only Out of Stock products.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0<\/h4>\n\n<ul>\n<li>Initial release \u2014 Adds a [woocommerce_product] form tag to Contact Form 7 with a WooCommerce product dropdown, product ID filtering, multiple selection, required field validation, custom ID\/class support, Select2 UI, and mail tag integration. Pro version adds category, tag, attribute, stock status, price, and search filtering.<\/li>\n<\/ul>","raw_excerpt":"Add a searchable WooCommerce product dropdown field to any Contact Form 7 form. Filter products by ID, allow multiple selection, and include product n &hellip;","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/161674","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=161674"}],"author":[{"embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/howdytheme"}],"wp:attachment":[{"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=161674"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=161674"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=161674"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=161674"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=161674"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=161674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}