Pass the chosen product variations data into Contact Form 7 enquiry form

Question

With WooCommerce, I use Contact Form 7 and Product Info Request plugins to add a form inside a single product pages, because I need a functionality that allow users to send an enquiry request about products (thought simple contact form).

You can understand seeing this screenshot:

All my product are variable product with variations (from attributes).

Is there any way to retrieve the selected variations by the customer and send it via contact form 7?

For example :

User select the color black and size s, then fill the form and when the email is send, in addition to Receive the classic information (name, email ecc..) I receive also the attribute selected (in this case black and s)

Answer 1

UPDATED: Added WC 3+ compatibility

I have tested it and it will not send any data related to chosen variations, because it is just outputting the selected contact form below add-to-cart button (in single products pages). Additionally this plugin hasn't been updated since more than 2 years, so it's some kind of outdated.

THE GOOD NEW: A WORKING SOLUTION

I have found this related answer: Product Name WooCommerce in Contact Form 7

It explains how to set a contact form 7 shortcode in a product tab and displaying the chosen product title in the email.

So from this answer I have transposed the code, to use it just as the plugin was doing (just below the add to cart button).

Here in this example/answer I have set in my variable product 2 attributes for the product variations: Color and Size.

This are my settings Contact form 7 for the form that I will use in my code:

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Subject (required)
    [text* your-subject class:product_name] </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

[text your-product class:product_details]

Here I have add this text field [text your-product class:product_details]. so you will need to add also in your "mail" settings tab [your-product] tag inside the "message body", to get that in your email:

From: [your-name] <[your-email]>
Subject: [your-subject]

Product: [your-product]

Message Body:
[your-message]

--------------
This e-mail was sent from a contact form 7

The PHP code custom funtion hooked in woocommerce_after_add_to_cart_form action hook:

add_action( 'woocommerce_after_add_to_cart_form', 'product_enquiry_custom_form' );
function product_enquiry_custom_form() {

    global $product, $post;

    // Set HERE your Contact Form 7 shortcode:
    $contact_form_shortcode = '[contact-form-7 id="382" title="form"]';

    // compatibility with WC +3
    $product_id = method_exists( $product, 'get_id' ) ? $product->get_id() : $product->id;
    $product_title = $post->post_title;

    // The email subject for the "Subject Field"
    $email_subject = __( 'Enquire about', 'woocommerce' ) . ' ' . $product_title;

    foreach($product->get_available_variations() as $variation){
        $variation_id = $variation['variation_id'];
        foreach($variation['attributes'] as $key => $value){
            $key = ucfirst( str_replace( 'attribute_pa_', '', $key ) );
            $variations_attributes[$variation_id][$key] = $value;
        }
    }
    // Just for testing the output of $variations_attributes
    // echo '<pre>'; print_r( $variations_attributes ); echo '</pre>';


    ## CSS INJECTED RULES ## (You can also remve this and add the CSS to the style.css file of your theme
    ?>
    <style>
        .wpcf7-form-control-wrap.your-product{ opacity:0;width:0px;height:0px;overflow: hidden;display:block;margin:0;padding:0;}
    </style>

    <?php


    // Displaying the title for the form (optional)
    echo '<h3>'.$email_subject.'</h3><br>
        <div class="enquiry-form">' . do_shortcode( $contact_form_shortcode ) . '</div>';


    ## THE JQUERY SCRIPT ##
    ?>
    <script>
        (function($){

            <?php
                // Passing the product variations attributes array to javascript
                $js_array = json_encode($variations_attributes);
                echo 'var $variationsAttributes = '. $js_array ;
            ?>

            // Displaying the subject in the subject field
            $('.product_name').val('<?php echo $email_subject; ?>');

            ////////// ATTRIBUTES VARIATIONS SECTION ///////////

            var $attributes;

            $('td.value select').blur(function() {
                var $variationId = $('input[name="variation_id"]').val();
                // console.log('variationId: '+$variationId);
                if (typeof $variationId !== 'undefined' ){
                    for(key in $variationsAttributes){
                        if( key == $variationId ){
                            $attributes = $variationsAttributes[key];
                            break;
                        }
                    }

                }
                if ( typeof $attributes !== 'undefined' ){
                    // console.log('Attributes: '+JSON.stringify($attributes));
                    var $attributesString = '';
                    for(var attrKey in $attributes){
                        $attributesString += ' ' + attrKey + ': ' + $attributes[attrKey] + ' — ';
                    }
                   $('.product_details').val( 'Product <?php echo $product_title; ?> (ID <?php echo $product_id; ?>): ' + $attributesString );
                }
            });

        })(jQuery);
    </script>

    <?php
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

You will get exactly what the plugin was doing with that additionals features:

• A custom product title, as subject of the mail.
• The selected variation attributes Name label + values in the additional fiels (that will be hidden).

Here are the screen shoots from my test server:

The product with the selected attributes:

What I get on the form (I dont hide the special text field to show you the pulled data by jQuery):

As you see, you get the data you need to send in your email…

Once I have selected the attributes of the product and filled the other fields of the form, when I submit this form I get, this email message:

From: John Smith <[email protected]>
Subject: Enquire about Ship Your Idea

Product: Product Ship Your Idea (ID 40):  Color: black —  Size: 12 —

Message Body:
I send this request about this very nice product … I send this request about this very nice product …

--
This e-mail was sent from a contact form 7

So everithing is working just as you expected and this is a working tested example answer.