<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home Heating & AC Contact Form</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 2rem;
background-color: #f9f9f9;
}
form {
background: white;
padding: 20px;
border-radius: 10px;
max-width: 600px;
margin: auto;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
label {
margin-top: 1rem;
display: block;
font-weight: bold;
}
input, select {
width: 100%;
padding: 10px;
margin-top: 0.5rem;
border: 1px solid #ccc;
border-radius: 5px;
}
.checkbox-label {
margin-top: 1rem;
font-size: 0.9rem;
}
button {
margin-top: 2rem;
background-color: #cc0000;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
}
button:hover {
background-color: #a30000;
}
</style>
</head>
<body>
<form id="contact-form">
<label for="name">Name*</label>
<input type="text" id="name" name="name" required placeholder="Name*">
<label for="phone">Phone*</label>
<input type="tel" id="phone" name="phone" required pattern=".{8,15}" maxlength="15" placeholder="Phone*">
<label for="email">Email*</label>
<input type="email" id="email" name="email" required placeholder="Email*">
<label for="services">Choose A Service*</label>
<select id="services" name="services" required>
<option value="">Choose A Service</option>
<option value="Heating">Heating</option>
<option value="Cooling">Cooling</option>
<option value="Duct Cleaning">Duct Cleaning</option>
<option value="Other">Other</option>
</select>
<label for="address">Address</label>
<input type="text" id="address" name="address" placeholder="Address">
<label for="description">Description</label>
<input type="text" id="description" name="description" placeholder="Description">
<div class="checkbox-label">
<input type="checkbox" id="opt_in" name="opt_in" required>
<label for="opt_in">
*By checking this box, you agree to be contacted about your request & other information using automated technology. Message frequency varies. Msg & data rates may apply.
<a href="https://gohomeheating.com/privacy-policy/">Acceptable use policy</a>
</label>
</div>
<button type="submit">Send Message</button>
</form>
<script>
document.getElementById("contact-form").addEventListener("submit", function (e) {
e.preventDefault();
const formData = {
name: document.getElementById("name").value,
phone: document.getElementById("phone").value,
email: document.getElementById("email").value,
services: document.getElementById("services").value,
address: document.getElementById("address").value,
description: document.getElementById("description").value,
opt_in: document.getElementById("opt_in").checked ? "Yes" : "No"
};
fetch("https://script.google.com/macros/s/AKfycbwxgrgbz41peqT-BLX33Hgq_Qi0iRhzqyM9SQcYSMhyqjMKRojwBKpsNyoit_Hbk-AxUw/exec", {
method: "POST",
body: JSON.stringify(formData),
headers: { "Content-Type": "application/json" }
})
.then(res => res.text())
.then(response => {
alert("Form submitted successfully!");
document.getElementById("contact-form").reset();
})
.catch(error => {
alert("There was an error submitting the form.");
console.error("Error:", error);
});
});
</script>
</body>
</html>
“It’s a great day at
Home Heating & Air Conditioning!”
