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’.
Alex says
October 27, 2017 at 4:37 pmHi, 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
damien says
October 27, 2017 at 9:25 pmCan you post your code somewhere e.g. https://pastebin.com/
The code can be in functions.php or its own file as a plugin.
damien says
November 1, 2017 at 9:16 amResolved: 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"]');
}
morissa says
March 30, 2019 at 8:41 pmThank you damien ! I’m using your solution and very satisfied.
Regards!
damien says
March 30, 2019 at 8:57 pmBrilliant, thanks for letting me know.
Nick says
November 13, 2017 at 2:42 pmI 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
Nio says
November 20, 2017 at 12:59 amhow to add woo product’s SKU instead of product title ?
damien says
November 20, 2017 at 8:50 pmNio – 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
sergigonza says
December 27, 2017 at 9:18 pmHello, 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?
damien says
December 27, 2017 at 11:15 pmTo 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.
Francesco says
February 22, 2018 at 3:09 pmIs 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…?
damien says
February 22, 2018 at 4:03 pmFrancesco – 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.
Simon says
April 19, 2018 at 12:18 pmHmm, how would we use this with a variable product to get the variable SKU?
damien says
April 20, 2018 at 10:38 amSimon – 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
damien says
May 14, 2018 at 9:20 amSimon – I implemented an enquiry form for variable products using Ninja Forms: https://www.damiencarbery.com/2018/05/product-enquiry-form-with-ninja-forms/
Peter James says
June 18, 2018 at 2:51 pmHi 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
damien says
June 18, 2018 at 4:38 pmPeter – 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.
Alessio says
June 21, 2018 at 4:00 pmHi.
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?
Alessio says
June 21, 2018 at 5:08 pmwhere i have to insert the code if i want to show it under the buy button?
damien says
June 22, 2018 at 12:11 pmAlessio – 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.
Toto says
July 7, 2018 at 5:57 pmHi,
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
damien says
July 7, 2018 at 8:19 pmToto – 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
Stefanie says
July 11, 2018 at 5:32 pmI’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 🙂
damien says
July 11, 2018 at 11:02 pmStefanie – 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.
Siti Muti'ah says
September 12, 2018 at 7:36 amHi! Good day!
i have test the form but the product name not appear. kindly assist. thanks
damien says
September 17, 2018 at 9:39 amSiti 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.’
RwkY says
October 3, 2018 at 11:05 amFor 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 🙂
damien says
October 3, 2018 at 11:26 am@RwkY: Use:
[dynamichidden page-url “CF7_URL”]
in the form and
[page-url]
in the mail.
Andrés says
October 20, 2018 at 9:35 amHi 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!!
damien says
October 20, 2018 at 4:37 pm@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.
Andr'es says
October 20, 2018 at 5:24 pmHi 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!
Andres says
October 20, 2018 at 5:33 pmSorry 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.
damien says
October 20, 2018 at 9:23 pm@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.
Aleksey says
November 26, 2018 at 6:20 pmBro, awesome share! Helped a lot. Thanks! 🙂
damien says
November 26, 2018 at 9:19 pmAleksey – 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.
Valentin says
December 19, 2018 at 6:41 amHello,
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?
damien says
December 19, 2018 at 1:53 pmValentin – 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/
Valentin says
December 19, 2018 at 7:21 pmThank you very much Damien. So I need to check with ninjaforms.
AnnoyingKitten says
January 2, 2019 at 10:57 amYAY! IT WORKS! Thank you so much.
damien says
January 2, 2019 at 12:19 pmThanks for commenting. I’m delighted that the post was useful for you.
fisnik says
January 29, 2019 at 2:40 pmHello 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.
damien says
January 30, 2019 at 4:45 pm@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.
Ryan Lim says
April 9, 2019 at 10:18 pmHi 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.
damien says
April 9, 2019 at 11:46 pm@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
ray cruz says
April 11, 2019 at 12:18 amHow do we change the styling of the button? I just need to change the width.
damien says
April 11, 2019 at 10:18 am@ray: Use CSS to change the width of the submit button.
You can use:
.wpcf7-form input[type="submit"] { width: 300px; }
Getadwords says
April 29, 2019 at 2:10 pmHi….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
damien says
April 29, 2019 at 2:48 pm@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.
Getadwords says
April 29, 2019 at 3:13 pmThanks 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
damien says
April 30, 2019 at 10:58 am@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.
Getadwords says
April 30, 2019 at 5:53 pmhttps://drive.google.com/open?id=1Wo5_OdZYX0MtTUAgDuLS58_-DPHUE9sh
Getadwords says
April 30, 2019 at 5:58 pmError 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.
damien says
April 30, 2019 at 8:32 pmThanks 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!
Getadwords says
May 1, 2019 at 8:07 amError 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?