Simplify signup form #426
Simplify signup form #426
Conversation
✅ Deploy Preview for techworkersco ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
shushugah
force-pushed
the
simplify-form
branch
from
e590dff to
f7e61d1
Compare
shushugah
force-pushed
the
simplify-form
branch
from
f7e61d1 to
b664274
Compare
maximsmol
left a comment
maximsmol
left a comment
There was a problem hiding this comment.
I like the simplified flow!
- Left a bunch of individual suggestions
- Consider adding placeholders to all other inputs
| } | ||
|
|
||
| input::placeholder { | ||
| text-align: center; |
There was a problem hiding this comment.
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
| border-radius: 4px; | ||
| padding: 1rem; | ||
| padding: 0 1.5rem 1rem 1.5rem; | ||
| margin: auto; |
There was a problem hiding this comment.
don't think this does anything
| margin: auto; | ||
|
|
||
| label { | ||
| margin: 0; |
There was a problem hiding this comment.
I think the default is no margin? at least it seems to be in Firefox
|
|
||
| label { | ||
| margin: 0; | ||
| width: 100%; |
There was a problem hiding this comment.
since these are display: block by default (at least in Firefox) they already stretch horizontally to fill the container
There was a problem hiding this comment.
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.
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
There was a problem hiding this comment.
Could just set a lower max-width here imo
| <label class="marg-b-3" for="email"> | ||
| <div><b>Email:</b></div> | ||
| <label for="name"> | ||
| <div><b>Your full name</b></div> |
There was a problem hiding this comment.
| <div><b>Your full name</b></div> | |
| <div><b>Full name</b></div> |
for consistency (e.g. Email vs Your email)
| <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> |
There was a problem hiding this comment.
accessibility: we probably want a separate <label> here as well, I'm guessing a screen reader would get tripped up by an unlabelled input
| </label> | ||
| <label class="marg-b-3" for="social"> | ||
| <div class="marg-b-2"> | ||
| <b>Please provide two links to your social media.</b> |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
+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.
There was a problem hiding this comment.
I'd avoid hovertext for accessibility/usability reasons
Having it be collapsible is fine tho I don't really think it's necessary
| <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> |
There was a problem hiding this comment.
| <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
There was a problem hiding this comment.
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.
| <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) |
There was a problem hiding this comment.
| <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
| <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> |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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="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> |
There was a problem hiding this comment.
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.
Before
After