join: split first and last name

i18n/en.yaml

@@ -68,7 +68,8 @@ events-previous: "Previous"
 more-info: "More info"
 join: "Join the Tech Workers Coalition"
 join-form: "Your details"
-name: "Name"
+first-name: "First name"
+last-name: "Last name"
 email: "Email"
 social-examples-1: "LinkedIn, personal website, blog, etc"
 social-examples-2: "Github, Instagram, Mastodon, etc"

i18n/nl.yaml

@@ -68,7 +68,8 @@ events-previous: "Eerder"
 more-info: "Meer info"
 join: "Doe mee met de Techwerkerscoalitie"
 join-form: "Je gegevens"
-name: "Naam"
+first-name: "Naam"
+last-name: "Last name"
 email: "Email"
 social-examples-1: "LinkedIn, persoonlijke website, blog, enz"
 social-examples-2: "Github, Instagram, Mastodon, enz"

layouts/_shortcodes/join-form.html

@@ -1,6 +1,6 @@
 <form
   id="join"
-  name="subscribe"
+  name="subscribe-v2"
   class="bg-red-600 ml-0 mt-4 max-w-2xl rounded-lg"
   data-netlify="true"
   action="{{ relLangURL "join/success" }}"
@@ -21,13 +21,24 @@ <h3 class="text-gray-900 mt-10 text-2xl font-bold">{{ i18n "join-form" }}</h3>
     />
   </div>
   <div class="mb-5">
-    <label for="name" class="text-gray-900 mb-2 block font-bold">{{ i18n "name" }}</label>
+    <label for="first-name" class="text-gray-900 mb-2 block font-bold">{{ i18n "first-name" }}</label>
     <input
       type="text"
-      id="name"
-      name="name"
+      id="first-name"
+      name="first-name"
       class="border-gray-300 bg-gray-50 text-gray-900 focus:border-blue-500 focus:ring-blue-500 block w-full rounded-lg border p-2.5"
-      placeholder="Youssra Jansen"
+      placeholder="Youssra"
+      required
+    />
+  </div>
+  <div class="mb-5">
+    <label for="last-name" class="text-gray-900 mb-2 block font-bold">{{ i18n "last-name" }}</label>
+    <input
+      type="text"
+      id="last-name"
+      name="last-name"
+      class="border-gray-300 bg-gray-50 text-gray-900 focus:border-blue-500 focus:ring-blue-500 block w-full rounded-lg border p-2.5"
+      placeholder="Jansen"
       required
     />
   </div>