Watch the variation dropdowns and copy the values to a CF7DTE hidden field.
This post completes the various combinations of product enquiry forms for Contact Form 7 and Ninja Forms for simple and variable products. My first post was a Product Enquiry form using WooCommerce and Contact Form 7. That post continues to be the most popular on this site and I frequently revisit it to answer questions in the comments.
When someone asked about using the code for a variable product I was unable to figure out a way to handle the selected options for variable products. This led me to investigate Ninja Forms. It’s a huge plugin (19MB vs 530KB for CF7!!) but I have found it easier to use from a developer and user perspective. I was able to use it for a product enquiry for variable products.
The code depends on the .variations_form CSS class name in the WooCommerce form. This is in the WooCommerce single-product/add-to-cart/variable.php template file. If this file is overridden in your theme then my code may not work. I looked at a few themes and they don’t override the template file. The class name is also referenced in the assets/js/frontend/add-to-cart-variation.js file so it would have to be changed to match a template file change. Based on this, I’m confident that my code will work in most WooCommerce setups without the need for modification.
Easier to use than the Ninja Forms version
The Ninja Forms version inserts all possible variation combinations into a select field. This can make for a long list. Furthermore it requires the user to select the combination that they are interested in. Not particularly user friendly.
With the Contact Form 7 version the variations the user selects are copied into the hidden field. This is much easier for the user.
Maybe I should investigate porting this CF7 code to Ninja Forms…
You will also need to add the following to the Contact Form 7 form:
And then add this line to the CF7 Mail tab:
There is no change to the frontend. As an example, a product with 2 variations it may look like this (screenshot from Storefront theme):