Vite static

Contact form for a Vite static site without a backend.

Vite's production build is a set of static assets in dist/. Its development server and client bundle do not process production form submissions, so use a standard HTML form that posts directly to FormsFort.

Start paid plan Book free migration

How it works

Three steps to production forms.

Create a hosted form

Create a FormsFort form, configure notifications, and copy the public access key.

Add static markup

Place the form in index.html or your Vite app's rendered component. The action is an ordinary cross-site POST.

Deploy dist/

Run vite build and serve dist/ from a static host. Do not rely on the Vite dev server or client JavaScript to receive submissions.

Setup

Vite index page with an HTML contact form

<!-- index.html -->
<section aria-labelledby="vite-contact-title">
  <h1 id="vite-contact-title">Request a demo</h1>
  <form action="https://api.formsfort.com/submit" method="POST">
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
    <input type="hidden" name="subject" value="New Vite demo request">

    <label for="vite-company">Company</label>
    <input id="vite-company" name="company" type="text" autocomplete="organization" required>

    <label for="vite-email">Work email</label>
    <input id="vite-email" name="email" type="email" autocomplete="email" required>

    <label for="vite-team-size">Team size</label>
    <input id="vite-team-size" name="team_size" type="number" min="1" required>

    <label for="vite-message">What are you building?</label>
    <textarea id="vite-message" name="message" rows="4" required></textarea>

    <input type="checkbox" name="botcheck" style="display:none">
    <button type="submit">Request a demo</button>
  </form>
</section>

Start paid plan

Migration

Migration checklist.

Move an existing form in minutes without rebuilding markup.

Create a FormsFort form and copy the public access key.

Add the markup to index.html or the component rendered by the Vite entry point.

Set the action to https://api.formsfort.com/submit and keep method=POST.

Use the public access key only; do not put API secrets in the Vite client bundle.

Run vite build and deploy dist/ to the static host that serves the site.

Submit a demo request from the deployed URL and verify the configured notification.

Related Resources

Keep building from here.

HTML form template generator

Generate a plain HTML starting point before wiring it into a Vite entry page.

Form endpoint guide

Review the endpoint fields and response behavior behind a direct POST.

Lead capture form

Shape a Vite static form around qualified demo and sales inquiries.

FAQ

Common questions.

Is the Vite development server a form backend?

No. The Vite dev server is for local development, and vite build emits static assets in dist/. Production submissions need a hosted endpoint such as FormsFort.

Does a Vite static form need client-side JavaScript?

No. A native form POST is enough for navigation to the FormsFort response. Add JavaScript only if you need a custom loading or inline-success experience.

Where should I put the form in a Vite project?

Use index.html for a plain static page, or render equivalent markup from the app entry point. In both cases the generated browser HTML posts to FormsFort.

Can I use Vite's environment variables for the access key?

Only use a public access key in client-exposed markup. Vite replaces client environment variables at build time, so private API keys and webhook secrets must not be placed there.

Stop managing form servers.

Create a production form endpoint, migrate your first form free, and scale when you are ready.

Start paid plan Book free migration