GSAP Contact Form Written as a Sentence
Overview
A contact section for React and Next.js where the form is one large sentence with blanks to fill in. Blanks grow to fit their text, choices open inside the line, and on submit the sentence is read back word by word.
Nobody has to face a stack of boxes. The form reads like something you'd say, and each blank stretches to fit what you type while its underline draws in. Choices unfold inside the sentence, pushing the words along, and close up again once you've picked one. Enter takes you to the next empty blank instead of submitting early.
Details
- Category
- Contact
- Interaction
- On Click + On Scroll + On Load
- Trigger
- On Click
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 053 / Hero
3D Gold Ring Hero with Scroll Rotation on Canvas, No WebGL
On Load · On Scroll · Mouse Move · On Click
No. 118 / Hero
Zipper Reveal Hero with a Draggable Pull, on Canvas
On Load · Drag · On Scroll · On Click
No. 092 / Comparison
GSAP Comparison Table Section: Us vs Them with Flip
On Scroll · On Click
(02)FAQ
GSAP Contact Form Written as a Sentence — FAQ
01How do I write my own sentence?
Pass parts, an array of plain strings and fields, in reading order. Text fields need a name, label and placeholder. A choice field sets type to "choice" and adds options.
02How do I send the message somewhere?
Use onSubmit. It gets an object of values and the finished sentence as a string, so you can post it to your own API or a server action. Throw or reject to show failedMessage and keep what they typed.
03How does validation work?
Every field is required unless you set required to false, and email fields are checked for an @ and a domain. Add validate to a text field for your own rule, and emptyMessage or invalidMessage to change the wording.
04Does it work with the keyboard?
Yes. Tab moves between blanks, arrow keys change a choice, Enter goes to the next empty blank and Escape closes a choice. Enter on the last blank submits.
05What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. The sentence uses a serif loaded as --font-dm-serif, which you can swap for any font. Set ink, paper and error to suit your background.
06What happens with reduced motion?
The shake, the entrance and the word-by-word reading are all skipped. The sentence simply appears with the answers marked, and choices open without sliding.