Create an Instant Quote Squarespace Calculator
How To Create a Squarespace Calculator to Build Instant Quotes
Here’s my simple guide on creating an instant quote Squarespace calculator! Whether you're a web developer, a business owner, or a DIY enthusiast, this tutorial will walk you through the steps to seamlessly integrate a dynamic price calculator for your website. With this tool, you can provide your customers with instant pricing information, enhancing their experience and boosting your sales. Let's dive in and transform your Squarespace site with a functional and efficient pricing table!
Step 1: Add a Code Block
Paste the below code into a code block on your Squarespace site. Add this wherever you want your Squarespace calculator to be visible.
Paste the following in the code block:
<!DOCTYPE html>
<html>
<body>
<div class="calculator">
<h3>Get an instant price for your website</h3>
<p>What type of website do you need?</p>
<label><input type="checkbox" id="simpleServices"> Simple Services </label><br>
<label><input type="checkbox" id="portfolio"> Portfolio </label><br>
<label><input type="checkbox" id="eCommerce"> E-Commerce (up to 50 products) </label><br>
<label><input type="checkbox" id="onlineCourse"> Online Course </label><br>
<label><input type="checkbox" id="blog"> Blog </label><br>
<p> How many pages do you need?</p>
<label><input type="radio" name="pages" id="1-5"> 1-5 pages</label><br>
<label><input type="radio" name="pages" id="5-10"> 5-10 pages</label><br>
<label><input type="radio" name="pages" id="10-20"> 10-20 pages</label><br>
<label><input type="radio" name="pages" id="20+"> 20+ pages</label><br>
<p>Do you want to add website copy (Up to 10 pages)?</p>
<label><input type="radio" name="copy" id="yes"> Yes Please </label><br>
<label><input type="radio" name="copy" id="no"> No Thanks </label><br>
<div class="total-price-container">
<p>Guide Price: £<span id="totalPrice">0</span></p>
</div>
<div class="calculate-button"> <!-- Added div here -->
<button onclick="calculatePrice()">Calculate Price</button>
</div>
</div>
<script>
function calculatePrice() {
var total = 0;
if (document.getElementById("simpleServices").checked) total += 1500;
if (document.getElementById("portfolio").checked) total += 1800;
if (document.getElementById("eCommerce").checked) total += 2500;
if (document.getElementById("onlineCourse").checked) total += 2600;
if (document.getElementById("blog").checked) total += 1500;
if (document.getElementById("1-5").checked) total += 200;
if (document.getElementById("5-10").checked) total += 500;
if (document.getElementById("10-20").checked) total += 800;
if (document.getElementById("20+").checked) total += 1000;
if (document.getElementById("yes").checked) total += 500;
document.getElementById("totalPrice").textContent = total;
}
</script>
</body>
</html>
Adjusting the code
Titles of each section are shown in bold using the <p> heading. You can change this to H1,2,3 etc if you prefer.
Make sure the Id (in bold) and the label wording matches for each.
Below calculate price (in bold) Make sure each “label” matches the labels from the code above where you have made your own changes.
Step 2: Add the CSS code
Copy and paste the below CSS code in your custom CSS panel. Go to Pages>website tools>custom CSS.
Adjust the CSS code below according to your specific styles and branding. Highlighted in bold are areas that you can easily adjust.
*price generator*/
.calculator {
background-color: #f4f2eb;
padding: 50px;
border: 0px solid #000;
border-radius: 10px;
font-weight: 500;
}
/* Style the Calculate Price button */
.calculate-button {
text-align: left;
}
.calculate-button button {
background-color: #A83D3C; /* Red background color */
color: #FFFFFF; /* White text color */
border: none;
padding: 10px 20px;
border-radius: 10px;
margin-top: 30px !important;
cursor: pointer;
width: 250px; /* Adjust the width as needed */
}
.calculate-button button:hover {
background-color: #2C343C; /* Red background color on hover */
}
/* price*/
.total-price-container {
position: relative;
background-color: white;
padding: 10px 20px;
border-radius: 10px;
border: 1px solid #000;
display: block;
margin: 20px left; /* Center the container horizontally */
width: 200px; /* Adjust the width as needed */
margin-top: 30px !important;
}
.total-price-container h2 {
margin: 0;
}
.total-price-container p{ font-weight: 700;}
Congratulations! You've successfully created an instant quote Squarespace calculator for your website. By following this guide, you've equipped your site with a powerful tool that enhances user engagement and simplifies the pricing process for your customers. Don't forget to test your calculator thoroughly to ensure accuracy and functionality. Stay tuned for more tips and tutorials on optimizing your Squarespace site. Happy building!
You might also be interested in my article about ‘how to create press down effect buttons for Squarespace’
Hope you enjoyed the guide on How To Create a Squarespace Calculator to Build Instant Quotes. For more Squarespace tips and hacks sign up to my newsletter!
Did I help you? Consider buying me a coffee as thanks!
![Squarespace Back To Top Button [With Indicator Animation]](https://images.squarespace-cdn.com/content/v1/62c2c3cdb503a23ea69c8834/1730734790109-XTAJPP06KGHP7ZYMU7FY/Squarespace-back-to-top-button-guide.jpg)
