Contact form
Let’s Talk moves aside and focuses the name. The message is the next step, and the thank-you replaces the form.
- Problem
- The contact fields were on screen before someone chose to talk.
- Role
- UI and frontend
- Built
- Name and email, then the message
- Tracking
- The message stays on the page
- Result
- Sample
Contact form
Let’s Talk moves aside and focuses the name. The message is the next step.
Case study
Context: The contact form on this site, shown one step at a time. The first thing on the card is one button.
The decision
The button says Let’s Talk. A click moves the button away and places the cursor in the name field. The email sits under the name. The next arrow opens the message. The message step has a back arrow. Send Message replaces the card with a thank-you. Nothing is posted from this sample. The hero Let’s Talk button posts the name, email, and message to the same sheet as the contact page.
What I owned
- The closed button. A click moves it away and focuses the name field.
- The name and email. An empty name says Required. A bad email says Invalid email address.
- The message step. The back arrow returns to the name and email. Send Message is the submit button.
- The thank-you. It replaces the form.
How someone else reuses it
Pass the button label and the thank-you line. The name, the email, and the message stay in that order. The live form and the hero post the message. This sample stays on the page.
In React
ContactSample holds the step and the three fields. Opening the button, reaching the message, and sending each record a step. The hero posts the message to the sheet. The sample on this card does not. The contact page has its own form.