Formbase + HTML Example

A simple contact form example using plain HTML, CSS, and JavaScript with Formbase.

What is Formbase?

Formbase is a form backend service that handles form submissions for you. No server code needed - just point your form to Formbase and receive submissions via email or webhooks.

Quick Start

1. Clone this repository:

   git clone https://github.com/formbase-dev/formbase-html-example.git
   cd formbase-html-example

2. Configure your Form ID:

   • Sign up at formbase.dev and create a form
   • Copy your Form ID
   • Open index.html and replace YOUR_FORM_ID with your actual Form ID

3. Open index.html in your browser or serve with any static file server:

   # Using Python
   python -m http.server 8000
   
   # Using Node.js (npx)
   npx serve

How it Works

1. User fills out the contact form (name, email, message)
2. On submit, the form data is POSTed to https://formbase.dev/s/{YOUR_FORM_ID}
3. Formbase processes the submission and sends you a notification
4. User is redirected to a thank-you page

Project Structure

├── index.html      # Home page with contact form
├── thank-you.html  # Success page after submission
├── README.md
└── LICENSE

Customization

Adding Fields

Add new input fields in index.html:

<div>
  <label for="phone">Phone</label>
  <input type="tel" id="phone" name="phone" />
</div>

Changing Styles

This example uses Tailwind CSS via CDN. Modify the classes on any element to change its appearance, or replace with your own CSS.

Tech Stack

• HTML5
• JavaScript (Vanilla)
• Tailwind CSS (via CDN)

Links

• Formbase - Form backend service
• Formbase Documentation
• Other Formbase Examples

License

MIT