← back to Consulting Rentv Com
public/intake.html
155 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>New Website + Social — Intake · RENTV.com</title>
<style>
:root{--ink:#14110e;--paper:#f6f2ec;--gold:#a9884f;--line:#dcd3c5}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink);padding:0}
header{padding:40px 24px 20px;text-align:center;border-bottom:1px solid var(--line);background:#fff}
header .eyebrow{letter-spacing:.32em;text-transform:uppercase;font-size:11px;color:var(--gold)}
header h1{font-family:Georgia,serif;font-weight:400;font-size:30px;margin:.3em 0 .1em}
header p{color:#6b6357;margin:0}
form{max-width:760px;margin:0 auto;padding:28px 24px 80px}
fieldset{border:1px solid var(--line);background:#fff;margin:18px 0;padding:20px 22px}
legend{font-family:Georgia,serif;font-size:18px;padding:0 10px;color:var(--gold)}
label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#7a7266;margin:14px 0 5px;font-weight:600}
input,textarea,select{width:100%;padding:11px 12px;border:1px solid var(--line);background:#faf8f4;font-size:15px;font-family:inherit;border-radius:2px}
textarea{min-height:76px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.hint{font-size:12px;color:#9a9082;text-transform:none;letter-spacing:0;font-weight:400;margin-top:4px}
.check{display:flex;align-items:center;gap:8px;margin-top:10px}
.check input{width:auto}
button{background:var(--ink);color:var(--paper);border:0;padding:15px 34px;letter-spacing:.16em;text-transform:uppercase;font-size:13px;cursor:pointer;margin-top:8px}
button:hover{background:var(--gold)}
#done{display:none;background:#eef6ee;border:1px solid #b7d6b7;padding:18px;margin:18px 0;color:#25632a}
</style>
</head>
<body>
<header>
<div class="eyebrow">Consulting Intake</div>
<h1>Let's build your website & social</h1>
<p>Answer what you can — this spawns your new site concepts and a social growth plan. No current website required.</p>
</header>
<form id="f">
<div id="done"></div>
<fieldset><legend>The Business</legend>
<div class="two">
<div><label>Business name*</label><input name="business_name" required></div>
<div><label>Industry / what you do</label><input name="industry" placeholder="e.g. car wash, yacht charters, law firm"></div>
</div>
<div class="two">
<div><label>City / service area</label><input name="location"></div>
<div><label>In business since</label><input name="since" placeholder="year"></div>
</div>
<label>One-line pitch (tagline)</label><input name="tagline" placeholder="What makes you the obvious choice?">
</fieldset>
<fieldset><legend>Contact</legend>
<div class="two">
<div><label>Your name</label><input name="contact_name"></div>
<div><label>Role</label><input name="contact_role"></div>
</div>
<div class="two">
<div><label>Email</label><input name="contact_email" type="email"></div>
<div><label>Phone</label><input name="contact_phone"></div>
</div>
</fieldset>
<fieldset><legend>Current Presence</legend>
<div class="check"><input type="checkbox" id="nosite" name="no_website" value="1"><label for="nosite" style="margin:0;text-transform:none;letter-spacing:0;font-weight:400">We don't have a website yet — build one from scratch</label></div>
<label>Current website (if any)</label><input name="current_website" placeholder="https://">
<div class="hint">Social handles — leave blank what you don't have; we'll set up the rest.</div>
<div class="two">
<div><label>Instagram</label><input name="ig"></div>
<div><label>Facebook</label><input name="fb"></div>
<div><label>TikTok</label><input name="tt"></div>
<div><label>YouTube</label><input name="yt"></div>
<div><label>LinkedIn</label><input name="li"></div>
<div><label>Google Business Profile</label><input name="gbp"></div>
</div>
</fieldset>
<fieldset><legend>Goals & Growth</legend>
<label>Top goals (one per line)</label><textarea name="goals" placeholder="More bookings Rank on Google Grow Instagram"></textarea>
<label>Who is your ideal customer?</label><textarea name="audience"></textarea>
<label>Direct competitors (one per line)</label><textarea name="competitors"></textarea>
</fieldset>
<fieldset><legend>Brand & Aesthetic</legend>
<label>Aesthetic direction</label>
<select name="aesthetic">
<option value="">— pick a starting feel —</option>
<option>Luxury / editorial</option>
<option>Modern / minimal</option>
<option>Bold / energetic</option>
<option>Warm / approachable</option>
<option>Classic / trustworthy</option>
</select>
<div class="hint">We'll generate several concept versions of your site in different high-end looks to choose from.</div>
<label>Brand colors / anything you love or hate</label><textarea name="brand_notes"></textarea>
<label>Assets you have (logo, photos, video?)</label><textarea name="assets"></textarea>
</fieldset>
<fieldset><legend>Command Center — assign to your CRM</legend>
<div class="hint">These are the deliverable modules in your portal. Check the ones you want us to build out and assign as tracked items in your CRM — pick one, a few, or all.</div>
<div class="check" style="margin-top:14px"><input type="checkbox" id="mod_all"><label for="mod_all" style="margin:0;text-transform:none;letter-spacing:0;font-weight:600">Select all</label></div>
<div id="modgrid" style="display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-top:10px"></div>
</fieldset>
<button type="submit">Submit intake →</button>
</form>
<script>
// Mirrors the portal hamburger (build.mjs CATS) so the client can assign any
// deliverable module to their CRM. Keep in sync with CATS if the menu changes.
var MODULES = [
['summary','Executive Summary'],['swot','SWOT Analysis'],['reputation','Reputation & Authority'],
['empire','The Empire & Sublease.com'],['competitors','Competitors'],['advertising','Where to Advertise'],
['timing','Timing & Cadence'],['audit','Website Audit'],['teardown','Page-by-Page Teardown'],
['social','Social Media Audit'],['suggested','Suggested New Websites'],['partners','Unlikely Partners'],
['revenue','Unlikely Revenue'],['videos','Video + Brand Films'],['dealdesk','Live Deal Desk (demo)'],
['roadmap','90-Day Roadmap']
];
(function(){
var grid = document.getElementById('modgrid');
grid.innerHTML = MODULES.map(function(m){
return '<label class="check" style="margin:0;text-transform:none;letter-spacing:0;font-weight:400">'
+ '<input type="checkbox" class="modchk" value="'+m[0]+'" data-label="'+m[1]+'"> '+m[1]+'</label>';
}).join('');
document.getElementById('mod_all').addEventListener('change', function(e){
document.querySelectorAll('.modchk').forEach(function(c){ c.checked = e.target.checked; });
});
})();
document.getElementById('f').addEventListener('submit', async (e) => {
e.preventDefault();
const fd = new FormData(e.target);
const o = Object.fromEntries(fd.entries());
const payload = {
business_name: o.business_name, industry: o.industry, location: o.location, since: o.since,
tagline: o.tagline, contact_name: o.contact_name, contact_role: o.contact_role,
contact_email: o.contact_email, contact_phone: o.contact_phone,
current_website: o.no_website ? null : (o.current_website || null),
no_website: !!o.no_website,
socials: { instagram: o.ig||null, facebook: o.fb||null, tiktok: o.tt||null, youtube: o.yt||null, linkedin: o.li||null, google_business: o.gbp||null },
goals: (o.goals||'').split('\n').map(s=>s.trim()).filter(Boolean),
audience: o.audience, competitors: (o.competitors||'').split('\n').map(s=>s.trim()).filter(Boolean),
aesthetic: o.aesthetic, brand_notes: o.brand_notes, assets: o.assets,
crm_modules: Array.prototype.map.call(document.querySelectorAll('.modchk:checked'), function(c){ return { id: c.value, label: c.getAttribute('data-label') }; }),
};
const r = await fetch('/api/intake', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(payload) });
const j = await r.json();
const d = document.getElementById('done');
d.textContent = j.message || 'Received — thank you.';
d.style.display = 'block';
d.scrollIntoView({ behavior:'smooth' });
e.target.reset();
});
</script>
</body>
</html>