Modal Form

Fetch pattern JSON: curl https://webspire.de/patterns/modal/form.json

form.html

<div class="flex min-h-64 items-center justify-center">
  <button type="button" onclick="this.nextElementSibling.hidden=false" class="rounded-lg bg-[var(--ws-modal-action-bg)] px-5 py-2.5 text-sm font-medium text-[var(--ws-modal-action-text)] shadow transition hover:opacity-90">Contact Us</button>
  <div class="ws-modal fixed inset-0 z-50 flex items-center justify-center bg-[var(--ws-modal-overlay)] backdrop-blur-sm" hidden>
    <div role="dialog" aria-modal="true" aria-labelledby="modal-form-title" class="mx-4 w-full max-w-md rounded-2xl bg-[var(--ws-modal-bg)] p-6 shadow-xl">
      <h2 id="modal-form-title" class="text-lg font-semibold text-[var(--ws-modal-text)]">Contact Us</h2>
      <p class="mt-1 text-sm text-[var(--ws-modal-text-soft)]">Fill out the form below and we will get back to you.</p>
      <form class="mt-5 space-y-4">
        <div>
          <label for="modal-name" class="block text-sm font-medium text-[var(--ws-modal-text)]">Name</label>
          <input type="text" id="modal-name" name="name" placeholder="Your name" class="mt-1 w-full rounded-lg border border-[var(--ws-modal-border)] bg-[var(--ws-modal-bg)] px-3 py-2 text-sm text-[var(--ws-modal-text)] placeholder-[var(--ws-modal-text-soft)] transition focus:border-[var(--ws-modal-action-bg)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-modal-action-bg)]/20" />
        </div>
        <div>
          <label for="modal-email" class="block text-sm font-medium text-[var(--ws-modal-text)]">Email</label>
          <input type="email" id="modal-email" name="email" placeholder="you@example.com" class="mt-1 w-full rounded-lg border border-[var(--ws-modal-border)] bg-[var(--ws-modal-bg)] px-3 py-2 text-sm text-[var(--ws-modal-text)] placeholder-[var(--ws-modal-text-soft)] transition focus:border-[var(--ws-modal-action-bg)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-modal-action-bg)]/20" />
        </div>
        <div>
          <label for="modal-message" class="block text-sm font-medium text-[var(--ws-modal-text)]">Message</label>
          <textarea id="modal-message" name="message" rows="3" placeholder="Your message..." class="mt-1 w-full rounded-lg border border-[var(--ws-modal-border)] bg-[var(--ws-modal-bg)] px-3 py-2 text-sm text-[var(--ws-modal-text)] placeholder-[var(--ws-modal-text-soft)] transition focus:border-[var(--ws-modal-action-bg)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-modal-action-bg)]/20"></textarea>
        </div>
        <div class="flex justify-end gap-3 pt-2">
          <button type="button" onclick="this.closest('.ws-modal').hidden=true" class="rounded-lg border border-[var(--ws-modal-border)] px-4 py-2 text-sm font-medium text-[var(--ws-modal-text-soft)] transition hover:bg-white/5">Cancel</button>
          <button type="submit" onclick="this.closest('.ws-modal').hidden=true" class="rounded-lg bg-[var(--ws-modal-action-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-modal-action-text)] transition hover:opacity-90">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>

Details

Family

modal

Tier

enhanced

Kind

component

Extends

modal/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste Requires JS

Stable Published

modaldialogformcontactinputoverlay

Slots

Name	Required	Description
title	Yes	Modal heading text.
form	Yes	Form with input fields.
actions	Yes	Cancel and submit buttons.

Modal dialog with an embedded contact form featuring name, email, and message fields. Extends the base modal with a form-oriented layout.