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 (optional) 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: Gravity Forms Fluent Forms Ninja Forms WP Forms Contact Form 7 Are you using a different form plugin? Please let us know! Supported methods Since version 2.12 we support two methods: Pass options via URL to the form on new page Fill options to an inline form You can configure this setting in Staggs > Templates > Configurator button: Request quote form display 1. Creating a form on a new page 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
Make sure you have checked the box ‘Allow field to be populated dynamically’ and entered the field label as the parameter name. Check the Gravity Forms documentation for a detailed explanation Other forms
We have implemented support for GET parameters for the other forms, so you should be good to go! 2. Creating a form inline When you want to use the form inline on the configuration page, you can’t use the GET parameters because they won’t be filled Instead, you should add the names of the options as class names or input names (if you can adjust name property in your form plugin) That allows us to dynamically locate the correct form fields and fill the options data. To fill configuration name, price or links you can use the following reserved class names: Configuration title: staggs_product_name Configuration price: staggs_product_price Configuration URL: staggs_product_url Configuration image: staggs_product_image Configuration PDF: staggs_product_pdf Embedding the form on a page
Next, we have to create our request a quote page. This is not applicable for inline forms. 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.