Open in app

Sign up

Sign in

Write

Sign up

Sign in

Level Up Coding

Coding tutorials and news. The developer homepage gitconnected.com && skilled.dev && levelup.dev

Follow publication

Creating a Custom Pricing Calculator with ChatGPT (JavaScript, HTML, & CSS)

--

Custom Pricing Calculator Built with ChatGPT

Creating a custom pricing calculator can be a fantastic way to provide your website’s users with immediate, personalized estimates, and it’s also a fantastic lead-generation tool. For my company’s custom pricing calculator for outsourcing, I built it for my WordPress (Elementor) website using a lot of ChatGPT help. ChatGPT is a great way to build a custom pricing calculator, but I want to show you the steps of how to go about it.

Here, I’ll be showing you how I developed a unique pricing calculator using ChatGPT, JavaScript, HTML, and CSS to provide a quote for outsourcing services. I even provide the code here so that if your company’s pricing calculator uses a similar business case, you can use it too.

Here’s what the calculator looks like on our website:

Our Pricing Calculator

I’ll go over the steps of how to build your own custom pricing calculator for your website by showing you how I built mine. Follow along!

Step 1: Decide on Your Pricing Variables

To create the custom pricing calculator, I needed to take into consideration the variables that we need our prospects to tell us so we can quote them an outsourcing team price.

Our Pricing Variables (User Inputs)

  • The number of outsourcing talents to hire.
  • The type of each talent.
  • The skill level of each talent.
  • Whether the talent is part-time or full-time.

These factors collectively determine the final pricing estimate, with different job positions, skill levels, and hours influencing the overall cost.

Step 2: Tell ChatGPT to Make It For You

It’s a bit trick to correctly ask ChatGPT to take all of this information and create each piece needed to build the custom pricing calculator for you, but here’s what I did.

I asked ChatGPT to create a pricing calculation system that reflects the choices the user makes in the form based on the type of talents, prices, and other inputs. Here is what I asked it:

ChatGPT Prompt

I want to create a form to place in a website that does the following:
- Allows a user to add virtual assistants to a team to create a quote for cost.
- Gives user the option to add a new virtual assistant where it then asks...
-- What main skill does the virtual assistant need to have (select all that apply from 'Talent Type #1', 'Talent Type #2', 'Talent Type #3')
-- What level of expertise (Entry, Mid, Senior)
-- Hours of support needed (Part-time or Full-time)
- Then it gives the option for the user to input another virtual assistant need where it asks those same 3questions.
- Then it calculates the total cost as follows:
-- For each Virtual assistant... It's skill type value/hour * level of expertise * hours of support needed
-- Skills table
--- Talent Type #1 = $11
--- Talent Type #2 = $13
--- Talent Type #3 = $14
-- Skill Level
--- Beginner * 1
--- Intermediate * 1.1
--- Advanced * 1*25

I then want the price per hour per talent to be shown below the form once the user clicks a "Get Quote" button.
I also want an email MailTo button to be created that shows the user all of the talents prices and information in addtion to the full team quotation price.
I also want a button that sends data to a form (Forminator) on another page that has fields for each of the outputs from this calculator.
Go ChatGPT go!

In the next pieces, I’ll show the HTML, CSS, and Javascript that ChatGPT created.

Step 3: Create the HTML Form

To create an interactive form for the calculator, ChatGPT used HTML to define the fields and then CSS (shown later) to make it look pretty. The form contains drop-down menus for each category (talent type, skill level, and hours), which let the user select the specifications for each talent they want to add to their team.

The form starts with a single talent, and users can add more by clicking the “Add Talent” button. Here is the HTML code that ChatGPT gave me to create the form and locations on the website for the quotes to be popped into.

HTML Code

<form>
  <div>

    <div id="talent-list">
      <div class="talent">
        <h3>Talent 1</h3>
        <label for="skill">Type: </label>
        <select name="skill[]" class="skill-select" required>
          <option value="talent_type_1">Talent Type #1</option>
          <option value="talent_type_2">Talent Type #2</option>
          <option value="talent_type_3">Talent Type #3</option>
        </select>
        <label for="level">Level:</label>
        <select name="level[]" class="level-select" required>
          <option value="entry">Entry</option>
          <option value="mid">Mid</option>
          <option value="senior">Senior</option>
        </select>
        <label for="support_level">Hours:</label>
        <select name="support_level[]" class="support-level-select" required>
          <option value="part_time">Part-time</option>
          <option value="full_time">Full-time</option>
        </select>
      </div>
    </div>
  </div>
  <button type="button" id="add-talent-btn">Add Talent</button>
  <button type="button" id="get-quote-btn">Get Quote *</button>
  <br><br>
  <p>* I understand that the information provided is only an estimate and not a quote or contract for services.</p>
</form>
<br>
<br>

<div id="per-hour-result"></div>
<div id="result"></div>
<div id="customize-quote-button-place"></div>

Step 3: Style the Form with CSS

Next, ChatGPT used CSS to style the form, ensuring it was not only functional but also visually appealing and user-friendly. I later asked it to use media queries to make sure the form is responsive and adapts to different screen sizes as the form looked wonky on mobile without it. I also asked for each button to be a different color and for the types to be updated easily by adjusting the color codes in the CSS.

CSS Code

<style>
/* Style Code for Custom Pricing Calculator */
@media (max-width: 767px) 
{
  .talent label,
  .talent select 
  {
    display: block;
    width: 95%;
    margin-left: 0px !important;
  }
}

#talent-list {
  margin-bottom: 10px;
}

