<h1>Complete your delivery details</h1>
<p>Please enter your shipping address so we can send your gift.</p>

<form id="gift-form" method="post" action="YOUR_ZAPIER_WEBHOOK_URL">
  <!-- Hidden fields to be filled from URL (script below) -->
  <input type="hidden" name="order_id" id="order_id" value="">
  <input type="hidden" name="recipient_email" id="recipient_email" value="">

  <label for="recipient_name">Full name *</label>
  <input type="text" id="recipient_name" name="recipient_name" required>

  <label for="address1">Address line 1 *</label>
  <input type="text" id="address1" name="address1" required>

  <label for="address2">Address line 2</label>
  <input type="text" id="address2" name="address2">

  <label for="city">City *</label>
  <input type="text" id="city" name="city" required>

  <label for="province">State / Province *</label>
  <input type="text" id="province" name="province" required>

  <label for="zip">ZIP / Postal code *</label>
  <input type="text" id="zip" name="zip" required>

  <label for="country">Country *</label>
  <input type="text" id="country" name="country" required>

  <label for="phone">Phone (optional)</label>
  <input type="tel" id="phone" name="phone">

  <label for="notes">Additional notes (optional)</label>
  <textarea id="notes" name="notes"></textarea>

  <button type="submit">Submit delivery details</button>
</form>

<script>
// Pre-fill order_id and recipient_email from URL query params
function getQueryParam(name) {
  const params = new URLSearchParams(window.location.search);
  return params.get(name) || '';
}
document.getElementById('order_id').value = getQueryParam('order') || '';
document.getElementById('recipient_email').value = getQueryParam('recipient') || '';
</script>