Improving User Feedback: Adding Redirects to Portfolio Contact Forms

In my portfolio project, tonybnya/portfolio, I recently focused on enhancing the user experience after a contact form submission. Improving the post-submission flow is a small but essential detail that helps set user expectations and provides confirmation that their message was received.

The Situation

Previously, when a user clicked the submit button on the contact form, the UI didn't provide immediate visual confirmation that the action had completed successfully. While the data was being processed, the lack of a clear "Success" state left users wondering if their message had actually been sent or if the application had encountered an error.

The Journey to Better Feedback

To improve this, I decided to implement a redirect flow. Instead of keeping the user on the same page, the form now programmatically navigates to a dedicated 'Thanks' template upon successful submission. This acts as a clear acknowledgement, similar to a physical receipt after making a purchase in a store.

Implementation

In our React-based form, we handle the submission state to trigger a navigation event. By utilizing standard router hooks, we ensure a seamless transition.

const handleSubmit = async (formData) => {
  const success = await sendContactRequest(formData);
  if (success) {
    navigate('/thanks');
  }
};

This snippet demonstrates how we wait for the asynchronous request to complete before triggering the navigation. If the request returns a success response, we move the user to the feedback template.

The Technical Lesson

This simple change highlights a critical UX principle: Feedback Loops. Whether it's a server acknowledging a request or a UI updating to show a state change, users need to know their intent was fulfilled. Treating the navigation as a confirmation event turns an ambiguous background process into a clear user journey.

The Takeaway

Sometimes, the most impactful improvements aren't deep architectural changes, but the small interaction details that confirm a user's success. By ensuring that every action has a corresponding reaction in the interface, we create a more reliable and professional experience.

Generated with Gitvlg.com