Simplify signup form

Author: shushugah

_includes/main.scss

@@ -451,7 +451,38 @@ h3 {
 
 form {
   border-radius: 4px;
-  padding: 1rem;
+  padding: 0 1.5rem 1rem 1.5rem;
+  margin: auto;
+
+  label {
+    margin: 0;
+    width: 100%;
+
+    div, input::placeholder {
+      padding-top: 1rem;
+      padding-bottom: 2px;
+      margin-left: 5px;
+    }
+
+    input::placeholder {
+      text-align: center;
+    }
+  }
+  
+  input, select[name=nearby-chapter] {
+    &:focus{
+      outline: none;
+      border: 1px solid $red;
+    } 
+  }
+  
+  input, select[name=nearby-chapter], input[type=submit] {
+    width: 100%;
+    
+    &#outreach {
+      width: 1rem;
+    }
+  }
 }
 
 label {
@@ -499,13 +530,12 @@ label {
   }
 }
 
-input[type="email"],
-input[type="text"],
-input[type="url"],
+input[type=email],
+input[type=text],
+input[type=url],
 select {
   border: 1px solid;
   border-radius: 4px;
-  color: $grey;
   padding: 0.75rem;
 
   @include mobile {
@@ -514,12 +544,11 @@ select {
   }
 }
 
-input[type="submit"],
+input[type=submit],
 .pagination {
   border-radius: 4px;
   border: 0;
   font-weight: 500;
-  margin-top: 20px;
   padding: 10px 20px;
 }
 
@@ -642,19 +671,20 @@ hr {
   form {
     background-color: $grey3;
   }
-  input[type="submit"] {
+  input[type=submit] {
     background: $grey2;
     color: $white;
 
     &:hover {
       background-color: $red;
     }
   }
-  input[type="email"],
-  input[type="text"],
-  input[type="url"],
+  input[type=email],
+  input[type=text],
+  input[type=url],
   select {
-    border-color: #ccc;
+    color: $grey;
+    border-color: $black;
   }
   .primaryBg {
     background-color: $white;
@@ -708,17 +738,17 @@ hr {
   hr {
     border-bottom: 1px solid $grey;
   }
-  input[type="submit"] {
+  input[type=submit] {
     background-color: $red;
     color: $white;
 
     &:hover {
       background-color: $grey2;
     }
   }
-  input[type="email"],
-  input[type="text"],
-  input[type="url"],
+  input[type=email],
+  input[type=text],
+  input[type=url],
   select {
     background: $grey2;
     border-color: transparent;

join.md

@@ -6,42 +6,39 @@ permalink: /subscribe/
 
 # Join us
 
-Our Slack is governed by the principles and rules in our [Community Guide](/community-guide). By joining, you agree to follow them.
+1. Fill out this form to subscribe to our newsletter.
+2. If eligible, you will be invited to our Slack.
+3. You agree to the [Community Guide](/community-guide) by filling the form.
 
-<h3 class="marg-b-3">Please provide the following:</h3>
+<h3>Please provide the following:</h3>
 <form class="join-form" method="POST" target="_blank" class="marg-b-4" data-netlify="true" action="/welcome" netlify-honeypot="bot-field">
   <label style="display:none">
     Don’t fill this out if you’re human: <input name="bot-field" />
   </label>
-  <label class="marg-b-3" for="email">
-    <div><b>Email:</b></div>
+  <label for="name">
+    <div><b>Your full name</b></div>
+    <input id="name" type="text" required name="name">
+  </label>
+  <label for="email">
+    <div><b>Email</b></div>
     <input id="email" type="email" required name="email">
   </label>
-  <label class="marg-b-3" for="name">
-    <div><b>Name:</b></div>
-    <input id="name" type="text" required name="name">
+  <label for="social">
+    <div><b>Social media link #1</b></div>
+    <input placeholder="LinkedIn, Bluesky, Twitter, etc.." id="social" required type="text" name="social_media_1" title="enter a valid url">
+    <div><b>Social media link #2</b></div>  
+    <input placeholder="GitHub, Instagram, Blog etc.." type="text" required name="social_media_2" title="enter a valid url">
   </label>
-  <label class="marg-b-3" for="social">
-    <div class="marg-b-2">
-      <b>Please provide two links to your social media.</b>
-      <div>We need a way to validate that you meet the membership requirements laid out <a href="/community-guide#membership">here</a>. Linkedin is preferred, but anything that allows us to verify that you are not a manager, journalist etc is acceptable.</div>
-    </div>
-    <input placeholder="LinkedIn, Twitter, etc" id="social" required type="text" name="social_media_1" title="enter a valid url">
-    <input placeholder="GitHub, Instagram, Blog" type="text" required name="social_media_2" title="enter a valid url">
-  </label>
-  <label class="marg-b-3" for="company_name">
-    <div><b>Company Name</b></div>
-    <div class="marg-b-2">Including a company name helps us vet you.</div>
+  <label for="company_name">
+    <div><b>Your employer</b></div>
     <input id="company_name" type="text" name="company_name" required>
   </label>
-  <label class="marg-b-3" for="human-referrer">
-    <div><b>How Did You Hear About Us?</b> (optional):</div>
-    <div class="marg-b-2">Including a referrer from an existing member can be a good way to get in the slack if you lack a social media presence. Also, please be specific! If you found us on search, don't just say "Google" (it's unclear if you mean the company or the search engine).</div>
+  <label for="human-referrer">
+    <div><b>How can we support your personal goals?</b> (optional):</div>
     <input id="human-referrer" type="text" name="human-referrer">
   </label>
   <label class="marg-b-3" for="nearby-chapter">
     <div><b>Do you live or work near an existing chapter?</b> (optional):</div>
-    <div class="marg-b-2">This helps us connect you with local organizing efforts. If there isn't already a chapter in your area, we'd love to chat with you about starting one!</div>
     <select id="nearby-chapter" name="nearby-chapter">
       <option value="">Select a chapter</option>
       <option value="want-to-start">I want to help start a chapter</option>
@@ -53,7 +50,7 @@ Our Slack is governed by the principles and rules in our [Community Guide](/comm
   </label>
   <label class="marg-b-3" for="outreach">
     <input id="outreach" type="checkbox" name="outreach" value="wants-outreach" style="margin-right: 8px;">
-    <b>Are you interested in 1:1 outreach from someone in TWC?</b> (optional)
+    <b>Do you want 1:1 outreach with someone in TWC?</b> (optional)
   </label>
   <input type="submit" value="Submit">
 </form>