Building a simple calculator widget in Weebly

A calculator can turn a static Weebly page into a useful tool for visitors. Whether you run a blog, promote a service, or sell products, a small interactive widget can help people estimate costs without leaving your website. A GST estimator, loan figure tool, or basic four-function calculator may be enough to make a page more practical.

For an Australian audience, a price calculator has an especially clear use case. Local tradespeople can estimate job costs, market sellers can show GST-inclusive prices, and bloggers can help readers work out budgets in Australian dollars. A focused widget is usually more effective than a large collection of complex features that few visitors use.

You do not need a separate app or advanced hosting setup to get started. Weebly’s Embed Code element can hold HTML, CSS, and JavaScript in one compact block. With sensible styling, accessible controls, and careful testing on mobile screens, you can add a calculator that suits the rest of your site.

Decide what the calculator should do

Start with one specific calculation rather than trying to build a complete financial tool. A simple GST calculator is a useful example for Australian websites: a visitor enters a price, chooses whether it already includes GST, and receives the base amount, GST component, and final total. The standard Australian GST rate is 10%, although specialist circumstances may require professional accounting advice.

Think about the people who will use the widget. A Brisbane tradie may want to add GST to a quoted labour amount, while a Melbourne market stallholder may want to remove GST from a displayed retail price. A blogger writing about household budgets might prefer a weekly expense calculator using Australian dollar values. Use labels that describe the result clearly instead of relying on symbols alone.

It is also worth deciding what the calculator should not do. Avoid presenting estimates as invoices, tax advice, loan approvals, or guaranteed quotes. A short note beneath the results can explain that figures are general estimates and should be checked against current Australian tax rules or professional advice. For broader Weebly customisation ideas, the My Weebly Tricks resource offers related tips for widgets, effects, and page improvements.

Add the calculator with an Embed Code element

In the Weebly editor, open the page where the widget should appear and drag an Embed Code element into the desired section. Click the element and choose the option to edit custom HTML. The following example creates a compact GST calculator with an Australian dollar display:

<div class="gst-widget" id="gst-widget">
  <h3>GST calculator</h3>
  <label for="gst-amount">Enter an amount</label>
  <input id="gst-amount" type="number" min="0" step="0.01"
         placeholder="For example, 110">

  <label for="gst-mode">This amount is</label>
  <select id="gst-mode">
    <option value="exclusive">Before GST</option>
    <option value="inclusive">GST-inclusive</option>
  </select>

  <button type="button" id="gst-calculate">Calculate</button>
  <button type="button" id="gst-clear">Clear</button>

  <div id="gst-result" aria-live="polite">
    Enter an amount to see the result.
  </div>
</div>

<style>
  .gst-widget {
    max-width: 360px;
    margin: 1rem auto;
    padding: 1.25rem;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
  }

  .gst-widget h3 {
    margin-top: 0;
  }

  .gst-widget label,
  .gst-widget input,
  .gst-widget select {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .gst-widget label {
    margin: .75rem 0 .3rem;
    font-weight: 600;
  }

  .gst-widget input,
  .gst-widget select {
    padding: .65rem;
    border: 1px solid #aaa;
    border-radius: 5px;
    font-size: 1rem;
  }

  .gst-widget button {
    margin: 1rem .35rem 0 0;
    padding: .65rem .9rem;
    border: 0;
    border-radius: 5px;
    background: #1769aa;
    color: #fff;
    cursor: pointer;
  }

  .gst-widget button:hover,
  .gst-widget button:focus {
    background: #0d4f82;
  }

  #gst-result {
    margin-top: 1rem;
    line-height: 1.6;
  }
</style>

<script>
  (function () {
    const amountInput = document.getElementById('gst-amount');
    const modeInput = document.getElementById('gst-mode');
    const calculateButton = document.getElementById('gst-calculate');
    const clearButton = document.getElementById('gst-clear');
    const result = document.getElementById('gst-result');

    function money(value) {
      return new Intl.NumberFormat('en-AU', {
        style: 'currency',
        currency: 'AUD'
      }).format(value);
    }

    calculateButton.addEventListener('click', function () {
      const amount = Number.parseFloat(amountInput.value);

      if (!Number.isFinite(amount) || amount < 0) {
        result.textContent = 'Please enter a valid amount of $0 or more.';
        return;
      }

      let beforeGst;
      let gst;
      let total;

      if (modeInput.value === 'exclusive') {
        beforeGst = amount;
        gst = amount * 0.10;
        total = amount + gst;
      } else {
        total = amount;
        beforeGst = amount / 1.10;
        gst = total - beforeGst;
      }

      result.innerHTML =
        '<strong>Before GST:</strong> ' + money(beforeGst) + '<br>' +
        '<strong>GST:</strong> ' + money(gst) + '<br>' +
        '<strong>Total:</strong> ' + money(total);
    });

    clearButton.addEventListener('click', function () {
      amountInput.value = '';
      result.textContent = 'Enter an amount to see the result.';
      amountInput.focus();
    });
  }());
