- No data uploaded
- Instant results
Bootstrap 5 Contact Form for React
A production-ready minimal contact form: a contact card with name, email, a topic selector, a message textarea and a submit button. Pick your brand color, toggle dark mode and corner radius — the live preview and the React code update instantly in your browser.
Live component editor
Live preview
import 'bootstrap/dist/css/bootstrap.min.css';
import './theme.css';
export default function ContactForm() {
return (
<div className="w-100 mw-lg p-5 bg-body border shadow-sm rounded-3">
<h2 className="fs-4 fw-bold text-body-emphasis">Get in touch</h2>
<p className="mt-1 mb-4 small text-body-secondary">We usually reply within one business day.</p>
<form className="d-flex flex-column gap-3">
<div className="row row-cols-1 row-cols-md-2 g-2">
<div className="col">
<label htmlFor="cf-name" className="form-label small fw-medium">Name</label>
<input id="cf-name" type="text" autoComplete="name" className="form-control rounded-2" required />
</div>
<div className="col">
<label htmlFor="cf-email" className="form-label small fw-medium">Email</label>
<input id="cf-email" type="email" autoComplete="email" className="form-control rounded-2" required />
</div>
</div>
<div>
<label htmlFor="cf-topic" className="form-label small fw-medium">Topic</label>
<select id="cf-topic" className="form-control rounded-2">
<option>General question</option>
<option>Sales</option>
<option>Support</option>
</select>
</div>
<div>
<label htmlFor="cf-message" className="form-label small fw-medium">Message</label>
<textarea id="cf-message" rows="4" className="form-control rounded-2" placeholder="How can we help?" required></textarea>
</div>
<button type="submit" className="btn btn-brand fw-semibold rounded-2">Send message</button>
</form>
</div>
);
}
/* theme.css — brand color #4f46e5 for Bootstrap 5.3 */
:root { --brand: #4f46e5; --brand-hover: #433cc3; --brand-rgb: 79, 70, 229; --brand-contrast: #ffffff; }
.btn-brand {
--bs-btn-color: var(--brand-contrast); --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
--bs-btn-hover-color: var(--brand-contrast); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover);
--bs-btn-active-color: var(--brand-contrast); --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover);
--bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.text-brand { color: var(--brand) !important; }
.border-brand { border: 2px solid var(--brand) !important; }
.bg-brand-subtle { background-color: rgba(var(--brand-rgb), .12) !important; }
.form-control:focus, .form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.overlay { background: rgba(15, 23, 42, .5); backdrop-filter: blur(4px); z-index: 1050; }
.choice[aria-pressed="true"] { border-color: var(--brand) !important; color: var(--brand) !important; box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .2); }
.mw-sm { max-width: 24rem; } .mw-md { max-width: 28rem; } .mw-lg { max-width: 32rem; } .mw-xl { max-width: 36rem; }
.mw-2xl { max-width: 42rem; } .mw-4xl { max-width: 56rem; } .mw-6xl { max-width: 72rem; }
More Bootstrap components for React
All components →- FAQ Accordion A frequently-asked-questions section with four expandable items, each toggled by a button that exposes its state via aria-expanded
- Footer A multi-column site footer with a brand description, three link groups, a newsletter sign-up field and a copyright row
- Signup Form A registration card with name, email and password fields, a password hint, a terms-of-service checkbox and a primary call to action
- Cookie Consent Banner A GDPR-style cookie banner with equally prominent “Accept all” and “Reject all”, granular analytics/marketing toggles (off by default), stored consent and Google Consent Mode v2 signals
- Navbar A responsive top navigation bar with a logo, primary links, a sign-in/CTA pair on desktop and a collapsible hamburger menu on mobile
- Login Modal A centered sign-in dialog with email and password fields, “remember me”, a forgot-password link and a social sign-in button
- Pricing Table A three-tier pricing section with a monthly/yearly billing toggle, a highlighted “most popular” plan and feature checklists
- Hero Section A landing-page hero with an announcement badge, a large headline, supporting copy, primary and secondary calls to action and a row of social-proof stats
Install Bootstrap 5 for React
Create a React project with Vite and install Bootstrap:
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm install bootstrapSave the generated theme.css next to the component; the component file already imports bootstrap/dist/css/bootstrap.min.css and ./theme.css. No Bootstrap JavaScript is required — interactivity uses useState.
Use the contact form in React
// App.jsx
import ContactForm from './ContactForm';
export default function App() {
return <ContactForm />;
}Accessibility & customization
All controls have explicit labels, the <select> has a meaningful default option, and required fields use the native required attribute for built-in validation messages.
Every color, radius and dark-mode choice is baked into plain Bootstrap classes plus a tiny CSS-variable theme file, so the copied code has no runtime dependency on this site.
Compatibility
| Item | Details |
|---|---|
| CSS framework | Bootstrap 5.3+ (CSS only) |
| Library | React 18+ (function component) |
| Interactive state | None (static markup) |
| Dark mode | Yes — toggle in the editor |
| Style | Minimal |
Frequently asked questions
How do I install this Bootstrap contact form in React?
Create a React project, install Bootstrap 5 as shown in the installation section, then paste the generated code. Also save the generated theme.css file.
Can I change the color of the contact form?
Yes. Use the brand color picker or type any hex code — the preview and code update instantly, and the color is written directly into the classes you copy.
Does the contact form support dark mode?
Yes. Toggle “Dark mode” in the editor to generate a dark palette version of the same component.
Is the contact form accessible?
All controls have explicit labels, the <select> has a meaningful default option, and required fields use the native required attribute for built-in validation messages.
Is this component free for commercial use?
Yes. The generated code is yours to use in personal and commercial projects without attribution.