Contact Forms

What is a contact form?

A contact form lets visitors send a message without opening their email client. A typical form asks for a name, email address, subject or topic and a message, and sometimes a phone number, company or budget for quote requests. Contact forms appear on contact pages, in footers, in sidebars and inside modals on service and product sites.

When to use a contact form

• On a contact page alongside an address, phone number and map.
• For quote, demo and appointment requests where you need structured information.
• For support inquiries when a full ticket system is overkill.
• As a compact form at the bottom of landing pages.

Best practices

• Ask only for what you need. Every extra field lowers completion rates.
• Give each field a visible <label> and mark required fields clearly, in text, not just with colour or an asterisk.
• Use the matching input types and autocomplete values: type="email" with autocomplete="email", type="tel" with autocomplete="tel", autocomplete="name".
• Validate on submit and show messages next to the relevant fields, linked with aria-describedby.
• After sending, show a clear success message and move focus to it, or announce it with a live region.
• Use a <select> or radio buttons for topics so messages reach the right team.
• Protect the form against spam on the server side, for example with a honeypot field or rate limiting.
• Lay out short fields side by side on desktop and stack them on mobile.

Framework versions

The responsive contact form examples on this page include simple stacked forms, two-column layouts, forms with contact details and forms with a map beside them. Bootstrap 6 versions use theme-* colour roles for focus and validation states. Bootstrap 5 versions use .form-control, .form-select and the grid, Tailwind CSS versions use spacing and focus ring utilities, and pure CSS versions are framework-free HTML and CSS. Preview, copy and adapt them, then point the form action to your own endpoint or backend script.