Quick Start

Quick Start

Quick Start

This guide will have you collecting form submissions in just a few minutes.

Prerequisites

  • A Formic account (sign up at audelabs.com)
  • An API key for your project
  • A form slug for your specific form

Step 1: Install the Client

Configure the private Audelabs npm registry in the consuming project:

# .npmrc
@audelabs:registry=https://git.audelabs.com/api/packages/Audelabs/npm/

No token is required for public packages. Add an auth token only when consuming private packages from the same registry.

Then install the client:

pnpm add @audelabs/formic-client

Step 2: Configure the Client

import { FormicClient } from '@audelabs/formic-client';

const formic = new FormicClient({
  apiKey: 'your-api-key',
  slug: 'your-form-slug',
});

Step 3: Use in Your Framework

Astro

// src/pages/api/formic.ts
import { handleFormicRequest } from '@audelabs/formic-client/adapters/astro';

export const POST = handleFormicRequest({
  apiKey: import.meta.env.FORMIC_API_KEY!,
  slug: 'your-form-slug',
});

Next.js

// app/api/formic/route.ts
import { handleFormicRequest } from '@audelabs/formic-client/adapters/next';

export const POST = handleFormicRequest({
  apiKey: process.env.FORMIC_API_KEY!,
  slug: 'your-form-slug',
}).POST;

Remix

// app/routes/formic.tsx
import { handleFormicRequest } from '@audelabs/formic-client/adapters/remix';

export const action = handleFormicRequest({
  apiKey: process.env.FORMIC_API_KEY!,
  slug: 'your-form-slug',
});

Step 4: Create Your Form

In your frontend, create a form that posts to your endpoint:

<form action="/api/formic" method="POST">
  <input type="text" name="name" placeholder="Your name" required />
  <input type="email" name="email" placeholder="Your email" required />
  <button type="submit">Submit</button>
</form>

That’s it! Your form submissions will now be sent through Formic.

Next Steps