---
title: "Add a form with HTML and JavaScript"
description: "Embed a published Fillo form with plain script tags — no build step or package manager needed."
order: 16
type: "guide"
topic: "Frameworks"
tags:
  - "HTML"
  - "JavaScript"
  - "CDN"
  - "no build step"
updated: "2026-07-15"
---

No package manager, no framework, no build step. The standalone `@usefillo/dom` bundle exposes a global `Fillo` object you can call from a plain script tag.

## Add the stylesheet and script

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/@usefillo/dom@0.8/dist/styles.css"
/>

<section aria-labelledby="contact-title">
  <h2 id="contact-title">Contact us</h2>
  <div id="fillo-contact"></div>
</section>

<script src="https://unpkg.com/@usefillo/dom@0.8/dist/standalone.global.js"></script>
<script>
  Fillo.renderForm("#fillo-contact", {
    formId: "your-published-form-id",
    onSubmitted: function (responseId) {
      console.info("Fillo response", responseId);
    },
  });
</script>
```

Pin the major version as shown and test upgrades before bumping it. Serve the production page over HTTPS. If the site runs a Content Security Policy, allow the CDN in `script-src` and `style-src`, and the Fillo API origin in `connect-src`.

## Prefer a module build when you can

If you can install packages, do — you get version locking, type information, and dependency auditing from your build tool. The standalone bundle is still the right call for static pages and content systems that won't run a build.

Published forms load and accept responses without any key. Never paste an `fsk_`, `fcli_`, identity secret, webhook secret, or storage credential into HTML.

## Try it

[Start with a prompt](/start?from=guide-html-js-form) and your coding agent builds the first form, staged for your review — or [open the editor](/new).

## Related

- [Contact example](/examples#contact): See the validation, loading, and success states.
- [Embed quickstart](/docs/embed): Install with a package manager or define the form in code.
- [Blocked by CORS policy](/docs/troubleshooting/cors-error): Configure API and storage origins correctly.
- [Styling](/docs/styling): Override default tokens and native controls.