home / Other Calculators / Concrete Calculator for Your Site

Concrete Calculator for Your Site

Feel free to use our Concrete Calculator on your website. The example implementation is shown below. It is possible to alter the color, font, and certain parts of the code to best fit your website.

Slabs, Square Footings, or Walls

length
width
thickness or height
quantity

Hole, Column, or Round Footings

diameter
depth or height
quantity

Circular Slab or Tube

outer diameter
inner diameter
length or height
quantity

Installation Instructions

To install, copy all of the code in the following text area into the HTML source code of your website.

TERMS OF USE
BY COPYING THE CODE FOR USE, YOU AGREE:
1. THAT THE MATERIALS ARE PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND
2. NOT TO CHANGE ANY OF THE JAVASCRIPT CODE
3. NOT TO REMOVE THE LINE OF TEXT "powered by CalcOrigin"
4. THAT THE COPYRIGHT BELONGS TO CalcOrigin
5. NOT TO REMOVE THE TERMS OF USE

<!--
TERMS OF USE
BY USING THE CODE, YOU AGREE:
1. THAT THE MATERIALS ARE PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND
2. NOT TO CHANGE ANY OF THE JAVASCRIPT CODE
3. NOT TO REMOVE THE LINE OF TEXT "powered by CalcOrigin"
4. THAT THE COPYRIGHT BELONGS TO CalcOrigin
5. NOT TO REMOVE THE TERMS OF USE
-->
<!--BEGIN OF CONCRETE CALCULATOR CODE-->
<script>
function gObj(id) { return document.getElementById(id); }
function safeText(str) { return String(str).replace(/[&<>"']/g, function(m) { if (m === '&') return '\x26amp;'; if (m === '<') return '\x26lt;'; if (m === '>') return '\x26gt;'; if (m === '"') return '\x26quot;'; return '\x27'; }); }
function sanitizeNum(str) { return String(str).replace(/[^0-9.\-]/g, '').substring(0, 50); }
function isNumber(v) { return v !== '' && isFinite(v); }
function convertToMeters(val, unit) {
  if (unit == 'foot') return val * 0.3048;
  if (unit == 'inch') return val * 0.0254;
  if (unit == 'yard') return val * 0.9144;
  if (unit == 'centimeter') return val * 0.01;
  return val;
}
function showResult(msg, isError, outputId) {
  var el = gObj(outputId);
  if (!el) return;
  if (isError) { el.textContent = msg; return; }
  el.innerHTML = msg;
}
function calcSlab() {
  var length = parseFloat(sanitizeNum(gObj('slablength').value));
  var lengthUnit = gObj('slablengthunit').value;
  var width = parseFloat(sanitizeNum(gObj('slabwidth').value));
  var widthUnit = gObj('slabwidthunit').value;
  var thickness = parseFloat(sanitizeNum(gObj('slabthick').value));
  var thicknessUnit = gObj('slabthickunit').value;
  var quantity = parseFloat(sanitizeNum(gObj('slabquantity').value));
  if (!isNumber(length)) { showResult('the length need to be numeric', true, 'coutputslab'); return; }
  if (!isNumber(width)) { showResult('the width need to be numeric', true, 'coutputslab'); return; }
  if (!isNumber(thickness)) { showResult('the thickness or height need to be numeric', true, 'coutputslab'); return; }
  if (!isNumber(quantity)) { showResult('the quantity need to be numeric', true, 'coutputslab'); return; }
  if (length < 0 || width < 0 || thickness < 0 || quantity < 0) { showResult('all the number need to be positive', true, 'coutputslab'); return; }
  length = convertToMeters(length, lengthUnit);
  width = convertToMeters(width, widthUnit);
  thickness = convertToMeters(thickness, thicknessUnit);
  var ET = length * width * thickness * quantity;
  var gA = ET / 0.3048 / 0.3048 / 0.3048;
  var PP = ET / 0.9144 / 0.9144 / 0.9144;
  var bQ = ET * 2130;
  var vH = gA * 133;
  var ko = '<b>Results:</b><br><span style="color:green"><b>' + gA.toPrecision(3) + '</b></span> cubic feet';
  ko += ' or <span style="color:green"><b>' + PP.toPrecision(3) + '</b></span> cubic yards';
  ko += ' or <span style="color:green"><b>' + ET.toPrecision(3) + '</b></span> cubic meters';
  ko += '<br> if pre-mixed concrete*, it is ';
  ko += ' <span style="color:green"><b>' + vH.toPrecision(3) + '</b></span> lbs';
  ko += ' or <span style="color:green"><b>' + bQ.toPrecision(3) + '</b></span> kgs';
  ko += '<br> if 60 lbs per bag, it is <span style="color:green"><b>' + (vH/60).toPrecision(3) + '</b></span> bags';
  ko += '<br> if 80 lbs per bag, it is <span style="color:green"><b>' + (vH/80).toPrecision(3) + '</b></span> bags';
  showResult(ko, false, 'coutputslab');
}
function calcHole() {
  var diameter = parseFloat(sanitizeNum(gObj('holediameter').value));
  var diameterUnit = gObj('holediameterunit').value;
  var depth = parseFloat(sanitizeNum(gObj('holedepth').value));
  var depthUnit = gObj('holedepthunit').value;
  var quantity = parseFloat(sanitizeNum(gObj('holequantity').value));
  if (!isNumber(diameter)) { showResult('the diameter need to be numeric', true, 'coutputhole'); return; }
  if (!isNumber(depth)) { showResult('the depth or height need to be numeric', true, 'coutputhole'); return; }
  if (!isNumber(quantity)) { showResult('the quantity need to be numeric', true, 'coutputhole'); return; }
  if (diameter < 0 || depth < 0 || quantity < 0) { showResult('all the number need to be positive', true, 'coutputhole'); return; }
  diameter = convertToMeters(diameter, diameterUnit);
  depth = convertToMeters(depth, depthUnit);
  var ET = depth * 3.14159 * diameter * diameter * quantity / 4;
  var gA = ET / 0.3048 / 0.3048 / 0.3048;
  var PP = ET / 0.9144 / 0.9144 / 0.9144;
  var bQ = ET * 2130;
  var vH = gA * 133;
  var ko = '<b>Results:</b><br><span style="color:green"><b>' + gA.toPrecision(3) + '</b></span> cubic feet';
  ko += ' or <span style="color:green"><b>' + PP.toPrecision(3) + '</b></span> cubic yards';
  ko += ' or <span style="color:green"><b>' + ET.toPrecision(3) + '</b></span> cubic meters';
  ko += '<br> if pre-mixed concrete*, it is ';
  ko += ' <span style="color:green"><b>' + vH.toPrecision(3) + '</b></span> lbs';
  ko += ' or <span style="color:green"><b>' + bQ.toPrecision(3) + '</b></span> kgs';
  ko += '<br> if 60 lbs per bag, it is <span style="color:green"><b>' + (vH/60).toPrecision(3) + '</b></span> bags';
  ko += '<br> if 80 lbs per bag, it is <span style="color:green"><b>' + (vH/80).toPrecision(3) + '</b></span> bags';
  showResult(ko, false, 'coutputhole');
}
function calcTube() {
  var outerDiameter = parseFloat(sanitizeNum(gObj('tubediameter').value));
  var outerDiameterUnit = gObj('tubediameterunit').value;
  var innerDiameter = parseFloat(sanitizeNum(gObj('tubeindiameter').value));
  var innerDiameterUnit = gObj('tubeindiameterunit').value;
  var length = parseFloat(sanitizeNum(gObj('tubedepth').value));
  var lengthUnit = gObj('tubedepthunit').value;
  var quantity = parseFloat(sanitizeNum(gObj('tubequantity').value));
  if (!isNumber(outerDiameter)) { showResult('the outer diameter need to be numeric', true, 'coutputtube'); return; }
  if (!isNumber(innerDiameter)) { showResult('the inner diameter need to be numeric', true, 'coutputtube'); return; }
  if (!isNumber(length)) { showResult('the length or height need to be numeric', true, 'coutputtube'); return; }
  if (!isNumber(quantity)) { showResult('the quantity need to be numeric', true, 'coutputtube'); return; }
  if (outerDiameter < 0 || innerDiameter < 0 || length < 0 || quantity < 0) { showResult('all the number need to be positive', true, 'coutputtube'); return; }
  if (outerDiameter < innerDiameter) { showResult('the inner diamerter needs to be smaller than outer diamerter', true, 'coutputtube'); return; }
  outerDiameter = convertToMeters(outerDiameter, outerDiameterUnit);
  innerDiameter = convertToMeters(innerDiameter, innerDiameterUnit);
  length = convertToMeters(length, lengthUnit);
  var ET = length * 3.14159 * (outerDiameter * outerDiameter - innerDiameter * innerDiameter) * quantity / 4;
  var gA = ET / 0.3048 / 0.3048 / 0.3048;
  var PP = ET / 0.9144 / 0.9144 / 0.9144;
  var bQ = ET * 2130;
  var vH = gA * 133;
  var ko = '<b>Results:</b><br><span style="color:green"><b>' + gA.toPrecision(3) + '</b></span> cubic feet';
  ko += ' or <span style="color:green"><b>' + PP.toPrecision(3) + '</b></span> cubic yards';
  ko += ' or <span style="color:green"><b>' + ET.toPrecision(3) + '</b></span> cubic meters';
  ko += '<br> if pre-mixed concrete*, it is ';
  ko += ' <span style="color:green"><b>' + vH.toPrecision(3) + '</b></span> lbs';
  ko += ' or <span style="color:green"><b>' + bQ.toPrecision(3) + '</b></span> kgs';
  ko += '<br> if 60 lbs per bag, it is <span style="color:green"><b>' + (vH/60).toPrecision(3) + '</b></span> bags';
  ko += '<br> if 80 lbs per bag, it is <span style="color:green"><b>' + (vH/80).toPrecision(3) + '</b></span> bags';
  showResult(ko, false, 'coutputtube');
}
</script>
<script>calcSlab();</script>

<!--YOU CAN CHANGE THE FOLLOWING CODE-->
<table bgcolor="#dddddd" id="concretecalc">
  <tr>
    <td>
      <h3>Slabs, Square Footings, or Walls</h3>
      <table border="0" cellspacing="0" cellpadding="4">
        <tr>
          <td>length</td>
          <td><input type="text" name="slablength" style="width:100px;" id="slablength" value="2.5" style="text-align: right;"></td>
          <td><select id="slablengthunit" name="slablengthunit"><option value="foot" selected>foot</option><option value="inch">inch</option><option value="yard">yard</option><option value="meter">meter</option><option value="centimeter">centimeter</option></select></td>
        </tr>
        <tr>
          <td>width</td>
          <td><input type="text" name="slabwidth" style="width:100px;" id="slabwidth" value="5" style="text-align: right;"></td>
          <td><select id="slabwidthunit" name="slabwidthunit"><option value="foot" selected>foot</option><option value="inch">inch</option><option value="yard">yard</option><option value="meter">meter</option><option value="centimeter">centimeter</option></select></td>
        </tr>
        <tr>
          <td>thickness or height</td>
          <td><input type="text" name="slabthick" style="width:100px;" id="slabthick" value="5" style="text-align: right;"></td>
          <td><select id="slabthickunit" name="slabthickunit"><option value="foot">foot</option><option value="inch" selected>inch</option><option value="yard">yard</option><option value="meter">meter</option><option value="centimeter">centimeter</option></select></td>
        </tr>
        <tr>
          <td>quantity</td>
          <td colspan="2"><input type="text" name="slabquantity" style="width:100px;" id="slabquantity" value="1" style="text-align: right;"></td>
        </tr>
        <tr>
          <td colspan="3" align="center"><input type="button" value="Calculate" id="csp-calcSlab-1" onclick="calcSlab()"></td>
        </tr>
      </table>
      <div id="coutputslab"></div>

      <h3>Hole, Column, or Round Footings</h3>
      <table border="0" cellspacing="0" cellpadding="4">
        <tr>
          <td>diameter</td>
          <td><input type="text" name="holediameter" style="width:100px;" id="holediameter" value="2.5" style="text-align: right;"></td>
          <td><select id="holediameterunit" name="holediameterunit"><option value="foot" selected>foot</option><option value="inch">inch</option><option value="yard">yard</option><option value="meter">meter</option><option value="centimeter">centimeter</option></select></td>
        </tr>
        <tr>
          <td>depth or height</td>
          <td><input type="text" name="holedepth" style="width:100px;" id="holedepth" value="6" style="text-align: right;"></td>
          <td><select id="holedepthunit" name="holedepthunit"><option value="foot">foot</option><option value="inch" selected>inch</option><option value="yard">yard</option><option value="meter">meter</option><option value="centimeter">centimeter</option></select></td>
        </tr>
        <tr>
          <td>quantity</td>
          <td colspan="2"><input type="text" name="holequantity" style="width:100px;" id="holequantity" value="1" style="text-align: right;"></td>
        </tr>
        <tr>
          <td colspan="3" align="center"><input type="button" value="Calculate" id="csp-calcHole-2" onclick="calcHole()"></td>
        </tr>
      </table>
      <div id="coutputhole"></div>

      <h3>Circular Slab or Tube</h3>
      <table border="0" cellspacing="0" cellpadding="4">
        <tr>
          <td>outer diameter</td>
          <td><input type="text" name="tubediameter" style="width:100px;" id="tubediameter" value="5" style="text-align: right;"></td>
          <td><select id="tubediameterunit" name="tubediameterunit"><option value="foot" selected>foot</option><option value="inch">inch</option><option value="yard">yard</option><option value="meter">meter</option><option value="centimeter">centimeter</option></select></td>
        </tr>
        <tr>
          <td>inner diameter</td>
          <td><input type="text" name="tubeindiameter" style="width:100px;" id="tubeindiameter" value="4" style="text-align: right;"></td>
          <td><select id="tubeindiameterunit" name="tubeindiameterunit"><option value="foot" selected>foot</option><option value="inch">inch</option><option value="yard">yard</option><option value="meter">meter</option><option value="centimeter">centimeter</option></select></td>
        </tr>
        <tr>
          <td>length or height</td>
          <td><input type="text" name="tubedepth" style="width:100px;" id="tubedepth" value="5" style="text-align: right;"></td>
          <td><select id="tubedepthunit" name="tubedepthunit"><option value="foot">foot</option><option value="inch" selected>inch</option><option value="yard">yard</option><option value="meter">meter</option><option value="centimeter">centimeter</option></select></td>
        </tr>
        <tr>
          <td>quantity</td>
          <td colspan="2"><input type="text" name="tubequantity" style="width:100px;" id="tubequantity" value="1" style="text-align: right;"></td>
        </tr>
        <tr>
          <td colspan="3" align="center"><input type="button" value="Calculate" id="csp-calcTube-3" onclick="calcTube()"></td>
        </tr>
      </table>
      <div id="coutputtube"></div>
      <br><div id="calfootnote">powered by <a href="https://calcorigin.com">CalcOrigin</a></div>
    </td>
  </tr>
</table>
<!--END OF CONCRETE CALCULATOR CODE-->

Security & Embed Options

Security Features Implemented

Input Sanitization — All input fields are stripped of non-numeric characters before processing, preventing script injection.
Inline JavaScript — The embed code includes all JS inline — no external script requests, no third-party dependency.
HTTPS Only — All external resources are served over HTTPS.
No eval() — The calculator uses no dynamic code execution.

Option 1: Standard Embed (Inline JS)

Copy this code into your page. All JavaScript is included inline — no external requests, maximum security.

Option 2: iframe Embed (Sandboxed)

For maximum isolation, use the iframe sandbox approach. The calculator runs in a sandboxed iframe and cannot access your page's DOM, cookies, or storage.

<iframe src="https://calcorigin.com/embed/concrete-calculator-for-your-site.html"
        sandbox="allow-scripts"
        width="100%"
        height="580"
        frameborder="0"
        style="border:1px solid #ddd;border-radius:8px;max-width:480px">
  <p>Your browser does not support iframes. <a href="https://calcorigin.com/concrete-calculator-for-your-site.html">Use the calculator on CalcOrigin</a>.</p>
</iframe>