HTML contact form example
A clean, accessible contact form with name, email, and message fields. This is the most common pattern for static sites and works on any host without a server.
<form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<label for="name">Name</label>
<input type="text" id="name" name="name" required />
<label for="email">Email</label>
<input type="email" id="email" name="email" required />
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
<input type="checkbox" name="botcheck" style="display:none" />
<button type="submit">Send Message</button>
</form>
Textarea in HTML form
The textarea element creates a multi-line text input inside a form. Use the rows and cols attributes to set the default size, or style it with CSS. This example shows a feedback form with a large textarea.
<form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<label for="email">Email</label>
<input type="email" id="email" name="email" required />
<label for="feedback">Feedback</label>
<textarea id="feedback" name="feedback" rows="6" cols="40" placeholder="Tell us what you think..." required></textarea>
<input type="checkbox" name="botcheck" style="display:none" />
<button type="submit">Submit Feedback</button>
</form>
HTML form sample
A minimal, production-ready HTML form sample you can copy and customize. It includes all required attributes and a honeypot field for basic spam protection.
<form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<input type="text" name="name" placeholder="Your name" required />
<input type="email" name="email" placeholder="Your email" required />
<textarea name="message" placeholder="Your message" required></textarea>
<input type="checkbox" name="botcheck" style="display:none" />
<button type="submit">Submit</button>
</form>
Multi-column HTML form layout
Split your form into columns using CSS Grid. The backend still receives the same field names regardless of how the frontend is laid out.
<style>
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-grid .full {
grid-column: 1 / -1;
}
</style>
<form class="form-grid" action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<input name="first_name" placeholder="First name" required />
<input name="last_name" placeholder="Last name" required />
<input name="email" type="email" placeholder="Email" class="full" required />
<textarea name="message" placeholder="Message" class="full" rows="4" required></textarea>
<input type="checkbox" name="botcheck" style="display:none" />
<button type="submit" class="full">Send</button>
</form>
HTML form with file upload
Let visitors attach files by setting enctype to multipart/form-data and adding an input with type=file. Restrict accepted file types with the accept attribute.
<form action="https://api.formsfort.com/submit" method="POST" enctype="multipart/form-data">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<input type="text" name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<input type="file" name="attachment" accept=".pdf,.doc,.docx,image/*" />
<input type="checkbox" name="botcheck" style="display:none" />
<button type="submit">Upload</button>
</form>
HTML form with checkboxes and radio buttons
Use checkboxes when users can select multiple options and radio buttons when they must choose one. Repeated names are delivered as comma-separated values.
<form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<input type="email" name="email" placeholder="Email" required />
<p>Interests (select all that apply):</p>
<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>
<p>Plan:</p>
<label><input type="radio" name="plan" value="Starter" required /> Starter</label>
<label><input type="radio" name="plan" value="Pro" /> Pro</label>
<input type="checkbox" name="botcheck" style="display:none" />
<button type="submit">Subscribe</button>
</form>
HTML form with select dropdown
The select element creates a dropdown list. Use the multiple attribute to allow more than one selection. Each option needs a value that the backend will receive.
<form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<input type="text" name="name" placeholder="Name" required />
<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" />
<button type="submit">Send</button>
</form>
HTML newsletter signup form
A minimal email-only form perfect for newsletter signups. The honeypot field stays hidden from users but catches basic spam bots.
<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" />
<input type="email" name="email" placeholder="Enter your email" required />
<input type="checkbox" name="botcheck" style="display:none" />
<button type="submit">Subscribe</button>
</form>