Instructions for Editing the Gravity Form Tool

We’ve prepared a video to help you edit the Gravity Forms tool to make it your own.

Instructions for Editing The Website Cost Estimator™ – Automated Version

The Website Cost Estimator™ was made using the Gravity Forms plugin. If you haven’t used Gravity Forms before, you can purchase a single license for $39 and follow the instructions for getting started on Gravity Forms website.

Importing The Website Cost Estimator™:

We are providing a file for The Website Cost Estimator™ for you to download to your computer and then upload to your Gravity Forms Plugin.

Import the .xml you downloaded to your website following the instructions provided on this article on the Gravity Froms Website.

Once you’ve imported The Website Cost Estimator™ into your own website, you will be able to add it to any page on your WordPress website by putting its shortcode on the page where you’d like it to display.

We recommend that before you use The Website Cost Estimator™ with a client, you go through it a number of times using a variety of different client scenarios common to your business. Ask yourself the following questions:

  • How well does the form work in general?
  • Are the various services including a good fit for your business?
  • Are the prices of the individual items in line with the fees you charge?
  • Does it arrive at a price for the website that seems to be in the ballpark for the website you build?

Making Changes to The Website Cost Estimator™

If you are familiar with Gravity forms and know how to use conditional logic you’ll be able to edit the form to reflect the services and pricing that will work for your website builds. You’ll be able to change the pricing, the order of questions, the styling and even add new questions. If you haven’t used conditional logic with Gravity Forms before, please read the following tutorials.

About Conditional Logic

Enabling Conditional Logic

Make a Back-Up Copy

Before you start changing anything on the form please read through these instructions and be sure to duplicate the form to use as a backup copy of the form that you can go bacck to in case you make errors that you can’t figure out how to undo.

Conditional Logic in The Website Cost Estimator™:

As we mentioned above this form is set up with conditional logic which allows us to hide or display questions based on the answers to previous questions.

Each of the questions must be answered before the next question appears. This keeps the prospective client from becoming overwhelmed. We’ve created the flow so that the answers to some of the questions allow you to either skip questions or drill down further.

For example, one question asks what features the client will need on their website. If the client checks that they will need to sell items on their website, a section of questions will come up asking for more information about their e-commerce needs.

If the client does not check that they will need to sell items on their site, then this section will remain hidden.

As you take your prospect through answering each of the questions, you’ll see that the form provides a subtotal after each item, showing how their answer to that question effects the cost of the website.

Editing the Form

Editing the form can be tricky because of the conditional logic.

Editing the Form’s Conditional Logic: When you add or edit anything about one of the existing questions, including the copy, the price or even the punctuation, you’ll need to change the conditional logic in the following question or the section if that follows the question, otherwise the logic will be broken in the following question or section.

Adjusting the Prices: If you think the individual items for the services are in your ballpark, but the total ends up too high or too low, first adjust the items with the large fees, such as the first item, where the redesign is listed at $850 and the new website is listed at $1,000.

Another place where it is easy to make a big change in the bottom line without having to make a lot of small changes is the question about the type of collaborator they’ll be on the project.

You can do quite a bit of bottom line price tweaking just changing one or both of these items.

Adding Questions: If you want to add a question between two others you’ll have to edit the conditional logic of the new question and the question after the new question in order for the one-at-a-time conditional logic to have the questions display correctly.

The Total Button: The total button has been added to the last section and that section with the button in it is not conditional on anything. That way the button with the subtotal will show up all the way down the page, giving you the new total after each item.

Styling the Form

You can style your own form using CSS if you’re familiar with how to do it.

Trying to make your total stand out more?

Feel free to use the CSS we used to make our total button stand out a bit more. Copy this bit of CSS into your custom CSS file on your website:

.gform_wrapper .top_label span.ginput_total {
margin: 10px 0px;
background: #5bced4;
padding: 14px 30px;
color: white;
font-weight: 700;

We Can Help

If you have trouble editing the form or just want us to do it for you, our hourly rate is $100 and it should not take too long for a couple of tweaks. Reworking the whole thing obviously will obviously take more time.

Contact New Tricks

Contact Us

Questions? send us an email and we'll get back to you, asap.