To create Tile Flooring Cost Calculator in Squarespace, like this.
#1. First, you can add a Code Block
#2. Next, paste this code into Code Block
<div class="tp-calc" data-tp-calc>
<div class="tp-calc__wrap">
<div class="tp-calc__left">
<div class="tp-calc__titleWrap">
<h2 data-tp-title>Tile Flooring Cost Calculator</h2>
</div>
<div class="tp-calc__field">
<div class="tp-calc__labelRow">
<p class="sqsrte-large">Area in Square Meters</p>
<div class="tp-calc__pill"><span data-tp-area>38</span> m<sup>2</sup></div>
</div>
<input
class="tp-calc__range"
type="range"
min="1"
max="100"
step="1"
value="38"
data-tp-area-range
aria-label="Area"
/>
<div class="tp-calc__minmax">
<span><span data-tp-min>1</span> m<sup>2</sup></span>
<span><span data-tp-max>100</span> m<sup>2</sup></span>
</div>
<p class="sqsrte-small" data-tp-area-help>Adjust the slider to represent the floor area you need to tile.</p>
</div>
<div class="tp-calc__divider"></div>
<div class="tp-calc__field">
<p class="sqsrte-large">Tile Type</p>
<div class="tp-calc__selectWrap">
<select class="tp-calc__select" data-tp-type aria-label="Tile Type"></select>
<span class="tp-calc__chev" aria-hidden="true"></span>
</div>
<p class="sqsrte-small" data-tp-type-help>Select the type of tiles you want to install.</p>
</div>
</div>
<div class="tp-calc__right">
<div class="tp-calc__card">
<h3 data-tp-total-title>Total Cost of Tiles</h3>
<div class="tp-calc__total" data-tp-total>$1.140</div>
<p class="sqsrte-small" data-tp-total-help>Cost is calculated based on the selected type of tile and the total area.</p>
<div class="tp-calc__spacer"></div>
<h3 data-tp-cta-title>Ready to Transform Your Floors?</h3>
<p class="sqsrte-small" data-tp-cta-text>Get the best tiles at great prices and renovate your space effectively.</p>
<a
class="btn btn--border theme-btn--primary-inverse sqs-button-element--primary"
data-tp-btn
href="#"
rel="noopener"
>Shop Tiles Now</a>
</div>
</div>
</div>
</div>
<style>
.tp-calc {
--tp-bg: #fff;
--tp-card: #f6f6f6;
--tp-text: #111;
--tp-muted: #6b6b6b;
--tp-line: #e9e9e9;
--tp-blue: #1e78ff;
--tp-radius: 18px;
--tp-shadow: none;
font-family: inherit;
color: var(--tp-text);
}
.tp-calc__wrap {
max-width: 1180px;
margin: 40px auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 34px;
align-items: start;
}
.tp-calc__left {
background: var(--tp-bg);
}
.tp-calc__field {
padding: 6px 0;
}
.tp-calc__labelRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.tp-calc__pill {
min-width: 98px;
text-align: center;
background: #f1f1f1;
border-radius: 10px;
padding: 10px 12px;
font-weight: 650;
}
.tp-calc__range {
width: 100%;
appearance: none;
height: 10px;
border-radius: 999px;
background: linear-gradient(
90deg,
var(--tp-blue) 0%,
var(--tp-blue) var(--tp-fill, 37%),
#e8e8e8 var(--tp-fill, 37%),
#e8e8e8 100%
);
}
.tp-calc__range::-webkit-slider-thumb {
appearance: none;
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
cursor: pointer;
}
.tp-calc__range::-moz-range-thumb {
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
cursor: pointer;
}
.tp-calc__minmax {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--tp-muted);
font-size: 14px;
margin-top: 10px;
}
.tp-calc__divider {
height: 1px;
background: var(--tp-line);
margin: 26px 0;
}
.tp-calc__selectWrap {
position: relative;
margin-top: 10px;
}
.tp-calc__select {
width: 100%;
padding: 18px 56px 18px 18px;
border-radius: 12px;
border: 1px solid var(--tp-line);
background: #f3f3f3;
font-size: 16px;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: none;
}
.tp-calc__select::-ms-expand {
display: none;
}
.tp-calc__chev {
position: absolute;
right: 18px;
top: 50%;
width: 0;
height: 0;
transform: translateY(-20%);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 7px solid #222;
opacity: 0.85;
pointer-events: none;
}
.tp-calc__right {
display: flex;
justify-content: stretch;
margin-top: 32px;
}
.tp-calc__card {
width: 100%;
background: var(--tp-card);
border-radius: var(--tp-radius);
padding: 36px;
box-shadow: var(--tp-shadow);
}
.tp-calc__total {
font-size: 56px;
font-weight: 800;
line-height: 1;
margin: 0 0 12px;
}
.tp-calc__spacer {
height: 28px;
}
@media (max-width: 980px) {
.tp-calc__wrap {
grid-template-columns: 1fr;
gap: 22px;
}
}
@media (max-width: 520px) {
.tp-calc__card {
padding: 28px;
}
.tp-calc__total {
font-size: 50px;
}
}
</style>
<script>
(function () {
var TP = {
buttonUrl: "https://example.com",
currencySymbol: "$",
thousands: ".",
decimals: ",",
precision: 0,
area: { min: 1, max: 100, step: 1, initial: 38 },
tileTypes: [
{ label: "Ceramic", price: 30 },
{ label: "Porcelain", price: 45 },
{ label: "Stone", price: 60 }
],
initialTypeIndex: 0
};
function formatMoney(n) {
var p = Math.max(0, TP.precision | 0);
var neg = n < 0;
n = Math.abs(n);
var fixed = p ? n.toFixed(p) : String(Math.round(n));
var intPart = p ? fixed.split(".")[0] : fixed;
var decPart = p ? fixed.split(".")[1] : "";
var out = "";
for (var i = 0; i < intPart.length; i++) {
var idx = intPart.length - i;
out += intPart[i];
if (idx > 1 && idx % 3 === 1) out += TP.thousands;
}
if (p) out += TP.decimals + decPart;
return (neg ? "-" : "") + TP.currencySymbol + out;
}
function setRangeFill(r) {
var min = +r.min,
max = +r.max,
v = +r.value;
var pct = ((v - min) / (max - min)) * 100;
r.style.setProperty("--tp-fill", pct + "%");
}
function mount(root) {
if (!root || root.dataset.tpDone === "1") return;
root.dataset.tpDone = "1";
var areaRange = root.querySelector("[data-tp-area-range]");
var areaOut = root.querySelector("[data-tp-area]");
var typeSel = root.querySelector("[data-tp-type]");
var totalOut = root.querySelector("[data-tp-total]");
var btn = root.querySelector("[data-tp-btn]");
var title = root.querySelector("[data-tp-title]");
var areaHelp = root.querySelector("[data-tp-area-help]");
var typeHelp = root.querySelector("[data-tp-type-help]");
var totalTitle = root.querySelector("[data-tp-total-title]");
var totalHelp = root.querySelector("[data-tp-total-help]");
var ctaTitle = root.querySelector("[data-tp-cta-title]");
var ctaText = root.querySelector("[data-tp-cta-text]");
btn.setAttribute("href", TP.buttonUrl || "#");
areaRange.min = TP.area.min;
areaRange.max = TP.area.max;
areaRange.step = TP.area.step;
areaRange.value = TP.area.initial;
root.querySelector("[data-tp-min]").textContent = TP.area.min;
root.querySelector("[data-tp-max]").textContent = TP.area.max;
typeSel.innerHTML = "";
TP.tileTypes.forEach(function (t, i) {
var opt = document.createElement("option");
opt.value = String(i);
opt.textContent = t.label;
typeSel.appendChild(opt);
});
typeSel.value = String(
Math.max(0, Math.min(TP.tileTypes.length - 1, TP.initialTypeIndex | 0))
);
function recalc() {
var area = +areaRange.value || 0;
var idx = +typeSel.value || 0;
var price = (TP.tileTypes[idx] && +TP.tileTypes[idx].price) || 0;
var total = area * price;
areaOut.textContent = String(area);
setRangeFill(areaRange);
totalOut.textContent = formatMoney(total);
}
areaRange.addEventListener("input", recalc, { passive: true });
typeSel.addEventListener("change", recalc, { passive: true });
recalc();
}
document.querySelectorAll("[data-tp-calc]").forEach(mount);
})();
</script>
#3. You can update all text here
and here
#3.2. To update dropdown option text/value
You can update here
#3.3. To update button text/url, you can update here
and here
#3.4. To update currency symbol, you can update it here
#4. If you don’t want to use complex code, you can also use this free tool to add Tile Flooring Cost Calculator.
Then you can add, edit text, fields… easier without using code
