Build a contact form with Tailwind CSS that adapts to the chosen department. Use a max-w-xl card. At the top, a heading and a muted line about response times. The first control is a row of four selectable department tiles — Sales, Support, Billing and Press — each a bordered rounded-xl button with a glyph and a label, the active one dark. Under it, name and email fields side by side, a subject field, a message textarea, and a contextual helper block that changes with the department: a bordered neutral-50 note giving the expected reply time, a suggested self-serve link and, for Support only, an extra input asking for the workspace name. Finish with a submit button whose label names the department and a footnote about attachments. Then add JavaScript that switches the active tile, swaps the helper copy and links from a map, shows or hides the workspace field, and updates the button label.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build a contact form with Tailwind CSS that adapts to the chosen department. Use a max-w-xl card. At the top, a heading and a muted line about response times. The first control is a row of four selectable department tiles — Sales, Support, Billing and Press — each a bordered rounded-xl button with a glyph and a label, the active one dark. Under it, name and email fields side by side, a subject field, a message textarea, and a contextual helper block that changes with the department: a bordered neutral-50 note giving the expected reply time, a suggested self-serve link and, for Support only, an extra input asking for the workspace name. Finish with a submit button whose label names the department and a footnote about attachments. Then add JavaScript that switches the active tile, swaps the helper copy and links from a map, shows or hides the workspace field, and updates the button label.
var DEPTS = {
sales: {
time: "Typical reply: within 1 business day",
copy: 'Faster still: <a href="#" class="underline underline-offset-2 hover:text-neutral-900">book a 20-minute call</a> and skip the back and forth.',
subject: "Pricing for 40 seats",
workspace: false,
label: "Send to sales",
},
support: {
time: "Typical reply: 41 minutes, 07:00–20:00 UTC",
copy: 'Many answers are already in the <a href="#" class="underline underline-offset-2 hover:text-neutral-900">help centre</a> — worth thirty seconds before you write.',
subject: "Sync failing on the Snowflake source",
workspace: true,
label: "Send to support",
},
billing: {
time: "Typical reply: within 1 business day",
copy: 'Invoices, VAT numbers and payment methods can be changed yourself in <a href="#" class="underline underline-offset-2 hover:text-neutral-900">billing settings</a>.',
subject: "VAT number on the August invoice",
workspace: false,
label: "Send to billing",
},
press: {
time: "Typical reply: within 2 business days",
copy: 'Logos, screenshots and boilerplate live in the <a href="#" class="underline underline-offset-2 hover:text-neutral-900">press kit</a>.',
subject: "Interview request",
workspace: false,
label: "Send to press",
},
};
var tiles = Array.prototype.slice.call(document.querySelectorAll(".dept"));
var time = document.getElementById("helperTime");
var copy = document.getElementById("helperCopy");
var subject = document.getElementById("subjectField");
var workspace = document.getElementById("workspaceField");
var submit = document.getElementById("deptSubmit");
function select(key) {
var d = DEPTS[key];
tiles.forEach(function (tile) {
var on = tile.dataset.dept === key;
tile.classList.toggle("bg-neutral-900", on);
tile.classList.toggle("border-neutral-900", on);
tile.classList.toggle("border-neutral-200", !on);
tile.querySelector("span:first-child").classList.toggle("text-white", on);
tile.querySelector("span:first-child").classList.toggle("text-neutral-700", !on);
tile.querySelector("span:last-child").classList.toggle("text-white", on);
tile.querySelector("span:last-child").classList.toggle("text-neutral-700", !on);
});
time.textContent = d.time;
copy.innerHTML = d.copy;
subject.placeholder = d.subject;
workspace.classList.toggle("hidden", !d.workspace);
submit.textContent = d.label;
}
tiles.forEach(function (tile) {
tile.addEventListener("click", function () {
select(tile.dataset.dept);
});
});
select("sales");
