GET YOUR FIRST 14-DAYS OF PRO FREE

Request a quote with the Staggs product configurator

In this post:

The Staggs product configurator is based on WooCommerce, but that doesn’t mean you have to add your configured product to the cart.

You can also link a form so that you can receive quote requests for products.

Setting up the request a quote functionality can be achieved in a few simple steps: create a form, embed it on a page and hook up the configurator. Let’s get into it.

Supported forms

Before we start, it might be useful to know that we support the following forms at the moment:

  1. Gravity Forms
  2. Fluent Forms
  3. Ninja Forms
  4. WP Forms
  5. Contact Form 7

Are you using a different form plugin? Please let us know!

Creating the form

We start by creating the form. Make sure it has a text field for each configuration option you offer. These values will be dynamically populated using GET parameters.

GET parameters are sanitized versions of your product attribute names. So My Awesome Attribute 3 will become: “my-awesome-attribute-3”. That is the value you should enter for your field labels.

We have 2 default attribute field labels you can add to your fields:

  • product_name: Outputs the product title;
  • product_price: Outputs the calculated configuration price.

Note: add the readonly attribute manually. You don’t want the user to change the configuration values when requesting a quote. You can also use hidden fields.

Fluent Forms

In the example above you will see an example Fluent Form field configuration with text input fields for each configuration attribute. Make sure you add the placeholder {get.[parameter_name]} to pre-fill the field.

See documentation for more details.

Gravity Forms

We have implemented support for GET parameters for the other forms, so you should be good to go!

Embedding the form on a page

Next, we have to create our request a quote page.

And add the form to the page.

Simply create a new page in WordPress and include your form on the page.

Hooking up the configurator

Finally we have to link the form to the product configurator.

Version 1.x

Go to your current configurator theme and go to the “Settings” tab. Next, locate the “Totals” heading.

There you will find a setting called “Configurator button type“. Select “Request Quote“.

Version 2.x

Go to your current configurator template and go to the “Configurator button” tab.

There you will find a setting called “Configurator button type“. Select “Request Quote“.

 

You will now see an additional setting: “form page“. This is the page your form is located on. Select the page where the form is located on.

Finally, save the settings.

Note: At this moment we only support forms directly embedded on pages. Embedding the form in a popup might work, though the popup has to be located on the selected page.

Result

Now you should be redirected to the selected page when clicking the button request quote.

Also, if you have configured everything correctly, you should see that the fields have been pre-filled with the configuration values.

Generate and include PDF (pro)

If you are on the pro version, you can also generate and include a PDF for the configuration

Simply head over to Staggs -> Themes -> and edit your theme

Go to tab “Settings” and scroll down to the Totals section. Make sure your Configurator Button Type is set to “Request quote”

Now you should see a checkbox “Generate product PDF link”.

Check the box and save your settings.

Finally, head over to your form, add a new field and set the parameter to “product_pdf”

And that’s it!

Now you can automatically generate and collect PDFs on form submissions.

Attribute Types

Chevron icon
Toggle widget nav content

Hooks and Filters

Chevron icon
Toggle widget nav content