Appointment request form · 1.0.0

A clearly labeled appointment enquiry with a preferred date, contact details and a notes field.

HTML: open index.html as the complete specimen. Copy snippet.html into your page and load snippet.css after your existing CSS. Load snippet.js once with defer. demo.css and the surrounding demonstration content are not part of the reusable component. Replace example links and details.

Astro: copy Snippet.astro into src/components and import it in your page or shared layout.  The component uses scoped class prefixes and global CSS for its own markup. Use one instance per page; change all IDs/prefixes before duplicating a component. An Astro component is provided, not a complete Astro starter project.

The date is a preference supplied by the visitor. The form deliberately describes an appointment request, so integrating it does not imply that availability or confirmation is handled.

Forms: demonstration scripts enable fields only to test native validation and intercept submissions. For a real form, configure the action endpoint, remove data-demo-form, remove disabled from the fieldset, and remove the demonstration submit handler. Implement server validation, spam/rate limits, delivery and success/error responses on your backend. This package never sends email or confirms a booking.

Testing: check links, keyboard focus, narrow widths, zoom and actual content after integration. Included scoped styles avoid broad element resets; your existing CSS may still affect the result. Original code: MIT, attribution link optional. Keep the license notice in redistributions.