Form template

Appointment request that fits your site.

Request a time; confirm availability separately.

Make it yours

This is a request, not a confirmed booking. Do not collect medical details. Confirm the time with the visitor separately.

Native submission works without JavaScript. New non-spam submissions are emailed to the owner’s verified email after signing in once through an emailed link. You can also use the dashboard or integrations. File uploads: not yet.

HTML

<form class="contact-form" action="https://formdrop.wouldairecommend.workers.dev/f/YOUR_FORM_ID" method="POST">
  <label for="name">Your name</label>
  <input id="name" name="name" autocomplete="name" required>
  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required>
  <label for="preferred_time">Preferred date and time</label>
  <input id="preferred_time" name="preferred_time" type="text" required>
  <input name="_gotcha" tabindex="-1" autocomplete="off" hidden>
  <p>We will use these details to respond to your request.</p>
  <button type="submit">Send request</button>
</form>

CSS

.contact-form { max-width: 32rem; display: grid; gap: .75rem; font: 1rem/1.5 system-ui; }
.contact-form input, .contact-form textarea, .contact-form button { font: inherit; padding: .75rem; border: 1px solid #777; border-radius: .5rem; }
.contact-form textarea { min-height: 8rem; }
.contact-form button { background: #14684c; color: white; cursor: pointer; }
.contact-form :focus-visible { outline: 3px solid #0ea371; outline-offset: 3px; }

Live preview

Try the fields. This preview does not send data.

We will use these details to respond to your request.

Does this preview send data?
No. The preview stays on this page. Replace YOUR_FORM_ID in the copied code with your own endpoint to receive real submissions.
What do I need to change?
This is a request, not a confirmed booking. Do not collect medical details. Confirm the time with the visitor separately.

Connect your endpoint → · All templates