You Might Also Like
Learn Coding Visually
Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.
HTML Playground42 lessons · Click-based · Live preview
CSS PlaygroundLearn CSS with a live editor
JavaScript Playground60 lessons · DOM · Async · Canvas
React PlaygroundLearn React with a live code editor
GSAP PlaygroundLearn GSAP animation interactively
SVG Playground44 lessons · shapes · paths · animation
SCSS Playground45 lessons · Sass modules · tokens
Tailwind PlaygroundLearn Tailwind CSS with a live editor
Bootstrap 5 Playground50 lessons · live previewInterview Scheduler Form — Free Slot Picker & Booking Summary UI
Interview Scheduler Form · Forms · Plain HTML, CSS & JS · Live preview
What's included
Features
About this UI Snippet
Interview Scheduler Form — Interviewer, Duration & Slot Picker
The interview scheduler form is what a candidate or coordinator fills out to book a slot: pick an interviewer, a duration, and an open time — then see a clean confirmation. This snippet builds the whole flow in plain HTML, CSS, and JavaScript.
Three independent choices, one form
An interviewer <select>, a row of duration toggle buttons, and a grid of time-slot buttons are all independently interactive, but only the submit handler checks that the required ones (interviewer and slot) are actually filled before proceeding — so partial progress never silently fails.
Slots that reflect real availability
Several .isf-slot buttons carry disabled and an .isf-slot--taken class with a strikethrough — they're excluded from the click handler's querySelectorAll('.isf-slot:not(:disabled)') selector entirely, so a taken slot can never accidentally become selectable through a stray event.
Toggle-button selection pattern
Both the duration and slot pickers use the same pattern: clicking a button clears the isf-active class from all its siblings, then applies it only to the clicked one. It's a single-select toggle group built from plain buttons instead of radio inputs, which makes the larger touch targets and custom styling easy.
Inline validation, not a popup
Submitting without an interviewer or slot reveals an inline error message rather than a browser alert, and picking a slot afterward clears that error immediately — validation feedback appears and disappears in the same visual space the user is already looking at.
A real submitted state
On valid submit, the form is hidden and replaced by a summary card showing exactly what was booked, with an "Edit details" button that swaps back to the form — so the interaction has a genuine before/after state instead of just a success toast.
Customizing it
Wire the submit handler to your booking API, generate the slot grid dynamically from a real calendar/availability feed, or add multi-day date tabs above the slot grid. Pair it with an availability scheduler for the interviewer's side, or a meeting scheduler poll for group availability.
Build with AI
Build, Understand, Optimize, and Extend It With AI
Booking flows have a lot of small state-management decisions bundled together, so it's worth pasting this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and asking it to explain why the taken time slots are excluded at the querySelectorAll level rather than just styled as disabled, and how the single-select toggle-button pattern (clearing an active class from all siblings before adding it to one) differs from using native radio inputs. The same assistant is useful for hardening the flow for a real product — ask it whether the interviewer dropdown should filter which slots show as available (so a busy interviewer's booked times gray out dynamically), how to add timezone handling if interviewer and candidate are in different zones, or how to debounce/lock the submit button to prevent a double-booking race condition when the confirmation request is in flight.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Build an "interview scheduler form" in plain HTML, CSS, and JavaScript — no frameworks, no dependencies.
Requirements:
- A form with: a native select dropdown to choose an interviewer, a row of toggle buttons to choose interview duration (e.g. 30/45/60 minutes, single-select — clicking one deselects the others), and a grid of time-slot toggle buttons for a specific date (single-select).
- Several time slots must be marked unavailable via the disabled attribute plus a distinct visual style (e.g. strikethrough, reduced opacity) — and the click-handling JavaScript must specifically query only the non-disabled slot buttons when attaching listeners, so disabled slots can never become selected.
- On submit, validate that both an interviewer and a time slot are selected. If either is missing, prevent the default form submission and show an inline error message already present in the page layout (not a native alert/confirm dialog) rather than proceeding; selecting a slot afterward should clear that error automatically.
- On successful submit, hide the form and show a separate confirmation/summary panel displaying the chosen interviewer, the date and time, and the duration — with an "edit details" button that hides the summary and re-shows the form.
- Keep it in a dark theme, and make sure the JavaScript only references classnames/ids that exist in the HTML you write.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
Step by step
How to Use
- 1Paste the HTML, CSS, and JSA scheduler form with interviewer, duration, and slots render.
- 2Pick an interviewerSelect from the dropdown.
- 3Choose a durationClick 30, 45, or 60 minutes.
- 4Click an open time slotTaken slots are struck through and disabled.
- 5Submit the formMissing fields show an inline error instead of proceeding.
- 6Review the confirmationA summary card replaces the form; "Edit details" reopens it.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
Taken slot buttons carry both the disabled attribute and an isf-slot--taken class in the markup. The click-handler loop only attaches listeners to buttons matched by querySelectorAll('.isf-slot:not(:disabled)'), so disabled slots never receive a click handler at all — they are excluded structurally, not just styled to look unavailable while remaining clickable.
The submit handler calls e.preventDefault(), checks whether an interviewer is selected and a slot was chosen, and if either is missing, adds an isf-show class to a paragraph that's already in the form's layout — CSS toggles its display. That keeps the user's attention and scroll position exactly where they are, rather than interrupting with a native alert() dialog that has to be dismissed separately.
The same click handler that marks a slot as selected also removes the isf-show class from the error message, on the assumption that selecting a slot resolves the "no slot selected" case. If the interviewer field is still empty, submitting again will re-trigger the error — so the message only disappears when the user has actually taken corrective action.
Replace the hardcoded .isf-slot buttons with ones generated in JavaScript from an array of { time, available } objects returned by your backend — set the disabled attribute and isf-slot--taken class based on available: false for each, then attach the same click handler to the resulting DOM nodes. The duration and validation logic don't need to change.
Hold interviewer, duration, and selectedSlot in component state, render the slot grid from an array (mapping unavailable slots to disabled buttons), and drive the submitted/summary view with a boolean flag instead of toggling the hidden attribute directly. The validation and summary-rendering logic translate directly into your framework's conditional rendering.