Sign-up Form
<div class="max-w-lg mx-auto bg-white p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold mb-4 text-center">Sign Up for Trash Bin Service</h2>
<p class="mb-6 text-center text-gray-600">$29.95/month — Includes 4 weeks of curbside transport</p>
<form method="post" action="/cart/add">
<!-- Hidden product info (replace with your product ID or handle) -->
<input type="hidden" name="id" value="{{ all_products['trash-bin-service'].variants.first.id }}">
<input type="hidden" name="quantity" value="1">
<!-- Customer Info -->
<label for="name" class="block mb-2 font-medium">Full Name</label>
<input id="name" type="text" name="properties[Full Name]" required class="w-full border rounded p-2 mb-4">
<label for="email" class="block mb-2 font-medium">Email</label>
<input id="email" type="email" name="properties[Email]" required class="w-full border rounded p-2 mb-4">
<label for="phone" class="block mb-2 font-medium">Phone</label>
<input id="phone" type="tel" name="properties[Phone]" required class="w-full border rounded p-2 mb-4">
<label for="address" class="block mb-2 font-medium">Service Address</label>
<textarea id="address" name="properties[Service Address]" required class="w-full border rounded p-2 mb-4"></textarea>
<!-- Trash Day -->
<label for="trash-day" class="block mb-2 font-medium">Trash Pickup Day</label>
<select id="trash-day" name="properties[Trash Day]" required class="w-full border rounded p-2 mb-6">
<option value="">Select...</option>
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
</select>
<!-- Submit -->
<button type="submit" class="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700">
Sign Up & Subscribe for $29.95/month
</button>
<p class="mt-4 text-xs text-center text-gray-500">
You’ll be billed automatically every 4 weeks until canceled.
</p>
</form>
</div>