If you have products that typically prompt pre-sales questions from potential customers, you’ll want an easy-to-manage, quick way to add a pre-sales form to your product pages.
There are a couple of easy ways to add a pre-sales submission to your product pages without code or adjusting product templates. Both methods will use a product tab to display your pre-sales inquiry form.
Method 1: Product Enquiry
WooCommerce has a plugin available to do just this: Product Enquiry Form. This plugin adds an enquiry tab to every product page in your shop. This can be an easy and no-hassle way to add a WooCommerce pre-sales form if required for all products.
However, you may be able to create a similar form with materials you already have: the WooCommerce Tab Manager and Gravity Forms.
Method 2: Tab Manager + Gravity Forms
The reason I like method 2 is because I have better control over both the form for my pre-sales inquiries as well as when this form is displayed. I can customize my form by building it in Gravity Forms, then use the Tab Manager to display it for all or some products. You can even see this in action when you view most of our extensions on this site!
Let’s start with the Gravity Forms part to build our pre-sales inquiry form.
Building your Pre-Sales Form
Create a new “Pre-sales” form in Gravity Forms (you can name it whatever you want, e.g., “Inquiry”, “Pre-sales”, or whatever works best for your products). We’ll want to make this form as standardized as possible so that we can use it for all products to save ourselves a lot of time.
Note that we won’t be able to use conditional logic with this form, as Tab Manager cannot properly render forms that use this (we are working on it though!).
So let’s start with our simple WooCommerce pre-sales form. One field that I would recommend adding first is a single-line text field. We’re going to use this to identify which product the customer is viewing so that the admin will know this when the form is submitted. This will help us by allowing us to use the same form on any product page with minimal effort.
Create your single-line text field and label it, then look at the “Advanced Tab”. There are 2 things we need to pay attention to: first, set “Visibility” to “Admin Only” so that customers will not see this field on the frontend; second, set the default value to “Embed Post/Page Title”, which will automatically fill this field with the Product Title:
Create a “Product Title” field
Great! Now we can use the same form for all products (as we’ll know which product it’s for), and the rest is up to you. I usually add fields for Name, Message (Paragraph Text), and email at minimum to our forms. However, you may want to add fields for phone number or date if you’ll be calling customers to respond. Using the Gravity Forms date and time fields are helpful for this, as you can allow customers to select when they’d like to be called.
Don’t forget to update your Form Notifications settings before you’re ready to go live with this. Remember, no conditional logic (yet). Now we can move on to embedding these forms!
Creating a Global Pre-Sales Tab
I’d recommend creating a global tab for your WooCommerce pre-sales form. This way, you can easily deploy this tab across all products, or selectively add it to products of your choosing.
Go to WooCommerce > Tab Manager and navigate to the “Add Global Tab” menu. You can add a title for your tab, some text or a message, and embed your form. The easiest way to embed the form is via shortcode – simply click “Add Form” and you’ll be able to select which form should be added.
Create New Global Tab
That’s it! Save your tab, and now you can use it on any product, or add it to your default tab layout.
Add the WooCommerce Pre-Sales Tab to the Right Products
Now you can add this global tab to any product with just a couple of clicks. Let’s first start by adding this tab to all products.
To automatically display the new pre-sales tab (with our embedded form) for all products, we’ll want to add the tab to our default layout. Go to WooCommerce > Tab Manager and select the “Default Tab Layout” menu. Here you can re-order or re-name tabs, and add global tabs to the default layout (which is used for any product unless overridden).
Go to the bottom and click “Add”. Select your new global pre-sales tab to add to the default layout:
Add Global Tab to Defaults
This will add your tab to the default layout, and display this form on all product pages. If you override the default layout for a product, you can choose to remove this tab if desired.
Now what if you only want to add your pre-sales tab / form to some products? You can use it as part of the default layout and selectively delete it when not needed, or you can only add it to products of your choosing.
If you want to only add the tab to some products, don’t add it to your default layout. You can instead add it on a per-product basis.
Go to the product for which you’d like to add your shiny new pre-sales tab. Under Product Data, go to the “Tabs” menu. You can enable “Override default tab layout” to customize the tabs for this product.
You can then add your global pre-sales tab to this product and save it:
Add Global Tab to Product
This adds a new tab only to this product! If you only want to add the pre-sales form to some products but not all, this may be the easier method to use for your store.
Here’s what it looks like on our own site:
