Posted on

WooCommerce: Product Enquiry Form @ Single Product Page (CF7)

A client asked to show a “Product Inquiry” button on the Single Product Page which would display, upon click, a Contact Form with an automatically populated subject (Contact Form 7 plugin must be installed of course). Here’s how I did it!

Display Product Enquiry Form on the WooCommerce Single Product Page

PHP Snippet: Add CF7 to the Single Product Page – WooCommerce


/**
 * @snippet       Show Product Inquiry CF7 @ Single Product Page - WooCommerce
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=21605
 * @author        Rodolfo Melogli
 * @compatible    WC 3.5
 */

// --------------------------
// 1. Display Button and Echo CF7

add_action( 'woocommerce_single_product_summary', 'bbloomer_woocommerce_cf7_single_product', 30 );

function bbloomer_woocommerce_cf7_single_product() {
echo '<button type="submit" id="trigger_cf" class="single_add_to_cart_button button alt">Product Inquiry</button>';
echo '<div id="product_inq" style="display:none">';
echo do_shortcode('[paste_your_contact_form_7_shortcode_here]');
echo '</div>';
}

// --------------------------
// 2. Echo Javascript: 
// a) on click, display CF7
// b) and populate CF7 subject with Product Name
// c) and change CF7 button to "Close"

add_action( 'woocommerce_single_product_summary', 'bbloomer_on_click_show_cf7_and_populate', 40 );

function bbloomer_on_click_show_cf7_and_populate() {
  
  ?>
    <script type="text/javascript">
        jQuery('#trigger_cf').on('click', function(){
		if ( jQuery(this).text() == 'Product Inquiry' ) {
                	jQuery('#product_inq').css("display","block");
                	jQuery('input[name="your-subject"]').val('<?php the_title(); ?>');
			jQuery("#trigger_cf").html('Close'); 
		} else {
			jQuery('#product_inq').hide();
			jQuery("#trigger_cf").html('Product Inquiry'); 
		}
        });
    </script>
	<?php
	  
}

Is There a Plugin For That?

If you’d love to code but don’t feel 100% confident with PHP, I decided to look for a reliable plugin that achieves the same result.

Actually, in this case, I wrote a full tutorial – it covers many plugin alternatives and gives you screenshots and links. Here it is: https://businessbloomer.com/enable-woocommerce-customers-request-quote/

But in case you hate plugins and wish to code (or wish to try that), then keep reading πŸ™‚

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

