Make it easy for customers to ask questions about your products - add a product enquiry form that will include the product name in the email that it sends.
Sometimes a customer has questions that the product description and photos don’t answer. Instead of requiring them to go to your contact page you can make it much easier to ask their questions by added a simple contact form to the product page. I will show you how to include the product name in the query email without having to have a different form for each product, and how to automatically add the form to each product page.
Install the Plugins
I recommend the very popular Contact Form 7 (CF7) plugin. You will also need the Contact Form 7 Dynamic Text Extension plugin, a companion plugin to Contact Form 7.
After you install and activate the Contact Form 7 and Contact Form 7 Dynamic Text Extension plugins you can go to the Contact/Contact Forms page. For the enquiry form you can edit an existing form or create a new one.
CF7 forms do not have any dynamic features so the email sent by the form won’t tell you the product page that the form was submitted from. We need the features of the Contact Form 7 Dynamic Text Extension plugin.
Add Product Name to Enquiry Form
We need to add a field to the CF7 form with the product name as its value so that it can be included in the email that CF7 sends. The product name can be included as a visible field in the form or as a hidden field.
Edit the contact form and insert a new form field that will hold the product name.
It will look better to include the new field as a hidden one, but we will initially use a visible field to make it easy to check that it is being correctly populated with the product name.
This uses the Dynamic Text Extension plugin to retrieve the title of the current post (or page or product). I can now use the declared mail tag (‘product-name’) in the email:
You can see that I have added it to the mail subject and body.
Test the Form
It is worth doing a quick test that the form displays correctly and also includes the product name in the email. Edit one of your products and add the form shortcode to the editor area. For example:
Change Product Name to Hidden Field
If the form is working as expected I suggest changing the product name field to be hidden so that users don’t change its value when submitting the form. Just change dynamictext to dynamichidden.
Automatically Add Form to All Products
You could manually add the form shortcode to the product description of every product but that would be tedious and error prone. It would also be easy to forget to add it to products that you add in the future.
The easiest method is to write a small plugin to do this automatically. Either put this code in a file in the wp-content/plugins directory and activate it, or add the code to the active theme’s functions.php.
The code checks that Woocommerce is active because the is_product() check is only available when it is. If you omit the first test it will cause a fatal error:
Enhancements
You may decide to only display the enquiry form when the product is in stock, or to display a slightly different form when it is out of stock. When you have checked that Woocommerce is active you can easily access all the information for the product. The options are endless.
Display Form for In Stock Products
For example, here is the code to display the form for in-stock products:
Form to Report Error on Page
You could create a form to allow people report errors on your page e.g. spelling mistakes. Adding the page or post url is easy but you can go further by including a link to be able to edit the page.
We need the page url (so that you can review the report) and then the site’s url and the post ID. These two will be combined to create a link to directly edit the page.
We combine the site url and post ID to make the edit link. When you click on that link you can quickly correct the issue.
Include Product SKU in Email
The SKU is stored as a custom field so ‘CF7_get_custom_field’ can be used to retrieve it. The key is ‘_sku’.
Limit the form to specified categories
You can use the has_term() function to test whether a product is in specified categories. It can take an array of category slugs.
Hi, thanks for this.
I created a new plugin copying the content of what you wrote above.
The only problem I have is that the function runs only on the home page and not on the products pages… any idea why?
I even tried to add that code to the theme functions.php
Can you post your code somewhere e.g. https://pastebin.com/
The code can be in functions.php or its own file as a plugin.
Resolved: Sort of…
Alex and I did some troubleshooting over an number of emails. For some reason the code was not running on the product page, even when is_product() was true – this was verified by Query Monitor and Query Monitor Extend.
The workaround was to use a WooCommerce action. Alex wrote the following:
add_action('woocommerce_after_single_product_summary', 'add_quote_form');function add_quote_form(){
echo do_shortcode('[contact-form-7 id="2173" title="Request a Quote"]');
}
Thank you damien ! I’m using your solution and very satisfied.
Regards!
Brilliant, thanks for letting me know.
I was searching for a while to get that product name into Contact form 7. Been through lots of sites but nothing was simple like this one.. Finally I can add product name directly into the Contact form 7 enquiry form. Saved my day. Halfway through the article. Thank you so much <3
how to add woo product’s SKU instead of product title ?
Nio – The SKU is stored in a custom field so you can use the ‘CF7_get_custom_field’ feature of the plugin.
https://gist.github.com/damiencarbery/f7db36de7a875b6b9b4d10ff61597f60#file-cf7-retrieve-product-sku-txt
Hello, I want show form in specific category product, but i don´t know how do it …
I know I have to modify the following if, but I do not know how to filter by category:
if ( $product->is_in_stock() ) {Can you help me?
To show the form on a category archive you will need a different hook as ‘the_content’ is not run on category archives.
add_action( 'woocommerce_after_shop_loop', 'dc_cf7_form_to_category_archive', 40 );function dc_cf7_form_to_category_archive() {
if ( is_product_category( array( 'category_1', 'category_2' ) ) ) {
echo do_shortcode( '[contact-form-7 id="65" title="Contact form 1"]' );
}
}
To apply to all categories you can remove the is_product_category() check. You can see examples of that function at: WooCommerce Conditional Tags docs page.
The ‘woocommerce_after_shop_loop‘ is only on category pages so the function doesn’t need to check whether it is in a product category page.
I suggest using
[dynamichidden page-url "CF7_URL"]in the form and
Page URL: [page-url]in the email so that you know what category the form came from.
You could write a shortcode that returns the product category, but the url is a quick solution.
Is there a way to request in the same mail a quote for multiple products specifying different characteristics for each of them? I Mean: i would ask a quote for 200 t-shirts with: SIZE: M, COLOR: WHITE, SLEEVE: LONG and 150 HATS with: COLOR: BLACK, LOGO: YELLOW etc…?
Francesco – The default contact form has a textarea for the message. The customer can add anything they want in that textarea so they could ask for the quote there.
I don’t think that it would be worth writing code for a rare scenario like you describe.
You could add text in the form to explain to customers that they can ask for a quote.
Hmm, how would we use this with a variable product to get the variable SKU?
Simon – I think that you would need to write custom code for this. You can easily get the product ID and from that use wc_get_product($id) to the product object and then call ‘get_available_variations()’ to get an array of info about the variations and then get the SKU for each variation.
The hard part might be how to know which variation the customer is asking about. I don’t know if you could inject markup into the form e.g. radio buttons, one for each variation.
Can you describe in more detail what you would like to see in the form and in the email?
I suggest posting a question in the the CF7 Dynamic Text Extension support forum: https://wordpress.org/support/plugin/contact-form-7-dynamic-text-extension
Simon – I implemented an enquiry form for variable products using Ninja Forms: https://www.damiencarbery.com/2018/05/product-enquiry-form-with-ninja-forms/
Hi Damien
This is very helpful.
Is there a way to automatically put the form into products that are in a certain category?
Many thanks…Peter
Peter – You certainly can.
Add a check like:
has_term( 'MyCategorySlug', 'product_cat' )You can provide a category slug or name or ID as the first parameter.
Hi.
i’d like to view the form to a modal pop-up in when i clickto a button with the name “Ask info”
That is possible?
where i have to insert the code if i want to show it under the buy button?
Alessio – Here is code to create a button under the Add to Cart button.
https://gist.github.com/damiencarbery/f7db36de7a875b6b9b4d10ff61597f60#file-add-cf7-popup-to-product-page-php
It uses ‘thickbox’, an old javascript module that is good for popups. I used it because it is part of WordPress core. It is probably not responsive and you might find a much better option.
https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/ is very helpful to find the appropriate action on WooCommerce pages.
Hi,
great pleasure to find this useful post!!
I added a form to my woocommerce and everithing is working perfectly (product description and SKU).
I will be pleased to know if possible to add some other useful info into the form… the product attribute.
For instance, will be useful the form to contain –> product decription / attribute (brand) / SKU: (Jeans / Armani / 4452aa4)
Do You know if possible?
Thank You in advance for Your help
Toto – I could not find a way to add attribute information to a Contact Form 7 form. I then tried Ninja Forms and I was able to add a drop down with a list of the product variations. The customer chooses the variation that they are enquiring about.
See: Product Enquiry form with Ninja Forms
I’m looking for something where I can create a contact form that has a section where customers can select any products from the full list of products. I.E. I want a form that has a list of every product available where a customer can check each product they are inquiring about. I don’t want it separate on each product page, just one list included in one form. Is there a way to do this? This insanity is not for me… it’s for a client! Any help is appreciated 🙂
Stefanie – I think that you will have to use Ninja Forms for this.
Product Enquiry Form with Ninja Forms gives code to add a drop down of product attributes. You could use this idea (i.e. populate an empty HTML element with markup) to show all products and allow users choose some of them. Maybe you could use a ‘select’ checkbox element that allows multiple items to be selected and your code will create multiple ‘option’ elements.
You will also have to write a small bit of code to query all products to create those ‘option’ elements.
I am on holiday at the moment so I cannot try to write some code for you.
Hi! Good day!
i have test the form but the product name not appear. kindly assist. thanks
Siti emailed me screenshots of the form and email setup.
The form had a small typo:
[dynamichidden product-name "CF7_get_post_var key='product-name'"]The “key” should have been ‘title’ instead of ‘product-name.’
For anyone wanting to show the url of the product in a product loop, here’s what I’ve used.
[site-url]?p=[post-id]
because permalink is not available in $post, I used the basic query string 🙂
@RwkY: Use:
[dynamichidden page-url “CF7_URL”]
in the form and
[page-url]
in the mail.
Hi Damien!
Amazing post and one great extension for CF7.
And if we need send pictures hidden of one product?
I mean, I was able to send the title, but I would like can to send the pictures of product.
I have only been able to send via url, but the images are not attached, it is just a link.
Have a nice weekend!!
@Andres: What are you trying to achieve? Why is a link to the image not okay?
Could you use the url inside an ‘img’ tag in the email? This should display the image in your email.
Hi Damien, thank you for your attention.
This is the code that I used on function . php
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );function woo_new_product_tab( $tabs ) {
// Adds the new tab
$tabs['desc_tab'] = array(
'title' => __( 'Pedir Información', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
return $tabs;
}
function woo_new_product_tab_content() {
// The new tab content
echo do_shortcode('[contact-form-7 id="150" title="Producto"]');
}
function cf7_add_image_url(){
$feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
return $feat_image;
}
add_shortcode('CF7_ADD_IMAGE_URL', 'cf7_add_image_url');
Then, CF7 -> Module Tab:
[dynamichidden product-name "CF7_get_post_var key='title'"]
Tu nombre (requerido) [text* your-name]
Tu correo electrónico (requerido) [email* your-email]
Asunto [text your-subject]
Tu mensaje [textarea your-message]
[submit "Enviar"]
[dynamichidden featured-img "CF7_ADD_IMAGE_URL"]
And Email Tab:
De: [your-name]
Asunto: [your-subject]
Producto: [product-name]
Cuerpo del mensaje:
[your-message]
I followed your advice with the img tag, but the result is the following, attached picture.
https://ibb.co/mABfLf
Pd. Do you want to share the link of the store?
Regards!
Sorry for duplicating the post, what I’m trying is that when the email is sent, the images of the product are attached. But I have only managed to get a url of a photo, but it has to be attached. So the one who receives the email can see what files there are, without entering the link.
Thank you so much.
@Andres: I think that you will have to look at CF7 docs for file attachments:
https://contactform7.com/file-uploading-and-attachment/
It mentions including the relative path to a file in the File Attachment section of the Mail tab. It only accepts files that are under the wp-content directory.
This seems promising – I thought that you might be able to add
[featured-img]to that box but when I read the CF7 code it looks like it doesn’t examine shortcodes in that box (see https://plugins.trac.wordpress.org/browser/contact-form-7/tags/5.0.4/includes/mail.php#L150 and how it skips over a line if it begins with a square bracket).
If you wanted to dive into the code further, there is a filter (‘wpcf7_mail_components’ at https://plugins.trac.wordpress.org/browser/contact-form-7/tags/5.0.4/includes/mail.php#L107) where you could set the attachments but I think that it would be very difficult to know what file to attach – you might have to include the url in the body of your email and then parse it out in that filter. It seems very complicated.
So, I don’t have a good solution here but I can think of a use case where this would be needed – imagine if you have a form to request a specific catalog. The reply would attach the requested catalog. I’ll make a note of this situation and see if it can be handled by CF7 or Ninja Forms.
Bro, awesome share! Helped a lot. Thanks! 🙂
Aleksey – You’re very welcome. It’s been a good challenge and a number of comments have challenged me to find solutions to a number of different ways of using the code.
Hello,
Can anybody help me. I need to have enquiry form that is connect with the woocommerce order form product variables. The idea is when somebody want to make a quote before click submit the form ask him to make a choice of the size for the product. If not choose a size to see error in contact form 7 form. Can we do this?
Valentin – I am not 100% clear where the product form will be but I was not able to get product variations into a CF7 form. I had to use Ninja Forms. I wrote about this in May: https://www.damiencarbery.com/2018/05/product-enquiry-form-with-ninja-forms/
Thank you very much Damien. So I need to check with ninjaforms.
YAY! IT WORKS! Thank you so much.
Thanks for commenting. I’m delighted that the post was useful for you.
Hello i have tried your code and it works only in product-single page but i am trying this to get working on shop page where all the products are displayed and when i am using your code i get the shop page title and not the product name.
@fisnik and I exchanged a few emails. If the form is on the shop archive page then it will only capture the shop page title and not a product title because it does not know what product title to capture. It is easiest to only have the form on the single product page.
Hi there Damien, I managed to input my contact form on to a single product and fetch its [product-name], but for some reason, I am unable to automatically add the form to all products. I have tried inserting your code into functions.php but it doesnt seem to be showing up.
Can you please help?
Btw i absolutely just want to thank you for this amazing post, it helped me out alot!
Now i just need to finish the last step.
@Ryan: What code are you putting into functions.php? Have you changed the form id?
Another visitor put the form in a different location – between the photos and the tabs: https://pastebin.com/raw/4Qj6CagV
How do we change the styling of the button? I just need to change the width.
@ray: Use CSS to change the width of the submit button.
You can use:
.wpcf7-form input[type="submit"] { width: 300px; }
Hi….thanks for the above all.
I did everything & works fine.
But, I have put the contact form in a new tab, after Product Description Tab, so once we submit the form it’s coming back to First Tab i.e. Product Description…ideally it should stay there….to let user see the message..”Thank you for your message. It has been sent.”
http://adaptinsights.com/product/global-graphite-sheet-market-by-type-natural-graphite-sheet-synthetic-graphite-sheet-nanocomposite-graphite-sheet-application-laptop-led-lighting-flat-panel-displays-others-region-key-manuf-3/#wpcf7-f180-p251-o1
Waiting for your reply.
Regards,
GetAdwords
@GetAdwords – I submitted two tests of the contact form and in both cases it stayed on the ‘Request Sample’ tab and I saw the ‘Thank you for your message. It has been sent.’ message.
I am using Chrome 73 on Windows 7.
Thanks for the quick reply.
I am using using Version 74.0.3729.108 (Official Build) (64-bit) on windows 8.1, tried again, still it’s coming back to Product Description tab.
Also, just now I have tested on Mobile, the form is not getting submitted i.e. the icon beside the Submit Button keeps rolling. Can u please check that.
https://prnt.sc/niasya
Regards,
Shridsan
@Shridsan – I still cannot reproduce this behaviour. I have tried Chrome 74, Firefox Quantum 66,Opera 60 all on desktop and Safari on iOS 12.2. All of them leave me on the ‘Request Quote’ tab and I can see the ‘Thank you’ message. I cannot debug the issue because I do not experience it.
For the error on mobile, can you see if there are any error messages in the server logs at that time?
For the form on desktop, try putting the form on a standard WordPress page and see if it does anything strange. You can open the browser Console via Inspect Element to see if there are any error messages.
https://drive.google.com/open?id=1Wo5_OdZYX0MtTUAgDuLS58_-DPHUE9sh
Error Message logs –
[30-Apr-2019 16:55:00 UTC] add_to_cart_fragments is deprecated since version 3.0.0! Use woocommerce_add_to_cart_fragments instead.
[30-Apr-2019 16:55:00 UTC] The WC_Cart::get_cart_url function is deprecated since version 2.5. Replace with wc_get_cart_url.
Thanks for the video. That is so strange. I cannot explain what is going on. I do not have any idea how to fix that issue.
Aside: The two items in the error log show that your theme should be updated. accessPress need to fix them because the theme will stop working at some point. The fixes are so simple!
Error Message logs –
[30-Apr-2019 16:55:00 UTC] add_to_cart_fragments is deprecated since version 3.0.0! Use woocommerce_add_to_cart_fragments instead.
[30-Apr-2019 16:55:00 UTC] The WC_Cart::get_cart_url function is deprecated since version 2.5. Replace with wc_get_cart_url.
How to fix this?
Hi Is there a way to get the enquiry form to show quantity and product title. I know how to get the product title but not the quantity. THanks James
@Jim: You could add a number field to the contact form. It wouldn’t copy how many the customer had selected but it could prompt them to independently enter the quantity.
You might be able to write some JavaScript that would watch the WooCommerce quantity field and copy the value into the CF7 number field. It might not be worth all the work, though use of IDs could make it robust.
Hi there!
Is possible get the current cart produts list and send it by e-mail?
I try it but can’t find a solution! Already try enable the shortcode on CF7, but when I try send it, look like can load HTML.
Thanks.
Mar – Thanks for your question.
I have written some code that will list the cart contents in the email.
https://gist.github.com/damiencarbery/fd02b001b1943651573d294dc9374a48#file-cart-contents-shortcode-php
This will list the names of the products in the cart. It doesn’t include the price or quantity but you can write more code to do that. I got some of the code from the WooCommerce templates (woocommerce/templates/cart/mini-cart.php).
I Damien!
I tried and works perfect!!! Really, really, really thanks!
Kind Regards.
i want to show the inquiry form on a particular category products, means show inquiry form on all product detail page that belongs to “category-one”.
Please suggest me how i can do this.
@softton: You can use the has_term() function. It can take an array of category slugs. See: https://gist.github.com/damiencarbery/f7db36de7a875b6b9b4d10ff61597f60#file-cf7-to-product-page-specified-categories-php
Contact form 7 woocommerce product dropdown field and Contact form 7 custom post type dropdown more good plugin
@Ajay: Thanks for the links to your plugin. I watched the demo video and it looks very interesting. Best of luck with it.