feat: add contribution to form

src/App.svelte

@@ -24,6 +24,7 @@
 
       const x = form.querySelector("#form-x").value;
       const reason = form.querySelector("#form-reason").value;
+      const contribution = form.querySelector("#form-contribution").value;
 
       const res = await fetch(
         `https://odoo.logos.co/website_mass_mailing/subscribe3`,
@@ -42,6 +43,7 @@
               subscription_type: "email",
               social: x || "",
               reason: reason || "",
+              contribution: contribution || "",
             },
           }),
         }

src/app.css

@@ -73,10 +73,19 @@ main > div > div:first-child {
   width: 270px;
 }
 
+.apply-form > label {
+  color: white;
+}
+
+.apply-form > p {
+  color: white;
+}
+
 .apply-input {
   padding: 4px 12px;
   background: transparent;
   border: 1px solid white;
+  margin-bottom: 12px;
 }
 
 .apply-submit {
@@ -84,6 +93,8 @@ main > div > div:first-child {
   background: transparent;
   color: white;
   border: 1px solid white;
+  margin-top: 12px;
+  margin-bottom: 24px;
 }
 
 @media (max-width: 768px) {

src/utils/commands.ts

@@ -12,10 +12,23 @@ export const commands: Record<
   apply: async () => {
     const htmlString = `<template>
 <form class="apply-form" onsubmit="handleSubmit(event)">
-  <input class="apply-input" id="form-name" placeholder="Name or pseudonym" />
-  <input class="apply-input" id="form-email" placeholder="Email (required)" type="email" required />
-  <input class="apply-input" id="form-x" placeholder="X handle" />
-  <input class="apply-input" id="form-reason" placeholder="Why do you want to join?" />
+  <p>Apply for membership.</p>
+  <br/>
+  <label for="form-name">Name or pseudonym</label>
+  <input class="apply-input" id="form-name" placeholder="Enter here" />
+  
+  <label for="form-email">Email (required)</label>
+  <input class="apply-input" id="form-email" placeholder="Enter here" type="email" required />
+  
+  <label for="form-x">X handle</label>
+  <input class="apply-input" id="form-x" placeholder="Enter here" />
+  
+  <label for="form-reason">Why do you want to join?</label>
+  <input class="apply-input" id="form-reason" placeholder="Enter here" />
+
+  <label for="form-contribution">What do you intend to give back to the community?</label>
+  <input class="apply-input" id="form-contribution" placeholder="Enter here" />
+  
   <button class="apply-submit">Submit</button>
 </form>
 </template>`;