---
title: "Add forms to Neocities"
description: "Add working contact forms to your Neocities website. Handle submissions, file uploads, and notifications, with no server-side code required."
url: https://forminit.com/docs/neocities/
---
# Add forms to Neocities
Neocities is a free static website hosting service that lets you create HTML, CSS, and JavaScript websites. Since Neocities doesn't support server-side code (like PHP or Node.js), you need a form backend service to handle form submissions.
**Forminit** handles everything for you:
- **Receives and stores submissions** — No database setup required
- **Email notifications** — Get notified when someone submits your form
- **Spam protection** — Built-in rate limiting and optional CAPTCHA support
- **File uploads** — Accept files up to 25 MB
- **Validation** — Automatic email, phone, and URL validation
**Requirements:**
- A Neocities account with a website
- A Forminit account and Form ID
---
## Quick Start
### Step 1: Create a Form in Forminit
1. Sign up or log in at [forminit.com](https://forminit.com)
2. Create a new form from your dashboard
3. Copy your **Form ID** (looks like `frm_abc123xyz`)
4. **Important:** Set authentication mode to **"Public"** in Form Settings
### Step 2: Add the Form HTML
Create or edit your HTML file on Neocities:
```html
Contact Me
Contact Me
```
### Step 3: Replace the Form ID
Find this line in the code:
```javascript
const FORM_ID = 'YOUR_FORM_ID';
```
Replace `YOUR_FORM_ID` with your actual Form ID from Forminit (e.g., `frm_abc123xyz`).
### Step 4: Upload to Neocities
1. Log in to your Neocities dashboard
2. Upload the HTML file (or edit an existing page)
3. Visit your page and test the form
---
## Field Naming Convention
Forminit uses a special naming convention for form fields. All field names must start with `fi-` followed by the block type and field name.
### Sender Fields (Submitter Information)
Use these for collecting information about the person filling out the form:
| Field | Name Attribute | Description |
|-------|----------------|-------------|
| Email | `fi-sender-email` | Submitter's email address |
| First Name | `fi-sender-firstName` | First name |
| Last Name | `fi-sender-lastName` | Last name |
| Full Name | `fi-sender-fullName` | Full name (use instead of first/last) |
| Phone | `fi-sender-phone` | Phone number (E.164 format) |
| Company | `fi-sender-company` | Company name |
| Position | `fi-sender-position` | Job title |
**At least one** sender field is required (email, name, or phone).
### Custom Fields
For additional data, use the appropriate block type:
| Type | Pattern | Example | Use For |
|------|---------|---------|---------|
| Text | `fi-text-{name}` | `fi-text-message` | Messages, comments |
| Number | `fi-number-{name}` | `fi-number-quantity` | Quantities, amounts |
| Email | `fi-email-{name}` | `fi-email-referral` | Additional emails |
| Phone | `fi-phone-{name}` | `fi-phone-emergency` | Additional phones |
| URL | `fi-url-{name}` | `fi-url-website` | Links |
| Date | `fi-date-{name}` | `fi-date-appointment` | Dates (ISO 8601) |
| Rating | `fi-rating-{name}` | `fi-rating-satisfaction` | Ratings (1-5) |
| Select | `fi-select-{name}` | `fi-select-category` | Dropdowns, radios |
| Country | `fi-country-{name}` | `fi-country-shipping` | Country codes |
| File | `fi-file-{name}` | `fi-file-attachment` | File uploads |
For a complete reference, see the [Form Blocks documentation](https://forminit.com/docs/form-blocks/).
---
## Examples
### Feedback Form with Rating
```html
```
### Newsletter Signup
```html
```
### Contact Form with Subject Dropdown
```html
```
### File Upload Form
```html
```
> **Note**
>
> File uploads count toward the 25 MB per submission limit. See [File Uploads documentation](https://forminit.com/docs/file-upload/) for more details.
---
## Complete JavaScript Template
Here's a reusable JavaScript template you can adapt for any form:
```html
```
---
## Response Handling
When a form is submitted successfully, Forminit returns:
```javascript
{
data: {
hashId: "7LMIBoYY74JOCp1k", // Unique submission ID
date: "2026-01-17 14:30:00", // Submission timestamp
blocks: { // Submitted values
sender: {
firstName: "John",
lastName: "Doe",
email: "john@example.com"
},
message: "Hello!"
}
},
redirectUrl: "https://forminit.com/thank-you"
}
```
If there's an error:
```javascript
{
error: {
error: "FI_SCHEMA_FORMAT_EMAIL",
code: 400,
message: "Invalid email format. Please enter a valid email address."
}
}
```
---
## Redirecting After Submission
If you want to redirect users to a thank-you page instead of showing an inline message:
```javascript
const { data, redirectUrl, error } = await forminit.submit(FORM_ID, formData);
if (error) {
// Handle error
return;
}
// Redirect to thank you page
window.location.href = '/thanks.html';
// Or use Forminit's default thank you page:
// window.location.href = redirectUrl;
```
---
## Validation
Forminit automatically validates:
| Field Type | Validation |
|------------|------------|
| Email | Valid email format |
| Phone | E.164 format (+12025550123) |
| URL | Valid URL format |
| Rating | Must be 1-5 |
| Country | ISO 3166-1 alpha-2 code |
| Date | ISO 8601 format |
### Client-Side Validation Tips
Add HTML5 validation attributes for better user experience:
```html
```
---
## Spam Protection
### Option 1: Honeypot Field
Add a hidden field that bots will fill out but humans won't:
```html
```
See the [Honeypot documentation](https://forminit.com/docs/honeypot/) for more details.
### Option 2: Cloudflare Turnstile, reCAPTCHA, or hCaptcha
Forminit supports CAPTCHA integration:
- [Cloudflare Turnstile Integration](https://forminit.com/docs/cloudflare-turnstile/)
- [reCAPTCHA Integration](https://forminit.com/docs/recaptcha/)
- [hCaptcha Integration](https://forminit.com/docs/hcaptcha/)
---
## Viewing Submissions
All form submissions appear in your Forminit dashboard at [forminit.com](https://forminit.com):
- View individual submissions
- Search and filter
- Export to CSV
- Set up email notifications
- Configure webhooks for integrations
---
## Next Steps
1. [View your submissions](https://app.forminit.com/) in the Forminit dashboard
2. Set up [email notifications](https://forminit.com/docs/email-notifications/) for new submissions
3. Explore [webhook integrations](https://forminit.com/docs/webhooks/) for advanced workflows