RSVP

<!-- SaveForm.io: rsvp (soft) -->
<style>
[data-sf-tpl="rsvp"] {
  all: revert;
  box-sizing: border-box;
  display: block;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #18181b;
  -webkit-font-smoothing: antialiased;
}
[data-sf-tpl="rsvp"] *,
[data-sf-tpl="rsvp"] *::before,
[data-sf-tpl="rsvp"] *::after {
  box-sizing: border-box;
}
[data-sf-tpl="rsvp"] input,
[data-sf-tpl="rsvp"] textarea,
[data-sf-tpl="rsvp"] select,
[data-sf-tpl="rsvp"] button {
  font: inherit;
  color: inherit;
  margin: 0;
}
[data-sf-tpl="rsvp"] button {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
[data-sf-tpl="rsvp"] label {
  display: block;
}
[data-sf-tpl="rsvp"].sf-rsvp--soft {
  max-width: 480px;
  background: #ffffff;
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 20px 50px -20px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.05);
}
[data-sf-tpl="rsvp"] .sf-rsvp__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #4338ca;
  margin: 0 0 8px 0;
}
[data-sf-tpl="rsvp"] .sf-rsvp__title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: #0f172a;
  letter-spacing: -0.02em;
}
[data-sf-tpl="rsvp"] .sf-rsvp__lede {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 24px 0;
}
[data-sf-tpl="rsvp"] .sf-rsvp__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
[data-sf-tpl="rsvp"] .sf-rsvp__field {
  margin-bottom: 14px;
}
[data-sf-tpl="rsvp"] .sf-rsvp__label {
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  margin-bottom: 6px;
}
[data-sf-tpl="rsvp"] .sf-rsvp__input,
[data-sf-tpl="rsvp"] .sf-rsvp__textarea,
[data-sf-tpl="rsvp"] .sf-rsvp__number {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 14px;
  outline: none;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
[data-sf-tpl="rsvp"] .sf-rsvp__textarea {
  resize: vertical;
  min-height: 80px;
}
[data-sf-tpl="rsvp"] .sf-rsvp__input:focus,
[data-sf-tpl="rsvp"] .sf-rsvp__textarea:focus,
[data-sf-tpl="rsvp"] .sf-rsvp__number:focus {
  border-color: #818cf8;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.18);
}
[data-sf-tpl="rsvp"] .sf-rsvp__attend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
[data-sf-tpl="rsvp"] .sf-rsvp__attend input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
[data-sf-tpl="rsvp"] .sf-rsvp__attend label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
[data-sf-tpl="rsvp"] .sf-rsvp__attend label:hover {
  background: #ffffff;
  border-color: #c7d2fe;
}
[data-sf-tpl="rsvp"] .sf-rsvp__attend input:checked + label {
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  border-color: #818cf8;
  color: #1e1b4b;
  font-weight: 600;
}
[data-sf-tpl="rsvp"] .sf-rsvp__button {
  width: 100%;
  padding: 12px 18px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  border-radius: 10px;
  border: 0;
  transition: filter 120ms ease, transform 120ms ease;
}
[data-sf-tpl="rsvp"] .sf-rsvp__button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
[data-sf-tpl="rsvp"] .sf-rsvp__honey {
  position: absolute;
  left: -9999px;
}
</style>
<form
  class="sf-rsvp--soft"
  data-sf-tpl="rsvp"
  action="https://saveform.io/api/submit/YOUR_FORM_ID"
  method="POST"
>
  <p class="sf-rsvp__eyebrow">You&apos;re invited</p>
  <h2 class="sf-rsvp__title">Will you join us?</h2>
  <p class="sf-rsvp__lede">Please reply by Friday so we can give the venue final numbers.</p>

  <input type="text" name="_honey" class="sf-rsvp__honey" tabindex="-1" autocomplete="off" />

  <div class="sf-rsvp__grid">
    <div>
      <label class="sf-rsvp__label" for="sf-rsvp-name">Name</label>
      <input id="sf-rsvp-name" class="sf-rsvp__input" type="text" name="name" required />
    </div>
    <div>
      <label class="sf-rsvp__label" for="sf-rsvp-email">Email</label>
      <input id="sf-rsvp-email" class="sf-rsvp__input" type="email" name="email" required />
    </div>
  </div>

  <div class="sf-rsvp__field">
    <div class="sf-rsvp__label">Attending</div>
    <div class="sf-rsvp__attend">
      <input type="radio" id="sf-rsvp-a-yes" name="attending" value="yes" required />
      <label for="sf-rsvp-a-yes">Yes</label>
      <input type="radio" id="sf-rsvp-a-maybe" name="attending" value="maybe" />
      <label for="sf-rsvp-a-maybe">Maybe</label>
      <input type="radio" id="sf-rsvp-a-no" name="attending" value="no" />
      <label for="sf-rsvp-a-no">No</label>
    </div>
  </div>

  <div class="sf-rsvp__field">
    <label class="sf-rsvp__label" for="sf-rsvp-guests">Number of guests (incl. you)</label>
    <input id="sf-rsvp-guests" class="sf-rsvp__number" type="number" name="guests" min="1" max="10" value="1" required />
  </div>

  <div class="sf-rsvp__field">
    <label class="sf-rsvp__label" for="sf-rsvp-diet">Dietary notes (optional)</label>
    <textarea id="sf-rsvp-diet" class="sf-rsvp__textarea" name="dietary" placeholder="Vegetarian, allergies, etc."></textarea>
  </div>

  <button class="sf-rsvp__button" type="submit">Send RSVP</button>
</form>