Collect first/last name on the course enroll form

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

layouts/partials/course-enroll-form.html

@@ -1,6 +1,12 @@
 {{ $id := .id }}
 {{ $page := .page }}
 <form id="enroll-form-{{ $id }}" class="enroll-form">
+  <label for="first-name-{{ $id }}">First name</label>
+  <input type="text" id="first-name-{{ $id }}" name="first_name" required autocomplete="given-name">
+
+  <label for="last-name-{{ $id }}">Last name (optional)</label>
+  <input type="text" id="last-name-{{ $id }}" name="last_name" autocomplete="family-name">
+
   <label for="email-{{ $id }}">Email</label>
   <input type="email" id="email-{{ $id }}" name="email" required autocomplete="email" placeholder="you@example.com">
 
@@ -28,7 +34,11 @@
       fetch("{{ $page.Site.Params.eec_base_url }}/courses/" + slug + "/enroll", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ email: form.email.value })
+        body: JSON.stringify({
+          email: form.email.value,
+          first_name: form.first_name.value,
+          last_name: form.last_name.value
+        })
       }).then(function (res) {
         if (res.ok) {
           form.reset();