163 lines
6.6 KiB
HTML
163 lines
6.6 KiB
HTML
{% extends "base.html" %}
|
||
{% block content %}
|
||
<section class="max-w-3xl mx-auto">
|
||
<!-- Header -->
|
||
<div class="card glass p-6 mb-8">
|
||
<h1 class="text-2xl font-bold">Get a Quick Project Estimate</h1>
|
||
<p class="text-white/70 mt-2">
|
||
Answer a few simple questions—no tech talk required. We’ll review and email you a tailored quote.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Form -->
|
||
<form action="{{ url_for('submit') }}" method="post" class="space-y-6">
|
||
|
||
<!-- Your info -->
|
||
<div class="card glass p-6">
|
||
<h2 class="font-semibold text-lg mb-3">About you</h2>
|
||
<div class="grid sm:grid-cols-2 gap-4">
|
||
<div>
|
||
<label for="name">Your name *</label>
|
||
<input id="name" name="name" required class="w-full mt-1" placeholder="Jane Doe">
|
||
</div>
|
||
<div>
|
||
<label for="email">Email *</label>
|
||
<input id="email" name="email" type="email" required class="w-full mt-1" placeholder="you@example.com">
|
||
</div>
|
||
<div>
|
||
<label for="phone">Phone (optional)</label>
|
||
<input id="phone" name="phone" class="w-full mt-1" placeholder="(optional)">
|
||
</div>
|
||
<div>
|
||
<label for="company">Business or organization (optional)</label>
|
||
<input id="company" name="company" class="w-full mt-1" placeholder="(optional)">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- What do you need -->
|
||
<div class="card glass p-6">
|
||
<h2 class="font-semibold text-lg mb-3">What do you need?</h2>
|
||
<p class="text-white/60 text-sm mb-4">Pick the one that fits best. We’ll handle the details later.</p>
|
||
<div class="grid sm:grid-cols-2 gap-3">
|
||
{% for val, label, hint in [
|
||
('simple-site', 'A basic website', 'Home, About, Contact'),
|
||
('pro-site', 'A website with extras', 'Portfolio, blog, more pages'),
|
||
('online-form', 'An online form', 'Collect info, send to email/Sheet'),
|
||
('sell-online', 'Sell online', 'Checkout / payments'),
|
||
('fix-or-improve', 'Fix or improve something', 'Speed, bugs, cleanup'),
|
||
('it-help', 'IT setup/help', 'Email, domains, backups, networks'),
|
||
('custom-app', 'A custom tool/app', 'Dashboards, portals, automations'),
|
||
('not-sure', 'Not sure yet', 'I need guidance')
|
||
] %}
|
||
<label class="flex items-start gap-3 p-3 rounded border border-white/10 hover:border-white/30 cursor-pointer">
|
||
<input class="mt-1" type="radio" name="need" value="{{ val }}" required>
|
||
<span>
|
||
<span class="font-medium">{{ label }}</span><br>
|
||
<span class="text-white/60 text-sm">{{ hint }}</span>
|
||
</span>
|
||
</label>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scope -->
|
||
<div class="card glass p-6">
|
||
<h2 class="font-semibold text-lg mb-3">How big is this?</h2>
|
||
<p class="text-white/60 text-sm mb-4">A rough guess is perfect.</p>
|
||
<div class="grid sm:grid-cols-3 gap-3">
|
||
{% for val, label, hint in [
|
||
('small', 'Small', '~1–3 key pages or a simple task'),
|
||
('medium', 'Medium', '~4–8 pages or a few features'),
|
||
('large', 'Large', 'Many pages/features or complex work')
|
||
] %}
|
||
<label class="flex items-start gap-3 p-3 rounded border border-white/10 hover:border-white/30 cursor-pointer">
|
||
<input class="mt-1" type="radio" name="scope_size" value="{{ val }}" required>
|
||
<span>
|
||
<span class="font-medium">{{ label }}</span><br>
|
||
<span class="text-white/60 text-sm">{{ hint }}</span>
|
||
</span>
|
||
</label>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Timeline -->
|
||
<div class="card glass p-6">
|
||
<h2 class="font-semibold text-lg mb-3">When do you need it?</h2>
|
||
<div class="grid sm:grid-cols-2 md:grid-cols-4 gap-3">
|
||
{% for val, label in [
|
||
('flexible', 'Flexible'),
|
||
('soon', 'Soon (2–4 weeks)'),
|
||
('rush', 'Rush (under 2 weeks)'),
|
||
('critical', 'Urgent (ASAP)')
|
||
] %}
|
||
<label class="flex items-center gap-2 p-3 rounded border border-white/10 hover:border-white/30 cursor-pointer">
|
||
<input type="radio" name="timeline" value="{{ val }}" required>
|
||
<span>{{ label }}</span>
|
||
</label>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Helpful extras -->
|
||
<div class="card glass p-6">
|
||
<h2 class="font-semibold text-lg mb-3">Would any of these help?</h2>
|
||
<p class="text-white/60 text-sm mb-4">Optional add-ons to make life easier.</p>
|
||
<div class="grid sm:grid-cols-2 gap-2">
|
||
{% for val, label in [
|
||
('content', 'Write or improve the words'),
|
||
('branding', 'Light logo/branding help'),
|
||
('training', 'Walkthrough & training'),
|
||
('care', 'Ongoing care & updates')
|
||
] %}
|
||
<label class="flex items-center gap-2">
|
||
<input type="checkbox" name="extras" value="{{ val }}">
|
||
<span>{{ label }}</span>
|
||
</label>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Budget comfort -->
|
||
<div class="card glass p-6">
|
||
<h2 class="font-semibold text-lg mb-3">Budget comfort zone</h2>
|
||
<p class="text-white/60 text-sm mb-4">This helps us suggest the right approach. Totally fine if you’re unsure.</p>
|
||
<select class="w-full" name="budget_feel">
|
||
<option value="unsure" selected>I’m not sure yet</option>
|
||
<option value="under-2k">Under $2k</option>
|
||
<option value="2k-5k">$2k – $5k</option>
|
||
<option value="5k-10k">$5k – $10k</option>
|
||
<option value="10k-plus">$10k+</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Notes -->
|
||
<div class="card glass p-6">
|
||
<h2 class="font-semibold text-lg mb-3">Anything else?</h2>
|
||
<textarea name="description" rows="4" class="w-full" placeholder="Links to examples you like, goals, must-haves, nice-to-haves…"></textarea>
|
||
</div>
|
||
|
||
<!-- Submit -->
|
||
<div class="flex items-center justify-between">
|
||
<p class="text-white/50 text-xs">We’ll never share your info. You’ll get a personal email from us with next steps.</p>
|
||
<button class="btn bg-accent font-semibold" type="submit">Get my estimate</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
|
||
<script>
|
||
// tiny enhancement: if user picks “sell online”, preselect “medium” scope for them
|
||
const needRadios = document.querySelectorAll('input[name="need"]');
|
||
const scopeRadios = document.querySelectorAll('input[name="scope_size"]');
|
||
needRadios.forEach(r => {
|
||
r.addEventListener('change', () => {
|
||
if (r.value === 'sell-online' && ![...scopeRadios].some(s=>s.checked)) {
|
||
[...scopeRadios].find(s => s.value==='medium').checked = true;
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
{% endblock %}
|
||
|