Form creationHere are some common questions relative to the creation of a form
- How to make a single item selectable in a step ?
- Limit the number of selected items in a step
- Howto disable some days of the week in a datepicker ?
- How to round the result of a calculation ?
- How to enable automatic next step on selection ?
- How to enable the Map component and distance calculations ?
- How to remove the main progress bar ?
- Return to the previous step
- Restart the F.A.Q
- I don't see my question in the list
Single selectionYou 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
- 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
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.
My purchase code
To get your purchase code :
- go to https://codecanyon.net/downloads
- 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.