Skip to content

Simplify signup form #426

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Simplify signup form #426

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 46 additions & 16 deletions _includes/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -451,7 +451,38 @@ h3 {

form {
border-radius: 4px;
padding: 1rem;
padding: 0 1.5rem 1rem 1.5rem;
margin: auto;
Copy link
Contributor

@maximsmol maximsmol Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't think this does anything


label {
margin: 0;
Copy link
Contributor

@maximsmol maximsmol Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the default is no margin? at least it seems to be in Firefox

width: 100%;
Copy link
Contributor

@maximsmol maximsmol Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since these are display: block by default (at least in Firefox) they already stretch horizontally to fill the container

Copy link
Collaborator

@JoshuaC215 JoshuaC215 Nov 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not a css or design wizard by any means, but filling the container doesn't look very good to me on a desktop / wide form factor and feels different from the forms on almost any modern website.

image

Here's a point of reference, the last lefty website sign up form I was thinking about - looks similar to this PR on mobile form factor but MUCH nicer and more standard IMO on desktop: https://www.saikat.us/en/volunteer

Copy link
Contributor

@maximsmol maximsmol Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could just set a lower max-width here imo


div, input::placeholder {
padding-top: 1rem;
padding-bottom: 2px;
margin-left: 5px;
}

input::placeholder {
text-align: center;
Copy link
Contributor

@maximsmol maximsmol Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd keep the left-aligned, having them float far away to the right throws me off. It's also odd that the placeholder alignment is different from real form values

If we insist on centering this stuff, we should also consider that the select[name=nearby-chapter] is currently left-aligned

}
}

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 {
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
}

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
43 changes: 20 additions & 23 deletions join.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link
Contributor

@maximsmol maximsmol Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div><b>Your full name</b></div>
<div><b>Full name</b></div>

for consistency (e.g. Email vs Your email)

<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>
Copy link
Contributor

@maximsmol maximsmol Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div><b>Social media link #1</b></div>
<div><b>Social media link #1 (e.g. LinkedIn, Bluesky, Twitter)</b></div>

accessibility nitpick: placeholders should not contain explanations of the form input
(https://www.deque.com/blog/accessible-forms-the-problem-with-placeholders/)

Copy link
Member Author

@shushugah shushugah Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Having read the a11y documentation, I don't think it applies here. If the placeholders were completely removed the labels would still provide adequate instructions. Optional fields are listed as option within label, and not within placeholder for example. When users submit they will get more specific validation (missing fields, nothing beyond that)

Copy link
Contributor

@maximsmol maximsmol Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see two possibilities:

  1. we prefer some specific social media over other—in this case we need to include this in non-placeholder instructions
  2. we don't really care—in this case we can probably just remove the placeholders (though I'd be fine keeping it in as well)

<input placeholder="LinkedIn, Bluesky, Twitter, etc.." id="social" required type="text" name="social_media_1" title="enter a valid url">
Copy link
Contributor

@maximsmol maximsmol Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<input placeholder="LinkedIn, Bluesky, Twitter, etc.." id="social" required type="text" name="social_media_1" title="enter a valid url">
<input placeholder="https://www.linkedin.com/in/john.doe" id="social" required type="url" name="social_media_1">

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/url

Placeholder can also be removed if it's too ugly

<div><b>Social media link #2</b></div>
Copy link
Contributor

@maximsmol maximsmol Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

accessibility: we probably want a separate <label> here as well, I'm guessing a screen reader would get tripped up by an unlabelled input

<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>
Copy link
Contributor

@maximsmol maximsmol Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would add back some of the explanation for why we want social media links, it was helpful when I filled the form out myself

Copy link
Member Author

@shushugah shushugah Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would collapsible text like in the conference values be a middle ground or do you think the extended text-version is the best way to go?

Copy link
Collaborator

@JoshuaC215 JoshuaC215 Nov 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 we need to keep some of this explanation. Could be simplified a bit, like:

"We use these links to validate that you meet the membership requirements for our Slack, such as not being a manager. LinkedIn or similar is preferred."

An info icon with hovertext or collapsible text seems fine to me.

Copy link
Contributor

@maximsmol maximsmol Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd avoid hovertext for accessibility/usability reasons
Having it be collapsible is fine tho I don't really think it's necessary

<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>
Copy link
Contributor

@maximsmol maximsmol Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div><b>Your employer</b></div>
<div><b>Place of work</b></div>

wording suggestion

I would also add back the explanation as to why this is needed

Copy link
Collaborator

@JoshuaC215 JoshuaC215 Nov 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might also say "(if employed)" or similar since we get a decent number of currently unemployed people. I feel fine about removing the explanation here but ok either way.

<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>
Copy link
Collaborator

@JoshuaC215 JoshuaC215 Nov 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would really like to keep the referral field if we can, this data is very useful and interesting IMO. For example lately we could see the impacts of Cory Doctorow's recent book, the SOLARPUNKS Discord, TWC showing up in ChatGPT, etc.

I believe we're standing up some kind of Growth group, right? I imagine they will be extremely interested in this data.

<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>
Copy link
Contributor

@maximsmol maximsmol Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this doesn't seem to match the name of the input field
need to make sure the backend is expecting this new data, and should change the name to personal_support_note or similar

Copy link
Member Author

@shushugah shushugah Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with you here, but there's too many things to change on back end namely Slack integrations, but we can make a note of this

Copy link
Contributor

@maximsmol maximsmol Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm just making sure this ends up somewhere sensible in the backend (which I can't see myself lol) and that this is intentional

<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>
Expand All @@ -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)
Copy link
Contributor

@maximsmol maximsmol Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<b>Do you want 1:1 outreach with someone in TWC?</b> (optional)
<b>I want a 1:1 onboarding</b> (optional)

just a wording suggestion

</label>
<input type="submit" value="Submit">
</form>