Single selection

You simply need to fill the same value in the "Radio group" option of the components of the target step to allow the user to select only one component at same time. 

Automatic next step

To call the next step when an item is selected in a step, you need to :

  • Disable the "Call next step on click" on your items
  • Give the same "Group" name to all items in the step
  • Enable the option "Selection required" on the step panel.

Use Google Maps API

To be able to use the Map component and use the distance calculations option in price calculations, you need to fill your Google Maps API key in the "General" settings tab of the form.

From the Google API console, you need to allow your website domain to use this API key, and enable these services :

  • Distance Matrix API
  • Maps JavaScript API
  • Places API
  • Geocoding API

Please also note that the "Distance Matrix API" requires to fill your billing details in the Google API console to be called from your website.

Hide progress bar

Open the "Settings" panel of your form then click the "Design" settings tab to access to the "Progress bar" option.

It allows you to hide the progress bar or use it to show the current step instead of the total price.

Limit number of selection in a step

Here is a way to limit the number of items selectable in a step :

  • Enable the step option "Hide next step button"
  • Create a button item and enable its options "Call next step on click"
  • Use its "Show depending on conditions" option to show it only when the quantity of the current step is inferior to X (the wanted maximum number)

It will force the user to select less than X items to continue .

You can also create a "Custom content" component that contains a custom error message and use its "Show depending on conditions" option to show it only when the step quantity is superior to X.

Questions categories

In which category does your question fall ?

My purchase code

To get your purchase code :

  • go to
  • click the "Download" button in the "WP Cost Estimation & Payment Forms Builder" row 
  • click the "License certificate & purchase code (text)" link in the displayed menu
  • open the downloaded text file
  • the purchase code is displayed just under the "Item Purchase Code:" line

Distance calculation issue

If your distance calculation isn't correctly executed, it means there is probably a problem relative to the used API key.

Simply open the console tool of your browser (F12 on Windows) on the form page and execute the problematic calculation. 

You will see the error message returned by Google Maps in the console, with a link to their documentation to understand how to fix the problem.

Form styles are broken

If the styles of your forms aren't correctly loaded when you paste the form shortcode in a page, simply open the "Settings" panel of your form and enable its "AJAX navigation support" option, in the "General" settings tab of the form.

It should fix the problem by forcing the form styles and scripts to be loaded in the pages.

Emails are not sent

If the order emails are not correctly sent by the server, you need to configure an existing SMTP email account from the "Global settings" panel of the plugin. The global settings panel can be displayed by clicking the gear icon in the main toolbar of the plugin.

Enable the "Use SMTP to send emails" option and fill your SMTP account host, username, password and port.

The emails will be sent directly from the configured email account, and not from the server itself anymore.

Disable days in a datepicker

To disable some days of the week in a datepicker, you first need to assign it a calendar by using its "Calendar" option, from the component edition panel.

Then open the calendars management tool and edit the calendar you assigned to the datepicker. Click the "Available days of the week" buton in the top menu and disable the wanted days.

These days will be disabled in all the datepickers assigned to this calendar.

Round the result of a calculation

To round the result of a calculation, you simply need to use the Math.round() JS function :

[price] = Math.round(100/3)

The result will be 33.

To round the result to the nearest superior integer, you need to use the Math.ceil() function :

[price] = Math.ceil(100/3)

The result will be 34.

To round the result to the nearest inferior integer, you need to use the Math.floor() function :

[price] = Math.floor(100/3)

The result will be 33.



Your request was correctly sent, thank you !