Form Basics
HTML form fundamentals for Static Forms integration
This guide covers the essential HTML form concepts you need to know when using Static Forms. Understanding these basics will help you create effective forms that work seamlessly with our service.
Required Form Attributes
Every form that uses Static Forms must include these attributes:
action
The action attribute specifies where the form data is sent. For Static Forms, this must always be:
method
The method attribute specifies the HTTP method. Static Forms requires:
Important
Only POST requests are supported. GET requests will not work.
Complete Form Structure
Here's a minimal working example of a Static Forms form:
Form Fields and Naming
All form fields with a name attribute will be included in the email notification you receive. Field names are case-sensitive and should be descriptive.
Standard Field Types
Static Forms supports all standard HTML input types:
| Input Type | Example | Use Case |
|---|---|---|
| text | <input type="text" name="name" /> | Names, titles, general text |
| <input type="email" name="email" /> | Email addresses | |
| tel | <input type="tel" name="phone" /> | Phone numbers |
| url | <input type="url" name="website" /> | Website URLs |
| number | <input type="number" name="age" /> | Numeric values |
| date | <input type="date" name="birthday" /> | Dates |
| textarea | <textarea name="message"></textarea> | Multi-line text |
| select | <select name="country">...</select> | Dropdown selections |
| checkbox | <input type="checkbox" name="newsletter" /> | Boolean options |
| radio | <input type="radio" name="plan" /> | Single choice options |
| file | <input type="file" name="document" /> | File uploads (Pro tier) |
Field Naming Best Practices
Use clear, descriptive names for your form fields. Good field names make it easier to understand submissions:
Good Examples:
name- Contact's nameemail- Email addressmessage- Message contentcompany_name- Company namephone_number- Phone number
Avoid:
field1,field2- Too genericdata- Not descriptive- Spaces in names - Use underscores or hyphens
- Special characters - Stick to alphanumeric and underscores
Special Field Names
Some field names have special meaning in Static Forms:
| Field Name | Purpose | Required |
|---|---|---|
| apiKey | Your Static Forms API key | Yes |
| redirectTo | URL to redirect after successful submission | No |
| replyTo | Custom reply-to email address | No |
| Used as reply-to if replyTo not provided | No | |
| honeypot | Any field containing "honeypot" in name for spam protection | No |
| g-recaptcha-response | reCAPTCHA token (if using reCAPTCHA) | No |
| altcha | ALTCHA challenge response (if using ALTCHA) | No |
Field Name Matching
Field names are matched case-insensitively for special fields like honeypot. Any field containing "honeypot" in its name (e.g., honeypot, _honeypot, honeypot-field) will be treated as a honeypot field.
Form Validation
Static Forms accepts any form data you send, but you can add client-side validation using HTML5 attributes:
Common Validation Attributes
| Attribute | Description | Example |
|---|---|---|
| required | Field must be filled | <input required /> |
| minlength | Minimum character count | <input minlength="3" /> |
| maxlength | Maximum character count | <input maxlength="100" /> |
| pattern | Regex pattern to match | <input pattern="[A-Za-z]+" /> |
| min | Minimum value (numbers) | <input type="number" min="0" /> |
| max | Maximum value (numbers) | <input type="number" max="100" /> |
File Uploads
To enable file uploads, you must add the enctype attribute to your form:
Pro Feature
File uploads require a Pro tier account. Free tier accounts cannot upload files. See File Uploads documentation for details.
Form Styling
Static Forms doesn't impose any styling requirements. You can style your forms however you like using CSS. Here's a basic example:
Best Practices
Use Semantic HTML
Use appropriate input types (email, tel, etc.) for better mobile experience and validation.
Add Labels
Always include <label> elements for accessibility and better user experience.
Validate on Client Side
Use HTML5 validation attributes to catch errors before submission, improving user experience.
Keep Field Names Consistent
Use consistent naming conventions across your forms to make it easier to process submissions.