These are examples, not duplicate keyword pages: choose one pattern, adapt its field names to your workflow, and test the real payload. For product and workflow context, read the lead capture form and form notifications guides.
HTML contact form example
Start here for a conventional contact form: labeled fields, email autocomplete, a multi-line message, and a submit button. Replace the public access key and keep the field names stable for notifications.
<form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<input type="hidden" name="subject" value="New website contact" />
<label for="contact-name">Name</label>
<input type="text" id="contact-name" name="name" autocomplete="name" required />
<label for="contact-email">Email</label>
<input type="email" id="contact-email" name="email" autocomplete="email" required />
<label for="contact-message">Message</label>
<textarea id="contact-message" name="message" rows="5" maxlength="3000" required></textarea>
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
<button type="submit">Send message</button>
</form>
Textarea in an HTML form
Use textarea for a multi-line answer. This feedback version keeps a visible label, a useful starting height, a character limit, and a honeypot that does not enter the keyboard order.
<form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<label for="feedback-email">Email</label>
<input type="email" id="feedback-email" name="email" autocomplete="email" required />
<label for="feedback">What should we improve?</label>
<textarea id="feedback" name="feedback" rows="6" maxlength="2000" required></textarea>
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
<button type="submit">Submit feedback</button>
</form>
HTML form with radio buttons
Use one shared name for one-of-many choices and a different value for each option. Fieldset and legend provide the question context while native inputs preserve keyboard behavior.
<form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<fieldset>
<legend>Preferred contact method</legend>
<label for="method-email"><input id="method-email" type="radio" name="contact_method" value="email" required /> Email</label>
<label for="method-phone"><input id="method-phone" type="radio" name="contact_method" value="phone" /> Phone</label>
<label for="method-text"><input id="method-text" type="radio" name="contact_method" value="text" /> Text message</label>
</fieldset>
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
<button type="submit">Save preference</button>
</form>
HTML form with a select dropdown
A required select needs an empty placeholder option. Give every option an explicit value so routing and notification rules do not depend on visible copy.
<form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<label for="topic">Topic</label>
<select id="topic" name="topic" required>
<option value="">Choose a topic</option>
<option value="sales">Sales</option>
<option value="support">Support</option>
<option value="partnerships">Partnerships</option>
</select>
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
<button type="submit">Send request</button>
</form>
HTML lead capture form example
A lead form asks for enough context to qualify a request without turning the first interaction into a questionnaire. Use semantic input types and a short textarea, then connect the workflow to your notification settings.
<form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<input type="hidden" name="subject" value="New qualified lead" />
<label for="lead-name">Name</label>
<input type="text" id="lead-name" name="name" autocomplete="name" required />
<label for="lead-email">Work email</label>
<input type="email" id="lead-email" name="email" autocomplete="email" required />
<label for="lead-company">Company</label>
<input type="text" id="lead-company" name="company" autocomplete="organization" />
<label for="lead-goal">What are you trying to accomplish?</label>
<textarea id="lead-goal" name="goal" rows="4" maxlength="1500"></textarea>
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
<button type="submit">Request a conversation</button>
</form>
Multi-column HTML form layout
CSS Grid changes layout, not the submission contract. Keep labels and source order logical so the same form remains usable on a narrow screen and with assistive technology.
<style>
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .form-grid .full { grid-column: auto; } }
</style>
<form class="form-grid" action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<div><label for="first-name">First name</label><input id="first-name" name="first_name" autocomplete="given-name" required /></div>
<div><label for="last-name">Last name</label><input id="last-name" name="last_name" autocomplete="family-name" required /></div>
<div class="full"><label for="grid-email">Email</label><input id="grid-email" name="email" type="email" autocomplete="email" required /></div>
<div class="full"><label for="grid-message">Message</label><textarea id="grid-message" name="message" rows="4"></textarea></div>
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
<button type="submit" class="full">Send</button>
</form>
HTML form with file upload
Set multipart/form-data before adding a file input. The accept attribute guides the picker but does not replace server-side size, type, and malware checks.
<form action="https://api.formsfort.com/submit" method="POST" enctype="multipart/form-data">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<label for="applicant-name">Name</label>
<input type="text" id="applicant-name" name="name" autocomplete="name" required />
<label for="resume">Resume (PDF or DOCX)</label>
<input type="file" id="resume" name="resume" accept=".pdf,.docx" />
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
<button type="submit">Upload application</button>
</form>
HTML form with checkboxes
Checkboxes allow zero or more independent choices. Give each box an explicit value and use a fieldset legend to make the question understandable without relying on nearby visual text.
<form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<label for="preferences-email">Email</label>
<input type="email" id="preferences-email" name="email" autocomplete="email" required />
<fieldset>
<legend>Topics you want to hear about</legend>
<label><input type="checkbox" name="interest" value="product" /> Product</label>
<label><input type="checkbox" name="interest" value="sales" /> Sales</label>
<label><input type="checkbox" name="interest" value="support" /> Support</label>
</fieldset>
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
<button type="submit">Save preferences</button>
</form>
HTML newsletter signup form
For a simple opt-in, ask only for an email and explain what the visitor will receive. Do not pre-check consent; make the subscription action explicit.
<form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<input type="hidden" name="subject" value="New newsletter signup" />
<label for="newsletter-email">Email address</label>
<input type="email" id="newsletter-email" name="email" autocomplete="email" required />
<p id="newsletter-note">One practical email each month. Unsubscribe at any time.</p>
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
<button type="submit">Subscribe</button>
</form>