Add an enquiry form on the product page

, ,

People visit your store, some converts, some not, some understand everything, some not.
They may not be interested in your product or they may just need to know something but they left because there are not enough information.

What if they have questions? By default they can’t ask you anything directly from the product page. The only option is to contact you directly via email, via phone call or any other way you specified in your site and contact page.

There’s a way to let them ask you questions directly from the product page via email, by adding an enquiry form in the tabs below the product summary, where the description and additional information are.

How to do this?

As always, there are various way to do it, and today you will learn two of them.

The easy way

The easiest way is by using a plugin. You can use Product Enquiry Form to add a form on all product pages. It will appear exactly in the tabs after the product’s summary.
The email sent through that form will be received in your inbox using the email specified for the admin in the WordPress general settings.

It also supports reCAPTCHA by using their API to avoid spam emails.

The hard way

If you don’t want to buy the plugin above and have some coding skills, you can code the form by yourself. First you have to install and create a form with a 3rd-party plugin like Contact Form 7 or Ninja Forms.

Create a form with the plugin and copy its shortcode. You will need it later.

Now open your functions.php file located in wp-content/themes/your-theme-name/ and add this code at the end of the file:


add_filter( 'woocommerce_product_tabs', 'woo_edit_tabs' );
function woo_edit_tabs( $tabs ) {
// Adds the new tab
$tabs['enquiry_form'] = array(
'title' => __( 'Ask a question', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_enquiry_form'
);
return $tabs;
}
function woo_enquiry_form() {
echo '<h2>' . __( 'Do you have a question?', 'woocommerce' ) . '</h2>';
echo '<p>' . __( 'Drop us a line by compiling the form below. We will be more than happy to reply to any of your questions!', 'woocommerce' ) . '</p>';
echo do_shortcode( '[your_form_shortcode_here]' );
}

view raw

functions.php

hosted with ❤ by GitHub

Note: Replace [your_form_shortcode_here] with the shortcode you copied before!

You will now have an enquiry form on your product page.

If you don’t want to add code at all, you can also create the custom tab by using the plugin WooCommerce Tab Manager.

37 replies
  1. Amit Ramani
    Amit Ramani says:

    I love reading your posts. You post in an easy way and always offer 2 ways. I will try to add the above product enquiry form functionality in my site via code. I have contact form 7 so I will utilize that. I will let you know how it goes. One question: instead of adding this code to functions.php, can I add it to my-customizations.php? That was suggested by woothemes.

    Reply
  2. Roc
    Roc says:

    Hello there,

    I am using a child theme, therefore I assume I should add your code to this one ?

    X – Child Theme: Renew: Funzioni del tema (functions.php)

    Am I right ?

    Thanks,

    Roc

    Reply
  3. Fabio
    Fabio says:

    Ciao Nicola, ho visto sul tuo sito che sei un esperto di WordPress e soprattutto Woocomerce
    Volevo chiederti se hai una soluzione al mio problema.
    sto preparando un portale turistico con wordpress.
    Ogni tour ha un suon Vendor (dc Marketplace plugin) e i tour possono essere prenotati (woocomerce booking). il problema e che quando si richiede la disponibilità di una data l’email “nuova prenotazione” arriva all admin_email e non all’email del vendor. In piu vorrei che il vendor potesse confermare tutto cliccando su un link contenuto nell email senza andare nel back end.

    Reply
  4. Lubo
    Lubo says:

    HI,

    I would like to ask if it is possible the text to be translated with wpml string translation or anything else :

    the text:

    __( ‘Ask a question’, ‘woocommerce’ ),

    Do you have a question?

    ‘;

    echo ‘

    Drop us a line by compiling the form below. We will be more than happy to reply to any of your questions!

    ‘;

    thank you very much

    Reply
    • Nicola Mustone
      Nicola Mustone says:

      Hi Lubo,
      Technically the text is already available through WPML, probably you will find it in the menu String Translations.

      Maybe you have to change the textdomain from woocommerce to the one used by your theme.

      I’m not 100% sure though, the WPML support team might know more about this.

      Reply
      • Lubo
        Lubo says:

        Hi Nicola,

        Thanks for your quick response I just do not see the strings when searching all domains will ask the wpml support to see what they have to say 🙂

        like your snippets and tips

        Reply
        • Nicola Mustone
          Nicola Mustone says:

          Not sure honestly, maybe you need to rescan the theme? If you go to WPML > String Translation, scroll down, there’s a link named Translate texts in admin screens ».

          Maybe it will be available there!

  5. Lubo
    Lubo says:

    Hi Nicola,

    The answer from the support is:

    Thank you for contacting our support forum.

    The reason why this is occurring is because the texts are not being wrapped in the appropriate gettext calls.

    To fix this just follow the instructions in the link below.
    https://wpml.org/faq/language-setup/

    so I am not sure that i can do it properly but will try 🙂
    if you can update the snippet will more than helpful, in that way the strings probably will be available for translation via wpml string translation

    thanks Nicola

    Reply
  6. Flarianne
    Flarianne says:

    Hello Nicolas !

    Thank you for this great post !
    I have a little question, when I will receive an enquiry, do I will know from which product the user has send the enquiry ? Do I will receive the URL for example ?

    Thank you soo much for your help !

    Have a great time !

    Marianne

    Reply
    • Nicola Mustone
      Nicola Mustone says:

      Hi Marianne,
      That depends on what plugin/form you use. The code in my article simple prints the form from a shortcode, built with a 3rd-party plugin.

      If the plugin includes the URL of the page where the form is, then yes.

      Reply
  7. Selva
    Selva says:

    Hi,

    Can you please let me know how to add this inquiry form to only specific product categories ?

    Thanks.

    Reply
  8. Susanne
    Susanne says:

    Hi Nicola,
    thank you for your code!
    I tried it with Storefront (2.2.5), Woocommerce (3.2.1), Contact Form 7 (4.9) but unfortunately it didn’t work out. Used it in my functions.php of Storefront Child Theme. Changed just the shortcode as guided:
    “echo do_shortcode( ‘[contact-form-7 id=”176″ title=”Produkt Anfrage”]’ ); ”
    Have got any idea for me maybe?
    Susanne

    Reply
  9. Samrah Atif
    Samrah Atif says:

    hii
    i tried using same method, but it didnt work for me. i put same code as mentioned in the end of functions.php, but it brought the code on my home page, instead linking the form on each products page. please help..how to copy paste it?

    Reply
  10. Lyse
    Lyse says:

    Hi Nicola,
    I was able to use this code snippet successfully on my my clients’ website using Gravity Forms.
    Thank you for providing such useful information. I so enjoyed reading your information.
    Lyse

    Reply

Trackbacks & Pingbacks

  1. […] Must Read Article: Add an enquiry form on the product page […]

  2. […] While we are talking about product tabs, did you know you could manage these with this neat little tab manager extension? Or better yet, you can add a product contact form with this extension. More of a DIY kinda person? Check out this blog post by Nicola about manually adding an enquiry form on the product page. […]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply