使用 ChatGPT（JavaScript、HTML 和 CSS）创建自定义定价计算器

创建自定义定价计算器可以为您网站的用户提供即时的、个性化的估价，这也是一个很棒的潜在客户引流工具。对于我们公司的外包定价计算器来说，我在我的WordPress（Elementor）网站上使用了很多ChatGPT帮助来搭建它。ChatGPT是构建自定义定价计算器的好工具，但我想向您展示如何进行操作的步骤。

在这里，我将展示如何使用ChatGPT、JavaScript、HTML和CSS开发了一个独特的价格计算器，为外包服务提供报价。我甚至在这里提供代码，以便如果您公司的价格计算器使用类似的业务案例，您也可以使用它。

以下是我们网站上计算器的样子：

我将介绍如何构建自己网站的定制价格计算器，并演示我如何构建我的价格计算器。请跟着我来！

步骤1：确定您的定价变量

为了创建定制的价格计算器，我需要考虑到我们需要潜在客户告诉我们的变量，以便我们可以为他们报价外包团队的价格。

我们的定价变量（用户输入）

招聘外包人才的数量。
每个才能的类型。
每个人才的技能水平。
无论是兼职还是全职人才。

这些因素共同决定了最终的定价估算，不同的职位、技能水平和工作时间影响着整体成本。

步骤二：告诉ChatGPT为你制作

这个过程有点棘手，需要正确地告诉ChatGPT收集所有这些信息，并创建构建定制价格计算器所需的每一部分，但以下是我所做的。

我请求ChatGPT创建一个与用户在表格中所选择的才能类型、价格和其他输入相关的价格计算系统。以下是我的请求内容：

ChatGPT 话题提示

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!

在接下来的部分中，我将展示ChatGPT创建的HTML、CSS和Javascript代码。

步骤三：创建HTML表单

为了为计算器创建一个交互式表单，ChatGPT使用HTML来定义字段，然后使用CSS（稍后展示）使其外观美观。表单包含每个类别（人才类型，技能水平和小时）的下拉菜单，这使用户可以选择他们想要添加到团队中的每个人才的规格。

表格从一个单一的才能开始，用户可以通过点击“添加才能”按钮添加更多。以下是ChatGPT提供的HTML代码，用于创建表单和引用弹出到网站上的位置。

HTML 代码

<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>

步骤三：使用CSS为表单添加样式

接下来，ChatGPT使用CSS为表单添加样式，确保它不仅具有功能性，而且外观吸引人，易于使用。后来我要求它使用媒体查询来确保表单具有响应性，并适应不同的屏幕尺寸，因为表单在移动设备上的显示效果不佳。我还要求每个按钮具有不同的颜色，并且可以通过在CSS中调整颜色代码来轻松更新类型。

CSS代码

<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>

这段代码确保表单字段和按钮的样式和位置的适当设置。它还确保表单是移动响应的，标签和字段会根据较小屏幕自动调整为块显示。

第四步：创建Javascript代码。

为了使表单可以交互，ChatGPT创建了Javascript来监听按钮点击，获取输入数据，计算每个才能的价格，并计算整个月度报价。

这是ChatGPT为我提供的JavaScript代码（当然不是第一次尝试）...

Javascript 代码

<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>