refactor: Replace mailto button links with contact #296
Conversation
…nce user experience
… enhance user experience
✅ Deploy Preview for webdevpathstage ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
🤔 It seems a bit strange to have two navlinks navigating to the same page ( |
|
I'm not too sure if we want subject auto fill on this PR. Let's see what other members say about it.
How about add anchor tag to the contact form for the |
Yeah we can discuss it with the UI/UX team and see if there's any suggestions. @briangesteban
I don't like the auto subject population. I think people should be writing their own subject. It doesn't seem to work consistently anyway, I saw it once but then I can never trigger it again |
| Name: '', | ||
| Email: '', | ||
| Subject: '', | ||
| Subject: subject || '', |
There was a problem hiding this comment.
What is the goal of adding the subject parameter here @oluwatobiss ?
There was a problem hiding this comment.
The subject parameter ensures that clicking the Join us button auto-fills the form’s subject field with ‘Project collaborator application.’ This makes the ‘Join us’ button distinct for collaboration requests, while the ‘Contact’ button serves general inquiries.
There was a problem hiding this comment.
Such a thoughtful PR, @oluwatobiss ! Can you please just explain why you are adding the subject parameter? Thanks so much!
| > | ||
| {children} | ||
| </a> | ||
| ) : ( |
| return ( | ||
| <li className={styles.item} key={id}> | ||
| <a | ||
| <Link |
There was a problem hiding this comment.
Thanks for your attention to detail! 🥷
|
Another way to handle this refactor, @cherylli, @oluwatobiss, and @Satoshi-Sh, would be to transform the Join Us and Ping Us buttons into toolkits with JavaScript code, so that when the user clicks on them, the hello email is copied. You can see this effect here: https://www.enhanceme.io/contact/ 
Since we are probably refactoring the Join Us btn with the Services structure, I decided to suggest the easiest patch to make the UX a little bit better. |
Switching between “Contact” and “Join us” may cause inconsistent behavior because |
In this case, may I suggest two temporary options:
|
We can't leave this as is because it appears broken to users. But I understand now your idea of trying to differentiate two navbar buttons that do the same thing, @oluwatobiss. |
There was a problem hiding this comment.
@oluwatobiss
Thank you for the refactoring!
Since we are probably refactoring the Join Us btn with the Services structure, I decided to suggest the easiest patch to make the UX a little bit better.
In this case, may I suggest two temporary options:
- Leave the
mailtolink as-is until we finalize the new design.- Set the “Join Us” button to auto-populate the subject field. This keeps the nav UIs distinct. Moreover, users can still edit the subject as they wish.
If option 2 above is chosen, the following change in pages/contact.js would help automatically update the subject field:
[pages/contact.js (Updated version)]
export default function ContactUs() {
const searchParams = useSearchParams();
const subject = searchParams.get("subject");
const [param, setParam] = useState(subject); // ----- Add useState to store the URL parameter
const [message, setMessage] = useState([]);
useEffect(() => {
setParam(subject);
}, [subject]); // ----- Add useEffect to update parameter when the URL query changes
return (
<>
<div className={styles.contactUsContainer}>
<div className={styles.formWrapper}>
<div className={styles.formAndDecorations}>
<Bracket className={bracketStyles.yellowBracket} />
<ContactUsFormSubscribe
key={param} // ----- Add key to reset form when parameter changes
subject={param}
setMsg={setMessage}
/>
<img
className={styles.yellowColon}
src='/images/svg/yellow-colon.svg'
alt=''
/>
<div className={styles.responseMessage}>
{message?.map((m, i) => (
<span key={i}>
{m}
<br />
</span>
))}
</div>
</div>
</div>
</div>
<ContactUsCards />
</>
);
}
[Demonstration]
The contact form’s subject can change automatically based on the button clicked.
https://github.com/user-attachments/assets/e0acb49b-75cf-44bd-98d9-f648cc63988e
Fantastic suggestion, @mtkksk1780! To further optimize the implementation, it would be best to avoid the |
|
@cherylli The subject auto-population should now work consistently with the latest commit. @mtkksk1780, Thanks for your input! |
Have you updated the CHANGELOG.md file? If not, please do it.
Yes
What is this change?
mailto:[email protected]button links with/contact.Were there any complications while making this change?
No
How to replicate the issue?
Clicking the main branch’s “Join us” (navbar) or “Ping us” (about page) buttons would navigate to
mailto:[email protected].If necessary, please describe how to test the new feature or fix.
Clicking the PR branch’s “Join us” (navbar) or “Ping us” (about page) buttons would navigate to
/contactwithout a full-page reload.When should this be merged?
After three approved reviews.