53 thoughts on “WooCommerce: Product Enquiry Form @ Single Product Page (CF7)

  1. Great snippet, exactly what I’m looking for πŸ™‚
    Could you help me with some customisation regarding the use in a shop with 2 languages?

    Thanks a lot in advance!

    1. Thank you Branka πŸ™‚ Yes, this is possible – if you’d like to get a quote, feel free to contact me here.

  2. Hello! thanks a lot for this snippet, It was really useful, however I’m having some trouble trying to make the page scroll to the whole contact form once I click the button, the thing is the form doesn’t appear in the viewport as the button is in the bottom section of my page, is there a way I can make the page scroll right to the form space?

    thanks

    1. Hey Samuel, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  3. Hello,

    Thanks for such a nice code. It worked but I don’t want the product inquiry button which open’s the form, I want the form to open always, please let me know how can I do that.

    Thanks in advance.

    1. Hey Adil, thanks for your comment! This other article will help: https://businessbloomer.com/enable-woocommerce-customers-request-quote/ (see the first snippet)

  4. amazing code!!! here is something that maybe you can help me:

    The text on the button is Product Inquiry, but i changed it to Can’t find your size. Now when you click on it, it shows Product Inquiry and the you have to click again for the form to show. Can i remove that Product Inquiry and click on the button once?

    Thanks!

    1. Hey Cosmin, thanks for your comment! Not sure I understand fully, but make sure to change the jQuery part as well. Also make sure to escape the single quote inside “Can’t”. Hope this helps

  5. Hi there,
    This is great, and exactly what I need, but I can not get it to work. I’m not sure why, but it seems like the jQuery isnt working. If I take the display:none out then it displays the form. I can close the form by clicking the button, but it wont reappear when I click again. Also, it isn’t sending the Post title through on the form. Any idea what the issue could be? I’m using the Avada theme.

    1. Hi Lizzy, thanks for your comment πŸ™‚ It might be a jQuery conflict or there might be some other problem – sorry but I can’t help here with custom troubleshooting. Thanks for your understanding, R

  6. Nice snippet. Works well.
    But only for one language and specific button text.
    Can You help me to make it work with WPML or with any button text.

    Is it possable to triger vbutton by class or id – not by text?

    1. I founded it:

      // To show Contact Form 7 on Button Click event check:
      // https://businessbloomer.com/woocommerce-show-inquiry-form-single-product-page-cf7
      add_action( 'woocommerce_single_product_summary', 'bbloomer_on_click_show_cf7_and_populate', 40);
      function bbloomer_on_click_show_cf7_and_populate() {
      	$phpLabel = __('Product Inquiry');
      	$closeLabel = __('Close');
        ?>
          <script type="text/javascript">
              jQuery('#trigger_cf').on('click', function(){
              if ( jQuery(this).text() == '<?php echo $phpLabel; ?>' ) {
                          jQuery('#product_inq').css("display","block");
                          jQuery('input[name="your-subject"]').val('<?php the_title(); ?>');
                  jQuery("#trigger_cf").html('<?php echo $closeLabel; ?>'); 
              } else {
                  jQuery('#product_inq').hide();
                  jQuery("#trigger_cf").html('<?php echo $phpLabel; ?>'); 
              }
              });
          </script>
          <?php
      }
      
    2. πŸ™‚

  7. Hi Rodolfo! Second code snippet I’ve gotten from you and it works like a charm! Thank you very much for this code and for keeping my number of plugins down πŸ˜‰
    One small thing though, I tried to use reCAPTCHA in my form, but it doesn’t seem to work. The reCAPTCHA confirmation button doesn’t appear when I expand the form and when I try to submit my form I get the CF7 error “There was an error trying to send your message. Please try again later.”. Do you have any idea of what the problem might be?

    1. Thank you Fhilip, thanks so much for your comment! Unfortunately this looks like custom troubleshooting work and I cannot help here via the blog comments. Thanks a lot for your understanding! ~R

    2. Tried the code you provided all is good however the contact form is not sending to my email, did i miss something? please help me

    3. Feels like you have a CF7 error – check your CF7 form settings πŸ™‚

  8. Very useful – thank You!

  9. Hey man, you ROCKS!!!! Thank you very much for your contribution!!!

  10. hello, does anyone know how to enable it only for registered users?

    thank you

    1. Thanks for your comment Mario! You can use the “is_user_logged_in()” WordPress function to check that πŸ™‚

  11. Hi, I want to ask that how you create that subject field in contact form 7?

    1. Amruta, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  12. Hello there,

    Quick question in order to change the background color of the button I am trying to add the following code but it just not change the color. Any tips?

    .single_add_to_cart_button {
    background-color: #4CAF50; /* Green */
    }

    Thanks a lot for your help! It’s pretty awesome!

    1. Thanks for your comment Leonidas! This is custom to your theme so I cannot help here πŸ™‚

  13. Hello friend, yes it’s working but there is a small bug button
    PRODUCT INQUIRY continues with the reading icon to rotate. Thank you

    1. Hey Marco, thanks so much for your comment! Unfortunately this is custom troubleshooting work and I cannot help here via the blog comments – the snippet works on my website. Thanks a lot for your understanding! ~R

  14. 2 Days Took me to find the best place for WC snippets and know-howΒ΄s
    Congratulations to all of you guys!
    Thank you for your very useful information. Thanks for sharing your knowledge!
    BusinessBloomer Rocks!

    1. Ahah thanks Vale πŸ™‚

  15. Thanks Rodolfo! This is really useful. I have used this for a client website. I am not so new on wordpress but on woocommerce I am still a newbie. I can say I didn’t realize I can do this until I found your site. More power to you!

    1. Cheers Bob πŸ™‚

  16. Hi

    Does anyone have a snippet that will work with product enquiry form from woocommerce. I’ve only got a few products on my site but recently imported loads of affiliate products and the enquiry form is showing on those. Bulk editor does not allow for product enquiry, although it did for reviews which was a stroke of luck, my work around is to create a custom inquiry tab and only add that to the 3 products, but surely there is a conditional way. If I could program I would and I have looked but struggled. If anyone could help that would be great.
    ps
    I just can’t believe I’ve had that plugin for a year and it now, literally the day after it expires that I needed to customise it!
    July 21st 2017
    Renew for $79*
    Typical!

    regards
    mark

    1. Hey Mark, thanks for your comment! I would recommend to “unset” the Product Enquiry if the product type is external. Unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  17. Hi Rodolfo,

    First of all, congrats on your website! You post great content and your mailing list is a must for people that, like me, just started to learn a little bit of code here and there in order to customize their websites.

    Similar to what Mirko Gosch posted, I too needed some customization on this snippet. I needed the inquiry to come up only when a product has no price but I preferred the position of the button to be after the short description. This is how I did it in case someone else is looking for the same output.

    Note that you only need to work on the first part of the snippet

    add_filter( 'woocommerce_single_product_summary', 'bbloomer_woocommerce_cf7_single_product', 30 );
     
    function bbloomer_woocommerce_cf7_single_product() {
    	global $product, $price;
    	if ( $product->get_price() == 0 ||  $product->get_price() == '' ) {
    		echo '<button type="submit" id="trigger_cf" class="single_add_to_cart_button button alt">Product Inquiry</button>';
    		echo '<div id="product_inq" style="display:none">';
    		echo do_shortcode('[paste_your_contact_form_7_shortcode_here]');
    		echo '</div>';
    }}
    
    1. Awesome, thanks Francisco!

  18. This is incredibly useful. For the life of me, however, I can’t figure out how to use this to get the SKU (or multiple on variable products), in addition to the title, to populate in the form. Any ideas?

    1. Jules, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R

  19. Hey Rodolfo

    Yet another great snippet which I tested out immediately. It works fine.

    It took me some hours of research + trial & error to come up with a conditional logic that letΒ΄s me use and only show this kind of “inquiry tab” whenever a product is out of stock. I was just about to quit trying and ask you for help when I finally got it working.

    HereΒ΄s my altered version of your snippet which hopefully helps some other members of our tribe πŸ˜‰ :

     
    add_action( 'woocommerce_single_product_summary', 'bbloomer_woocommerce_cf7_single_product', 30 ); 
    
    function bbloomer_woocommerce_cf7_single_product() {
    global $product;
    if ( is_single() && ! $product->is_in_stock() ) {
    echo '<button type="submit" id="trigger_cf" class="single_add_to_cart_button button alt">Product Inquiry</button>';
    echo '<div id="product_inq" style="display:none">';
    echo do_shortcode('[paste_your_contact_form_7_shortcode_here]');
    echo '</div>';
    }
    else {
    	return;
    }
    }
    
    1. Thank you so much Mirko!

  20. Thank you. Your tips excellent. I appreciate all of the help you provide on your site.
    Best of Wishes, Jay

  21. Hi Rodolfo! This was on my list of To-Dos – and then you wrote it up for me =) Thanks heaps!!

    One thing though – my new button reloads the page – it shows the Form for a second and then hides it again when the page reloads. Any ideas? I’m using Genesis, if that’s any help… =)

    1. Hey, thanks so much for your comment! Uhm, weird, maybe the JS conflicts with something within your theme πŸ™‚ If you switch theme, does this work as expected?

    2. If anyone has the same problem, I changed the button type from type=”submit” to type=”button” and this fixed it =)

  22. Thanks Rodolfo,
    Love this little feature! Works great with WP forms also.

    1. Excellent! Thanks for your feedback Cathy πŸ™‚

  23. […] Before taking a look at the snippet, make sure your “POA” product has no price (regular and sale price). Also, please reference to this other article if you want to add some Javascript to show/hide a Contact Form 7: https://businessbloomer.com/woocommerce-show-inquiry-form-single-product-page-cf7/ […]

  24. Rodolfo! Thank you kindly for your wealth of knowledge! I look forward to your emails now and have visited your website many times since I’ve discovered it. Thank you again!!! Tammy

    1. Thanks a million Tammy!

    1. You’re welcome Gianluca!

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.