Create a responsive contact form with HTML and CSS
A polished contact form remains readable, keyboard accessible, and recoverable on narrow screens. Start with semantic HTML, then style spacing, focus, errors, and button states without hiding the browser's useful behavior.
Create a free formA copyable example
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Contact form</title>
<style>form[data-littlereply]{max-width:640px;margin:2rem auto;padding:1.5rem;font:16px/1.6 system-ui,sans-serif;color:#202033;background:white;border:1px solid #e4e4ee;border-radius:16px;box-sizing:border-box}form[data-littlereply] label{display:block;margin-top:1rem;font-weight:600}form[data-littlereply] input,form[data-littlereply] textarea,form[data-littlereply] select{box-sizing:border-box;width:100%;padding:.75rem;font:inherit;border:1px solid #727285;border-radius:8px;background:white;color:#202033}form[data-littlereply] input[type=checkbox],form[data-littlereply] input[type=radio]{width:auto}form[data-littlereply] button{margin-top:1rem;padding:.8rem 1.1rem;font:inherit;font-weight:600;border:0;border-radius:8px;background:var(--form-accent,#4f46e5);color:white;cursor:pointer}form[data-littlereply] :focus-visible{outline:3px solid #f59e0b;outline-offset:3px}form[data-littlereply] button:disabled{opacity:.6}form[data-littlereply] [role=status]{min-height:1.6em}form[data-littlereply] fieldset{border:0;padding:0}form[data-littlereply] .privacy-notice{font-size:.875rem;color:#4b4b60}
form[data-littlereply]{--form-accent:#4f46e5;--form-ink:#ffffff}
form[data-littlereply] button{color:var(--form-ink)}form[data-littlereply] button[data-fq-back]{background:#eee;color:#202033}form[data-littlereply] [hidden]{display:none}</style></head><body>
<form action="https://littlereply.com/api/submit" method="POST" data-littlereply="YOUR_ACCESS_KEY" data-locale="en" data-success="Your message has been stored. We will reply soon.">
<input type="hidden" name="_fq_key" value="YOUR_ACCESS_KEY" />
<input type="text" name="botcheck" tabindex="-1" autocomplete="off" style="display:none" aria-hidden="true" />
<label for="fq_name">Your name *</label>
<input type="text" name="name" id="fq_name" required autocomplete="name" />
<label for="fq_email">Your email address *</label>
<input type="email" name="email" id="fq_email" required autocomplete="email" />
<label for="fq_message">Your message *</label>
<textarea name="message" id="fq_message" required maxlength="5000" rows="5"></textarea>
<button type="submit">Send my message</button>
<p role="status" aria-live="polite"></p>
</form>
<!-- Accessible AJAX errors and duplicate-safe retries -->
<script src="https://littlereply.com/client/v1.js" data-api="https://littlereply.com" defer></script>
</body></html>The key YOUR_ACCESS_KEY is a placeholder to replace with your form’s public key. The code contains no server key or destination address.
Build the semantic form first
Use one visible label for every control, a logical heading, appropriate autocomplete values, and a button with a clear action. Keep instructions next to the field they describe.
Design for narrow screens
Let controls fill the available width, use a readable line length, and stack multi-column rows before labels or error messages become cramped.
Make state visible
Provide a strong keyboard focus indicator, do not rely on color alone for errors, and distinguish pending, accepted, and retry states. Test zoom and keyboard order as well as visual layout.
Verify the template on your actual website
Test at 360 pixels wide, with browser zoom, and using Tab. Check long fields, focus borders, and error messages. The demonstration contains a placeholder key: the preview does not create a public form for you.
After publication, send a recognizable request and check it in your workspace. If the CSS works but nothing arrives, inspect the action, field names, and delivery history. Diagnose presentation and processing separately.
Sources
Frequently asked questions
Can placeholder text replace a label?
No. Placeholders disappear during typing and are often lower contrast.
Should validation errors use red only?
No. Pair color with text and programmatic relationships to the affected control.
Is the HTML CSS template free?
You can view and customize the template without an account. LittleReply intake uses your workspace’s plan and limits, with a free plan to get started.