How to Create a Contact Form with Tailwind CSS and Host it on Neocities

Step 1: Set Up Your Project

Create a project folder, e.g., contact-form/. Inside the folder, create an index.html file.

Step 2: Add Tailwind CSS

Since Neocities doesn't support Node.js, we'll use Tailwind’s CDN. Add this inside <head> in index.html:

<script src="https://cdn.tailwindcss.com"></script>

Step 3: Use FabForm.io for Form Handling

1. Sign up on FabForm.io.

2. Click "Create a New Form".

3. Copy the form ID and replace {your-fabform-id} in the form action.

Step 4: Upload to Neocities

1. Sign up at Neocities.

2. Click "New Site".

3. Go to File Manager and upload index.html.

Final Contact Form Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-100">
    <div class="bg-white shadow-md rounded-lg p-6 w-full max-w-md">
        <h2 class="text-xl font-bold mb-4 text-gray-800">Contact Us</h2>
        <form action="https://fabform.io/f/{your-fabform-id}" method="POST" class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700">Name</label>
                <input type="text" name="name" required class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Email</label>
                <input type="email" name="email" required class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Message</label>
                <textarea name="message" rows="4" required class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
            </div>
            <button type="submit" class="w-full bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition">Send</button>
        </form>
    </div>
</body>
</html>

Why Use FabForm.io?

Looking for a hassle-free way to handle form submissions? Fabform is a smart form backend is a powerful and easy-to-use form backend that takes care of spam filtering, email notifications, and submission storage—so you can focus on building great forms.

No coding required, just plug it in and start collecting responses instantly!