> ## Documentation Index
> Fetch the complete documentation index at: https://docs.liteshop.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Build a Site with HTML and JavaScript

> Write a one-page Site with a contact form, package it as a ZIP file, and publish it on Liteshop.

In this quickstart, you build a one-page Site with a working contact form,
without a framework or a build step. If you use a framework, see the
[framework guides](https://docs.liteshop.me/frameworks/react.md) instead.

## Before you begin

* Sign in to the [Liteshop dashboard](https://app.liteshop.me).
* Install a tool that creates ZIP files. The examples use the `zip` command,
  which macOS and most Linux distributions include.

## Create the files

1. Create a folder named `my-site`.

2. In `my-site`, create `liteshop.json`. This manifest declares the Site and
   its contact Form:

   ```json theme={null}
   {
     "$schema": "https://docs.liteshop.me/schemas/site-v0.1.json",
     "specVersion": "0.1",
     "site": {
       "name": "My Site",
       "defaultLocale": "en",
       "supportedLocales": ["en"],
       "timezone": "Europe/Paris"
     },
     "frontend": {
       "entry": "index.html"
     },
     "capabilities": {
       "forms": [
         {
           "id": "contact",
           "name": { "en": "Contact" },
           "fields": [
             { "id": "email", "type": "email", "label": { "en": "Email" }, "required": true },
             { "id": "message", "type": "textarea", "label": { "en": "Message" }, "required": true }
           ]
         }
       ]
     }
   }
   ```

3. Create `index.html`. The page loads the Liteshop SDK from the Site's own
   address, `/_liteshop/sdk/v1.js`, before your script:

   ```html theme={null}
   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <title>My Site</title>
     </head>
     <body>
       <h1>Contact us</h1>
       <form id="contact-form">
         <label>Email <input name="email" type="email" required /></label>
         <label>Message <textarea name="message" required></textarea></label>
         <button type="submit">Send</button>
         <p id="status" role="status"></p>
       </form>
       <script src="/_liteshop/sdk/v1.js"></script>
       <script src="main.js"></script>
     </body>
   </html>
   ```

4. Create `main.js`. It sends the form to Liteshop instead of letting the
   browser post it:

   ```js theme={null}
   const form = document.querySelector("#contact-form");
   const status = document.querySelector("#status");

   form.addEventListener("submit", async (event) => {
     event.preventDefault();
     const data = new FormData(form);
     try {
       await liteshop.forms.submit("contact", {
         email: String(data.get("email")),
         message: String(data.get("message")),
       });
       form.reset();
       status.textContent = "Thanks, your message was sent.";
     } catch (error) {
       status.textContent = error.message;
     }
   });
   ```

   Pass the Form ID as a literal string, as shown. Liteshop reads that call in
   your JavaScript to check that the declared Form has a handler.

## Package and publish the Site

1. Create a ZIP file of the folder's contents, so that `index.html` and
   `liteshop.json` are at the root of the archive:

   ```sh theme={null}
   cd my-site
   zip -r ../site.zip .
   ```

2. In the Liteshop dashboard, click **Website** > **Upload files**.

3. Enter a Site name and subdomain, select `site.zip`, and click
   **Check and publish**.

If validation fails, Liteshop lists each problem and how to fix it. For an
explanation of each code, see [Validation errors](https://docs.liteshop.me/reference/validation-errors.md).

## Test the form

1. Open the live Site, for example `https://my-site.liteshop.me`.
2. Send a message with the form.
3. In the Liteshop dashboard, click **Messages**. Your message appears there.

## What's next

* [Test the Site on your computer](https://docs.liteshop.me/develop/local-development.md)
* [Publish updates, preview them, and undo them](https://docs.liteshop.me/develop/deploy.md)
* Add [bookings](https://docs.liteshop.me/bookings.md) or a [catalogue](https://docs.liteshop.me/reference/catalogue.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.