Kodza
Browse · 200

Book a Visit

A booking form: the coming days, the free times worked out from the opening hours, name and email. On send it rolls up into the answer, with Add to calendar as an .ics file.

View the code Ask your AI
Forms No dependencies booking formappointment bookingtime slot pickerschedule a visitopening hoursadd to calendarics filereservation formdate pickeravailability Added Nov 2026
/anim/book-a-visit/ GitHub Fullscreen

With your AI

Just ask.

Say it to your AI. It gets the exact code below, not its best guess, and knows where it goes.

Add the Kodza Book a Visit to my page.

Not plugged in yet?
claude mcp add -t http kodza https://kodza.dev/api/mcp
Also in Codex, Cursor and VS Code.
kodza-book-a-visit.html 
<form class="kodza-book-visit" action="#" method="post" data-place="Es Pinar" data-address="Carrer de la Roca 14, 07460 Pollença, Mallorca" data-hours="mon closed; tue-fri 10:00-14:00, 16:00-19:00; sat 10:00-14:00; sun closed" data-length="40" data-timezone="Europe/Madrid" data-days="7" data-notice="60" data-taken="tue 11:20, wed 16:40, thu 10:40, thu 16:00, fri 11:20, sat 10:00">
  <p class="kodza-book-visit__eyebrow">Visits · 40 min</p>
  <h2 class="kodza-book-visit__title" data-done="Thank you, {name}.">Come and see Es&nbsp;Pinar at the right hour.</h2>
  <div class="kodza-book-visit__stage">
    <div class="kodza-book-visit__form">
      <div class="kodza-book-visit__fields kodza-book-visit__fields--when">
        <label class="kodza-book-visit__box kodza-book-visit__box--fixed">
          <input class="kodza-book-visit__input" type="date" name="date" required>
          <span class="kodza-book-visit__label">Day</span>
        </label>
        <label class="kodza-book-visit__box kodza-book-visit__box--fixed">
          <input class="kodza-book-visit__input" type="time" name="time" required>
          <span class="kodza-book-visit__label">Time</span>
        </label>
      </div>
      <div class="kodza-book-visit__fields kodza-book-visit__fields--who">
        <label class="kodza-book-visit__box">
          <input class="kodza-book-visit__input" type="text" name="name" autocomplete="name" placeholder=" " required>
          <span class="kodza-book-visit__label">Your name</span>
        </label>
        <label class="kodza-book-visit__box">
          <input class="kodza-book-visit__input" type="email" name="email" autocomplete="email" placeholder=" " required>
          <span class="kodza-book-visit__label">Email</span>
        </label>
      </div>
      <div class="kodza-book-visit__foot">
        <p class="kodza-book-visit__note" aria-live="polite">
          <span class="kodza-book-visit__help">We confirm by email. No call.</span>
          <span class="kodza-book-visit__error"></span>
        </p>
        <button class="kodza-book-visit__send" type="submit">Book the visit</button>
      </div>
    </div>
    <div class="kodza-book-visit__done" hidden>
      <p class="kodza-book-visit__when">Your visit</p>
      <p class="kodza-book-visit__text">The details are on their way to <span data-value="email">your inbox</span>. Plans change? Reply to that email. Nobody will call you.</p>
      <div class="kodza-book-visit__actions">
        <a class="kodza-book-visit__calendar" href="#" download="visit.ics">Add to calendar</a>
        <button class="kodza-book-visit__again" type="reset">Book another</button>
      </div>
    </div>
  </div>
</form>

Checked

Checked before you paste.

Robots poked at it before you did. Every component goes through the same checks, and again each time it changes.

What ranLast run
Accessibilityaxe-core 4.10.2: the WCAG 2.1 A and AA rules, plus best practices. 0 issues
KeyboardThe Tab key gets there, and the focus ring shows when it does. Passed
Reduced motionTurn on reduced motion and what moved just appears. Nothing loops. Passed
Light and darkThe same checks on both themes, contrast included. Passed
WordPressPasted into Twenty Twenty-Five, Twenty Twenty-One, Astra, Blocksy, GeneratePress, Hello Elementor, Kadence and OceanWP. Nothing to flag. 8 / 8 themes
Robots checked this. A human with VoiceOver hasn't yet.
KeyboardPress them in the preview
On a day
  • Moves to the previous or next open day←/→
On a time
  • Moves to the previous or next free time←/→
  • Moves a row up or down↑/↓
  • Goes to the first or last free timeHome/End
In a field
  • Books the visit, or shows what is missingEnter

More like this

More in Forms

See all Forms Request a component