.talent 
{
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.talent h4 
{
  font-weight: bold;
}

.skill-select, .level-select, .support-level-select
{
  margin-left: 10px;
  margin-bottom: 10px;
}

#add-talent-btn 
{
  background-color: blue;
  color: white;
  margin-right: 10px;
}

#get-quote-btn 
{
  background-color: green;
  color: white;
}

#customizeBtnEmail 
{
  background-color: orange;
  color: white !important;
    margin-bottom: 30px;
        border-color: black;
  border-width: 1px;
}

#customizeBtnEmail:hover,
#customizeBtnEmail:focus
{
  background-color: orange;
  color: white !important;
transition: 0.5s;
border-color: black;
  border-width: 1px;
  }


#customizeBtnSendViaForm 
{
  background-color: blue;
  color: white !important;
  margin-bottom: 30px;
  margin-left: 10px;
}

#customizeBtnSendViaForm:hover,
#customizeBtnSendViaForm:focus 
{
  background-color: blue;
  color: white !important;
  transition: 0.5s;
}

label[for^="skill"], label[for^="level"], label[for^="support_level"]  
{
  font-weight: bold;
  margin-left: 10px;
}

</style>

This code makes sure that the form fields and buttons are appropriately styled and positioned. It also ensures that the form is mobile-responsive, with labels and fields adjusting to block display on smaller screens.

Step 4: Create the Javascript

To make the form interactable, ChatGPT created Javascript to listen for button clicks, grab the input data, calculate the price per talent, and calculate the whole monthly quote price.

Here’s what ChatGPT gave me (not on the first try, of course) for the Javascript…

Javascript Code

<script>
/* JavaScript for Global Hola Pricing Form */
/* Edited for brevity */

/* These are the Hourly Rates of Our Talent Types */
const SKILL_PRICES = 
{
  talent_type_1: 12.00,
  talent_type_2: 13.00,
  talent_type_3: 14.00
};

/* This is the skill-level of the talents and the respective additional pricing */
const LEVEL_PRICES = 
{
  entry: 1, // entry-level is the base, so prices are just multiplied by 1
  mid: 1.10, // mid-level talent gets a 10% premium
  senior: 1.25 // senior-level talent gets a 25% premium 
};

/* Includes Part-time and Full-time Support Roles */
const SUPPORT_LEVELS = 
{
  part_time: 0.5, 
  full_time: 1
};

const talentList = document.getElementById("talent-list");
const addTalentBtn = document.getElementById("add-talent-btn");
const getQuoteBtn = document.getElementById("get-quote-btn");
const result = document.getElementById("result");
const customizeQuoteButtonLocation = document.getElementById(
  "customize-quote-button-place"
);

/* Listens for When the Add Talent Button is Clicked to add a new input row */

addTalentBtn.addEventListener("click", () => {
  const talent = `
    <div class="talent">
      <h3>Talent ${talentList.children.length + 1}</h3>
      <label for="skill">Type: </label>
      <select name="skill[]" class="skill-select" required>
        <option value="talent_type_1">Accountant</option>
        <option value="talent_type_2">Appointment Setter</option>
        <option value="talent_type_3">AR Specialist</option>
      </select>

      <label for="level">Level:</label>
      <select name="level[]" class="level-select" required>
        <option value="entry">Entry</option>
        <option value="mid">Mid</option>
        <option value="senior">Senior</option>
      </select>
      
      <label for="support_level">Hours</label>
      <select name="support_level[]" class="support-level-select" required>
        <option value="part_time">Part-time</option>
        <option value="full_time">Full-time</option>
      </select>
    </div>
  `;
  talentList.insertAdjacentHTML("beforeend", talent);
});

/* Listens for when the Get Quote Button is clicked */
getQuoteBtn.addEventListener("click", () => {
  const skillSelects = document.querySelectorAll(".skill-select");
  const levelSelects = document.querySelectorAll(".level-select");
  const supportLevelSelects = document.querySelectorAll(
    ".support-level-select"
  );

  let totalCost = 0;
  let totalHours = 0;
  const talents = [];
  
  /* Grabs all the inputs and calculates each talent's price */
  skillSelects.forEach((skillSelect, index) => {
    const skill = skillSelect.value;
    const level = levelSelects[index].value;
    const support_level = supportLevelSelects[index].value;
    const pricePerHour = SKILL_PRICES[skill] * LEVEL_PRICES[level];
    const hours = support_level === "full_time" ? 160 : 80; // Assuming full-time is 160 hours and part-time is 80 hours
    const cost = pricePerHour * hours;
    totalCost += cost;
    totalHours += hours;
    talents.push({ skill, level, cost, support_level, pricePerHour });
  });
  
  /* Creates the Average Cost Per Talent Per Hour */
  const averagePricePerTalentPerHour = totalCost / totalHours;
  
  /* Creates the Estimated team Monthly Cost Range */
  const estimatedCostRange = document.createElement("h4");
  estimatedCostRange.classList.add("estimated-cost-range");

  const estimatedCost = Math.round(totalCost);

  const costRangeLower = Math.round((estimatedCost * 0.95) / 100) * 100;
  const costRangeUpper = Math.round((estimatedCost * 1.05) / 100) * 100;
  estimatedCostRange.innerText = `Average Price per Talent per Hour: $${Math.round(
    averagePricePerTalentPerHour
  )}\nEstimated Monthly Cost: $${costRangeLower}-$${costRangeUpper}`;
  result.innerHTML = "";
  result.appendChild(estimatedCostRange);
  
  /* Creates the Special MailTo: Email Link */
  var mailToLink = `hello@globalhola.com?subject=Please customize my outsourcing quote&body=I would like to customize my outsourcing quote estimate.%0D%0A%0D%0ATalents:%0D%0A${talents
    .map(
      (talent) =>
        `- ${talent.skill
          .replace(/_/g, " ")
          .replace(/\b\w/g, (c) => c.toUpperCase())}: ${
          talent.level
        } level, Cost per Hour: $${Math.round(
          talent.pricePerHour
        )}, Support Level: ${talent.support_level}%0D%0A`
    )
    .join(
      ""
    )}%0D%0A%0D%0AEstimated cost range:%0D%0A$${costRangeLower}-$${costRangeUpper}`;

  const customizeBtn =
    `<h3>Customize my Outsource Estimate</h3><button id="customizeBtnEmail" onclick="location.href='` +
    mailToLink +
    `'">Send via Email</button><button id="customizeBtnSendViaForm" onclick="location.href='https://globalhola.com/customize-my-outsourcing-estimate/?outsourcing_team=${talents
      .map(
        (talent) =>
          `- ${talent.skill
            .replace(/_/g, " ")
            .replace(/\b\w/g, (c) => c.toUpperCase())}: ${
            talent.level
          } level, Cost per Hour: $${Math.round(
            talent.pricePerHour
          )}, Support Level: ${talent.support_level}%0D%0A`
      )
      .join(
        ""
      )}&monthly_estimate=$${costRangeLower}-$${costRangeUpper}'">Send via Form</button><br><p>Click the button above to open up your email client to send a premade message.</p>`;
  
  /* Inserts the results into the page locations in the HTML Code */
  customizeQuoteButtonLocation.innerHTML = "";
  customizeQuoteButtonLocation.insertAdjacentHTML("beforeend", customizeBtn);

  estimatedCostRange.scrollIntoView({ behavior: "smooth" });
});

</script>

This code allows users to add talents dynamically, providing flexibility in terms of team size. To grab all of this data, ChatGPT created a talents array to grab the data for all the talents’:

  • Type
  • Price/hour
  • Skill Level (Entry, Mid, Senior)
  • Hours Needed (Part-time or Full-time)

It also added event listeners for the “Add Talent” and “Get Quote” buttons to add more talents and calculate the total cost respectively. So when a user clicks on the “Add Talent” button, a new entry is available below for the user to input a new talent. When the “Get Quote” button is clicked, the script calculates the total cost by multiplying the price per hour by the number of hours (full-time or part-time) and then adds up the total cost for all talents.

This Javascript also generates a range for the estimated cost and creates a button for users to customize their outsourcing quote via email or form, pre-filling the information they have already entered. This makes it an easy lead-generation tool and doesn’t make the sales pitch too pushy. We also considered requiring a user email to generate the form results, but that’s not our sales philosophy of “no hard sell”.

It’s great! ChatGPT for the win!

How to Build Your Custom Pricing Calculator with ChatGPT

So, I did this! Cool right?

ChatGPT is an amazing tool that you can use to create your own custom pricing calculator for your website with JavaScript, HTML, and CSS, and it makes the development process a ton faster and easier to debug. Many times throughout the process there were a couple of bugs and unexpected errors I had to correct. All I had to do is tell ChatGPT the specific error, and usually, it would find it and fix it very efficiently.

Since upgrading to ChatGPT Plus (4.0), I can say that the efficiency of the development time is much faster. I created this in ChatGPT Free (3.5) version, but now that I’m editing it with ChatGPT Plus, it’s been a much faster process by far!

Remember that even though this calculator is for an outsourcing service, you can use the same principles and adjust the details to create a calculator for different services or products. I hope this walkthrough has been helpful and inspires you to create your own custom pricing calculators for your own website!

Want some help creating your own custom pricing calculator? Use an outsourcing company to find someone to create it with ChatGPT for you!

Love reading about automation and being a digital entrepreneur? Follow me on Medium and think about subscribing to Medium. It helps me post more content and gives you some great access into my head!

Level Up Coding

Thanks for being a part of our community! Before you go:

🚀👉 Join the Level Up talent collective and find an amazing job

ChatGPT
Business
Lead Generation
Sales
Web Development

--

--

Level Up Coding
Level Up Coding
Follow

Published in Level Up Coding

222K Followers
Last published 2 days ago

Coding tutorials and news. The developer homepage gitconnected.com && skilled.dev && levelup.dev

Follow
Nick Canfield
Nick Canfield
Follow

Written by Nick Canfield

193 Followers
77 Following

www.TropicFlare.com ➡ Business Automation www.GlobalHola.com ➡ Virtual Assistants 💼Entrepreneur 🌊🌴Digital Nomad https://domainwizard.ai

Follow

No responses yet

Write a response

What are your thoughts?

Help

Status

About

Careers

Press

Blog

Privacy

Rules

Terms

Text to speech