Live demo

A real form. A real email. Try it.

Pick your framework. On the left is the complete component; on the right the very same component, running against the live Frontmail API. Send a message and watch it go through.

React Native

Live component · React

The live demo isn’t available on this environment

The code works as it is – create a free account, paste your own public key, service and template, and it runs on your site.

Start free

This demo is rate-limited. Messages go to the Frontmail team inbox, never to the address you enter.

Source code: InquiryForm.tsx

import { FrontmailForm, FrontmailProvider } from '@frontmail/react';
import type { FrontmailError, SendResult } from '@frontmail/react';

const options = {
  publicKey: 'pk_••••••••',
};

interface Props {
  onSuccess?: (result: SendResult) => void;
  onError?: (error: FrontmailError) => void;
}

export function InquiryForm({ onSuccess, onError }: Props) {
  return (
    <FrontmailProvider options={options}>
      <FrontmailForm
        serviceId="YOUR_SERVICE_ID"
        templateId="YOUR_TEMPLATE_ID"
        turnstileSiteKey="YOUR_TURNSTILE_SITE_KEY"
        onSuccess={onSuccess}
        onError={onError}
      >
        {({ status }) => (
          <>
            <label>
              Name
              <input name="name" autoComplete="name" required maxLength={200} />
            </label>
            <label>
              Email
              <input name="email" type="email" autoComplete="email" required />
            </label>
            <label>
              Message
              <textarea name="message" rows={4} required minLength={2} maxLength={5000} />
            </label>
            <button type="submit" disabled={status === 'sending'}>
              {status === 'sending' ? 'Sending…' : 'Send message'}
            </button>
          </>
        )}
      </FrontmailForm>
    </FrontmailProvider>
  );
}

The public key is masked here. Use your own from the dashboard – it’s safe in frontend code because allowed websites and CAPTCHA protect it.

Live component · Svelte

The live demo isn’t available on this environment

The code works as it is – create a free account, paste your own public key, service and template, and it runs on your site.

Start free

This demo is rate-limited. Messages go to the Frontmail team inbox, never to the address you enter.

Source code: InquiryForm.svelte

<script lang="ts">
  import { FrontmailForm, createFrontmail } from '@frontmail/svelte';
  import type { FrontmailError, SendResult } from '@frontmail/svelte';

  interface Props {
    onSuccess?: (result: SendResult) => void;
    onError?: (error: FrontmailError) => void;
  }

  let { onSuccess, onError }: Props = $props();

  const frontmail = createFrontmail({
    publicKey: 'pk_••••••••',
  });
</script>

<FrontmailForm
  {frontmail}
  serviceId="YOUR_SERVICE_ID"
  templateId="YOUR_TEMPLATE_ID"
  turnstileSiteKey="YOUR_TURNSTILE_SITE_KEY"
  {onSuccess}
  {onError}
>
  {#snippet children({ status })}
    <label>
      Name
      <input name="name" autocomplete="name" required maxlength="200" />
    </label>
    <label>
      Email
      <input name="email" type="email" autocomplete="email" required />
    </label>
    <label>
      Message
      <textarea name="message" rows="4" required minlength="2" maxlength="5000"></textarea>
    </label>
    <button type="submit" disabled={status === 'sending'}>
      {status === 'sending' ? 'Sending…' : 'Send message'}
    </button>
  {/snippet}
</FrontmailForm>

The public key is masked here. Use your own from the dashboard – it’s safe in frontend code because allowed websites and CAPTCHA protect it.

Live component · Vue

The live demo isn’t available on this environment

The code works as it is – create a free account, paste your own public key, service and template, and it runs on your site.

Start free

This demo is rate-limited. Messages go to the Frontmail team inbox, never to the address you enter.

Source code: InquiryForm.vue

<script setup lang="ts">
import { provide } from 'vue';
import { FrontmailForm, FrontmailKey, createClient } from '@frontmail/vue';
import type { FrontmailError, SendResult } from '@frontmail/vue';

const emit = defineEmits<{ success: [result: SendResult]; error: [error: FrontmailError] }>();

// In an app you would call app.use(Frontmail, { publicKey }) once in main.ts instead.
provide(
  FrontmailKey,
  createClient({
    publicKey: 'pk_••••••••',
  }),
);
</script>

<template>
  <FrontmailForm
    service-id="YOUR_SERVICE_ID"
    template-id="YOUR_TEMPLATE_ID"
    turnstile-site-key="YOUR_TURNSTILE_SITE_KEY"
    @success="(result) => emit('success', result)"
    @error="(error) => emit('error', error)"
  >
    <template #default="{ status }">
      <label>
        Name
        <input name="name" autocomplete="name" required maxlength="200" />
      </label>
      <label>
        Email
        <input name="email" type="email" autocomplete="email" required />
      </label>
      <label>
        Message
        <textarea name="message" rows="4" required minlength="2" maxlength="5000"></textarea>
      </label>
      <button type="submit" :disabled="status === 'sending'">
        {{ status === 'sending' ? 'Sending…' : 'Send message' }}
      </button>
    </template>
  </FrontmailForm>
</template>

The public key is masked here. Use your own from the dashboard – it’s safe in frontend code because allowed websites and CAPTCHA protect it.

Ready to put it on your site?

Create a free account, connect the email service you already use and pick a template from the gallery. The whole setup takes about fifteen minutes.

Start free Follow the tutorial