How to create an instant online quote calculator with Gravity Forms

WordPress instant online quote calculator

When we used to offer web design services (before we switched to selling plugins), our web design quote calculator was the most visited page on our website. Lots of people 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 ones in our own support center. 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 extensions 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

Product fieldNow it starts to get a bit tricky!

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:

  • Gravity Forms Conditional LogicBlog 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.

20 Comments

  1. The link to your quote builder page doesn't even work...

    • Hi Ru, thanks for your interest in our online quote calculator. We took this offline as we have shifted our focus on building professional, high-quality, and lovingly handcrafted plugins for WordPress and WooCommerce. We hope this article could be useful to you in any case.

  2. Is it possible for an option where the user can choose to email themselves the quote for later, and the email will contain the payment link? And we could possibly set an expiry date on the payment link for say 14 days?

  3. Gravity Forms is really a very simple and functional plugin, but instead of it stepFORM was the most suitable for me, where it turned out to be a bit more functions that I needed.

    • Hi, Jonny. I appreciate your inputs about Gravity Forms, as well as your preference for stepFORM Quiz and Form Builder plugin by Webform Team. I've had a look at the latter and it does appear to have quite a few extra form builder features that would prove useful. Thanks!

  4. Hello, do you have a link to your pricing calculator??

    • Hi, Olly. Thanks for your comment. I'm afraid we took our online pricing/quote calculator offline since we ceased offering web development services and focused on providing premium WordPress plugins. However, I hope the information that we share in this article about it is useful to you. Should you have any other questions, just let us know - or get in touch with us via our Support Center.

  5. Hello, Thanks for that one!
    I would like to know if there is an option to make customer get the quote by email right after he clicks on "Submit my quote"?

    • Gravity Forms has an option to send an email to the customer as well as to the administrator. This is on the 'Notifications' section of your form settings. You can configure the email to contain whatever content you like, including their entries from all the form fields from the quote.

  6. Please, just a question about your instant online quote calculator and Gravity Form.
    I wanted to ask to Gravity support but i have to already be customer so i ask it to you.

    Your instant online quote calculator is almost perfect. I thought it would be so if the total price quoted was permanently displayed at the top right of the form (or any elsewhere) despite scrolling down the form.

    According to you is this possible or planned with Gravity Form?

    • You could ask Gravity Forms if they're likely to add this in future. Somehow I doubt they will do, because their plugin is designed to create any type of form and this feature is very specific to pricing quotes, which is just one of their many use cases. You will probably need to hire a developer to add this as a bespoke feature. If you don't have a developer who can do this for you, then I recommend that you post a job on Codeable where their pre-approved WordPress experts will send you a quote. This is a good way to find someone to add specific features/customizations like this.

  7. Hi,
    I'm probably going to buy this plugin because it's so handy/useful! Although, I just had one question before I purchase it, is there any way to hide the additional charges that show up next to the pricing field options? For example, I want it to look like this:

    Question here
    O Yes
    O No

    Instead of this:

    Question here
    O Yes
    O No +$100.00

    Thanks!

    • Hi Danielle, I don't think there's an option to hide these prices in Gravity Forms but you could hide them by adding some custom CSS.

  8. Hey there,

    Thanks for this great article, gave me some insights. I have a question about monthly pricing:

    I'm working on a online course and I'd like to offer a one time payment or installment payments. After trying and trying I can't figure out when someone chooses for monthly payments the 'total' field doesn't show the monthly price but only the total price from the product.

    It's a bit confusing for the customers. Any ideas how to get this work?

    Thanks in advance!

    • Hmm, I don't think it's possible to show 2 different Total fields in that way. We have done it differently to that. On our own quote calculator form, the monthly cost fields are actually HTML fields in Gravity Forms. Each one uses conditional logic to display a different monthly cost depending on the options selected earlier in the form. So it's a bit of a workaround, but does the job!

      • Thanks for the quick reply! I did try some more setups and have done it this way now:

        Made a € 0 base product, one normal dropdown list and 3 price option fields, one for each product. Each option field contains two options: One-time payment or monthly payments.

        The dropdown list is to choose the package.

        The option fields show by conditional logic based on the dropdown. Each option field contains two options: One-time payment (full amount) or monthly payment (part to monthly fee).

        I have now 6 Total fields, 2 for each product which I show with conditional logic.
        One with the one-time price and the other one with the monthly fee, based on the selection of the customer.

        Seems like a solid method to me for now :)

  9. I decided to use Gravity Forms to set up a quote form for a client and I hadn't used it before. This tutorial really helped me me out with the process. Thanks for sharing!

    • At first, for some reason, Gravity Forms seemed a bit confusing to me, although then I figured it out. But now I do not use it, I decided to try the uCalc plug-in for calculators. It was given to me immediately with ease, now I use it on my sites.

Comments on this post are closed