Our web design quote calculator is the most visited page on our website, according to Google Analytics. Lots of people have asked us how to create an instant online quote calculator for their own WordPress website. It's time for me to share the secret of how we did it, so that you can too!
The good news is that we used a widely available WordPress plugin for our instant quote calculator. With over a million users, Gravity Forms is the world's most successful WordPress forms plugin. Most people use Gravity Forms for straightforward enquiry forms like the one on our own contact page. However, you can also use it to create instant online quote calculators.
This is how we did it.
Getting Gravity Forms
First, you'll need to buy Gravity Forms. Install and activate it on your WordPress website.
To create an instant quote calculator like ours, their Personal License will be fine. If you want to sign people up to MailChimp when they submit the form, you'll need the Business License. Or if you want to take payment from people who submit the form (e.g. a PayPal deposit), you'll need their Developer License. Check out the Gravity Forms add-ons to decide which license you need.
How to create an instant quote calculator with Gravity Forms
Gravity Forms provide excellent documentation on how to get started with creating online forms in WordPress.
I'll talk you through the specifics of using Gravity Forms to create an instant online quote calculator for your website. We'll base this on our own quote calculator. If you want something different then you can follow these steps in conjunction with the official documentation.
I've added a screenshot of our own price calculator so you can see how it looks in the WordPress admin. You can also download it directly here.
1. Add the quote calculator title and description
First, create a new form in the 'Forms' section of the WordPress admin. Add the form title and description. When you add the form to the page, you can choose to show or hide these. On our quote calculator, we show them at the top of the page.
2. Add headings
You can make your price calculator more user-friendly by adding sub-headings to divide up the form.
To do this, drag an HTML element from the right to the left - one for each heading. Add your heading content and format it as needed. This uses HTML which is a bit confusing for some people, so leave your headings as plain text if needed.
HTML elements are a good opportunity to add static information to your form which won't be part of the price calculations. So use it for headings, explanatory information, etc.
3. Add products
Open up the Pricing Section Fields section on the right of the form editor screen. Drag a 'Product' from the right to your form on the left.
Choose 'Hidden' field as the product will just be used as a base price for your calculations.
In our calculator, we set the product price to £0 because we offer a free web design option and only charge for extras. You may want to add a base price here which will be added to all prices, even if your customers don't select any other options.
Most online quote calculators will just need 1 product, which is used for the base price.
We added 2 products because we use 1 product for the base price, and another to calculate the price for extra pages. To give you some background, our standard web design cost includes 4 pages and we charge a price-per-page for additional pages. To do this, we added a second 'Product' field in Gravity Forms to set the price per page. When we added the other options to the calculator (see step 4), we selected the Base Price product for most of the fields and the Price Per Page product for the extra pages field.
4. Add extra options
Next, drag some 'Option' fields from the Pricing Section Fields section on the right to your form on the left. Add one Option for each of the options you want to include in your instant quote calculator.
We added Option fields for:
- Blog or latest news - this actually doesn't affect the cost so we set the price to £0
- Online shop
- Search engine optimisation (SEO)
- Mailing list signup form
- SSL certificate
- Free website setup service - this is a bit more complicated because we have different prices depending on whether or not people want an online shop. To achieve this, we added 2 Options for 'Free website setup service', and used Conditional Logic to display the correct one depending on whether they have ticked the 'Online shop' Option. To use conditional logic, click the 'Advanced' tab when you edit the Option. You can show or hide the Option depending on which other Options have been selected. Have a play - it's really clever once you figure it out!
We also added extra pages as a Quantity field associated with a different Product (see step 3, above). This let us add an extra price depending on the number of extra pages people wanted for their website.
4. Display the total price quoted
Next, drag a 'Total' field from the Pricing Section Fields section into your form. This will automatically calculate all the other fields to create the total.
5. Bonus tip - monthly costs
Our requirements for the instant quote calculator are a bit complex as our quotes consist of one-off setup fees PLUS ongoing monthly pricing.
We used the 'Total' field (see step 4) for the one-off quote, which was fairly straightforward. We added a static HTML element to display the monthly pricing.
The monthly pricing changes depending on which options are selected in the form. To achieve this, we used conditional logic to display different HTML elements depending on the options selected. This is a bit of a workaround, but suited our purposes and is the only way to do it in Gravity Forms.
6. Add a 'Submit my quote' section
Once someone has calculated an instant quote on your website, you presumably want them to submit the quote to you and place an order!
You can do this by adding more fields to the end of the form - either on the same page or a different one. (To divide your form into multiple pages, drag a 'Pages' element from the `Standard Fields' section on the right.)
Add fields for name, email address, phone number etc. A Submit button will automatically be added to the bottom, which you can reword in the form settings tab.
7. Configure the form settings
Now go back to the top of the page and go through all the settings and notifications. Make sure the quotes will be sent to the correct address, the 'Success' message is relevant and professional, etc.
8. Add the form to a page
Finally, go to edit any page or create a new one via Pages > Add New. You'll see an 'Add Form' button above the toolbar. Click this and insert your form into the page.
Save the page and start testing your form!
9. Test, test, test!
Online price calculators are complicated, with lots of possible options. Spend a long time testing every combination and make sure your sums are all correct. Make any tweaks to get it just right.
Styling the form
We did some custom styling to ensure the website quote calculator matches our overall branding and colour scheme.
Gravity Forms looks pretty good on most websites straight out of the box, so you may not need to restyle it. You can restyle your website quote calculator using CSS. If you don't know how to do it, I recommend posting a job on Codeable. Their panel of pre-approved WordPress experts will bid for the work so you can easily find a good developer for the right price.
Help, I'm stuck!
In this tutorial, I've explained how we created our own instant online quote calculator so that people can get web design prices online. Your needs will inevitably be different and the logic to get your pricing right can be quite complicated.
If you get stuck, your first port of call should be the Gravity Forms documentation. This contains a wealth of knowledge. You can also contact Gravity Forms support for help in getting your online price calculator just right.
Do you have an online quote calculator for your website?
Have you set up an instant quote calculator on your own website? Did you use Gravity Forms or is there another tool you'd recommend? Please let me know in the comments below.