</script>

The script uses Number.parseFloat to read the input and formats the result with en-AU and AUD, so visitors see Australian currency conventions. It also avoids evaluating user-entered text as code. The inclusive calculation divides the total by 1.10, while the exclusive calculation adds ten per cent to the original amount.

Match the widget to your Weebly design

The calculator should look like part of the page rather than a pasted external tool. Replace the blue button colour with your site’s accent colour, adjust the border radius to match existing buttons, and use the same font family as your Weebly theme. A narrow maximum width prevents the form from appearing oversized on desktop screens.

Keep the labels visible and place them above their controls. Placeholder text such as “For example, 110” is helpful, but it should not be the only instruction because placeholders disappear as soon as someone types. A visible result area gives the widget a clear destination for its output and makes the experience easier to understand.

You can also add supporting copy around the widget. Explain whether the displayed amount is before or after GST, state that the calculator uses a 10% rate, and clarify whether delivery, discounts, or other fees are included. For a local business, examples using dollars and familiar services will feel more relevant than generic US currency examples.

Make the widget responsive and accessible

Many Australians browse on a phone while commuting, comparing prices in a shop, or checking a service during a busy workday. The widget’s full-width fields and modest maximum width help it fit smaller screens in Sydney apartments, regional towns, and everywhere between. Test it at narrow widths in Weebly’s preview mode, then check the published page on both iPhone and Android.

Keyboard access matters as well. Real <label> elements, a clearly focused button, and the aria-live result area help visitors using assistive technology. Avoid tiny text and low-contrast colours, and make the tap targets large enough for comfortable use. If you are sending a preview to a collaborator using a different device, this FaceTime link guide may help coordinate a quick cross-platform review.

Do not place the widget inside a narrow column beside several other elements unless you have checked the mobile layout. Weebly sections can stack differently on smaller screens, and long headings or instructional text may push the calculator farther down the page. A dedicated section with generous spacing usually produces a cleaner result.

Test, publish, and maintain the calculator

Before publishing, enter ordinary values such as 100, 110, 0, and a decimal amount like 49.95. Confirm that $100 before GST produces $10 GST and a $110 total, while $110 inclusive produces approximately $100 before GST and $10 GST. Also test blank input, negative values, pasted text, and repeated clicks on the Calculate button.

Check the calculator in the actual published environment, not just inside the editor. Some Weebly themes, apps, or custom scripts can affect spacing and JavaScript behaviour. Open the page in a private browser window, test it while logged out, and verify that it works after refreshing. Review the result on a current desktop browser and at least one mobile browser.

A calculator that collects no names, email addresses, or payment information has a simple privacy profile. If you later add a quote request form, analytics events, or saved calculations, review how that information is handled under the Privacy Act 1988 and update your privacy notice where necessary. If the widget supports a commercial offer, keep pricing and claims accurate under the Australian Consumer Law. A calculator should clarify a purchase, not create a misleading impression.

Weebly’s mobile menu and page layout can also influence how visitors reach the tool. If a navigation change makes the calculator page difficult to access on a phone, follow this guide to fix the mobile menu before promoting the widget. Recheck the page after theme edits, because a later design change may override custom spacing or colours.

Use the widget as a practical feature within a useful page. A tradie could place it beside a service pricing explanation, a finance blogger could pair it with a GST guide, and a small retailer could use it to explain tax-inclusive prices before displaying a contact button. Keep the calculator’s scope clear, review the rate and wording when regulations change, and remove it if the underlying calculation is no longer accurate.

Add the code to a test page first, style it to suit your Weebly theme, and publish it once the calculations and mobile layout have been checked. A small, reliable calculator can give visitors an immediate reason to stay on your site and can make an otherwise ordinary page considerably more useful.