MULTISTEP PRODUCT VARIATION ENQUIRY

Hi there,

position of multistep enquiry is inside of product page according.

Step 1:
First step need an action that add product variation, quantity fields, upload input and submit button. (this is graphic layout: http://prntscr.com/kmcnu3)

Step 2:
Submit go to Contact Form 7 populated fields of variation, user info fields and submit button.

Step 3:
Go to last step, with “thank to user for send” text only.

Thanks in advance,
Fabio

Hi,

Sorry, but your question is not quite clear for us. Are you requesting additional code customization work for your website? Sorry, but it is out of our theme’s support scope.

Regards

No I’m not requesting additional code.

Thanks anyway
Fabio

OK, sorry, but there is no such multistep inquiry form. You can create a simple form with Contact form 7 only.

Ok I understand last question, if user select variation of a product, Contact Form 7 can populate apposite fields with variation selected?

I created this one but is different because here I just need populate with product title:
http://www.pendrivepersonalizzate.it/demo/prodotto/variable-product-example/#1534949585568-50f41143-05c1

Maybe this article should help you to display product title in your contact form email https://contactform7.com/special-mail-tags/

I solved it like that (Code is added after add to cart button in product page, but you can change hook or hide and show where you want with CF7 shortcode):

Contact Form 7 setting:
<label>[text* your-name input-bg placeholder “Nome*”]</label>
<label>[text* your-surname input-bg placeholder “Surname*”]</label>
<label>[text* your-tel input-bg placeholder “Tel*”]</label>
<label>[email* your-email input-bg placeholder “E-mail*”]</label>
<label>[text your-subject class:product_name]</label>
<label>[text your-details class:product_details]</label>
[submit class:btn class:btn-color-primary class:btn-shape-rectangle class:btn-size-default “Send”]

Contact Form 7 mail:
— Request for product —
From: [your-name] [your-surname] <[your-email]>
Product: [your-subject]
Product Variation: [your-details]

Custom function:

add_action( ‘woocommerce_after_add_to_cart_form’, ‘product_enquiry_custom_form’ );
function product_enquiry_custom_form() {

global $product, $post;

//Dot forget to set HERE your Contact Form 7 shortcode:
$contact_form_shortcode = ‘[contact-form-7 id="1834" title="Preventivo Rapido"]‘;

// 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 = __( ‘Enquiry for’, ‘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 ‘

'; print_r( $variations_attributes ); echo '

‘;

## 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 class=”enquiry-form-title”>’.$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
}

Now I try to make multistep but I think is not really easy!

Best,
Fabio

OK, contact us if you will have any extra questions related to our theme.

[Author]

Posts