# 6 Contact Form & Newsletter Components for React

> Contact and newsletter sections people actually finish: forms with floating labels and validation, contact channel cards, office maps, booking slot pickers and newsletter signups that morph into a success state.

3 of 6 free (the rest with PixelPapa Pro), built with Tailwind CSS and Motion, installable with the shadcn CLI.

- [Contact Booking Slots](https://pixelpapa.com/components/contact/contact-booking-slots.md) (Pro): A meeting scheduler card: pick a day from a strip, then a time slot that highlights with a shared-layout pill, switch 12/24-hour format and confirm into a summary.
- [Contact Cards Channels](https://pixelpapa.com/components/contact/contact-cards-channels.md): Three contact channel cards, each with its own live detail: a copy-to-clipboard email, a chat thread with a typing indicator and a voice line with moving level bars.
- [Contact Map Office](https://pixelpapa.com/components/contact/contact-map-office.md) (Pro): A dotted SVG world map with pulsing office pins linked by animated arcs; the office list and the pins select each other and show live local time.
- [Contact Split Form](https://pixelpapa.com/components/contact/contact-split-form.md) (Pro): Two-column contact section whose form has floating labels, inline validation that slides in on blur, a shake on invalid submit and a drawn-check success state.
- [Newsletter Card Perks](https://pixelpapa.com/components/contact/newsletter-card-perks.md): A signup card with a staggered perks list on one side and a fanned stack of past issues that spreads apart on hover on the other.
- [Newsletter Inline Success](https://pixelpapa.com/components/contact/newsletter-inline-success.md): A single-line signup whose submit button shrinks into a spinner, then a green check, while the field collapses around a confirmation message.