Živá ukázka

Skutečný formulář. Skutečný e-mail. Vyzkoušejte si to.

Vyberte si framework. Vlevo je celá komponenta, vpravo úplně stejná komponenta běžící proti ostrému API Frontmailu. Pošlete zprávu a sledujte, jak odchází.

React Native

Živá komponenta · React

Živá ukázka v tomhle prostředí není k dispozici

Kód funguje tak, jak je – založte si účet zdarma, doplňte vlastní veřejný klíč, službu a šablonu a poběží na vašem webu.

Začít zdarma

Ukázka má omezený počet odeslání. Zprávy chodí do schránky týmu Frontmailu, nikdy na adresu, kterou zadáte.

Zdrojový kód: 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>
              Jméno
              <input name="name" autoComplete="name" required maxLength={200} />
            </label>
            <label>
              E-mail
              <input name="email" type="email" autoComplete="email" required />
            </label>
            <label>
              Zpráva
              <textarea name="message" rows={4} required minLength={2} maxLength={5000} />
            </label>
            <button type="submit" disabled={status === 'sending'}>
              {status === 'sending' ? 'Odesílám…' : 'Odeslat zprávu'}
            </button>
          </>
        )}
      </FrontmailForm>
    </FrontmailProvider>
  );
}

Veřejný klíč je tu skrytý. Použijte svůj vlastní z dashboardu – ve frontendovém kódu je v bezpečí, chrání ho povolené weby a CAPTCHA.

Živá komponenta · Svelte

Živá ukázka v tomhle prostředí není k dispozici

Kód funguje tak, jak je – založte si účet zdarma, doplňte vlastní veřejný klíč, službu a šablonu a poběží na vašem webu.

Začít zdarma

Ukázka má omezený počet odeslání. Zprávy chodí do schránky týmu Frontmailu, nikdy na adresu, kterou zadáte.

Zdrojový kód: 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>
      Jméno
      <input name="name" autocomplete="name" required maxlength="200" />
    </label>
    <label>
      E-mail
      <input name="email" type="email" autocomplete="email" required />
    </label>
    <label>
      Zpráva
      <textarea name="message" rows="4" required minlength="2" maxlength="5000"></textarea>
    </label>
    <button type="submit" disabled={status === 'sending'}>
      {status === 'sending' ? 'Odesílám…' : 'Odeslat zprávu'}
    </button>
  {/snippet}
</FrontmailForm>

Veřejný klíč je tu skrytý. Použijte svůj vlastní z dashboardu – ve frontendovém kódu je v bezpečí, chrání ho povolené weby a CAPTCHA.

Živá komponenta · Vue

Živá ukázka v tomhle prostředí není k dispozici

Kód funguje tak, jak je – založte si účet zdarma, doplňte vlastní veřejný klíč, službu a šablonu a poběží na vašem webu.

Začít zdarma

Ukázka má omezený počet odeslání. Zprávy chodí do schránky týmu Frontmailu, nikdy na adresu, kterou zadáte.

Zdrojový kód: 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>
        Jméno
        <input name="name" autocomplete="name" required maxlength="200" />
      </label>
      <label>
        E-mail
        <input name="email" type="email" autocomplete="email" required />
      </label>
      <label>
        Zpráva
        <textarea name="message" rows="4" required minlength="2" maxlength="5000"></textarea>
      </label>
      <button type="submit" :disabled="status === 'sending'">
        {{ status === 'sending' ? 'Odesílám…' : 'Odeslat zprávu' }}
      </button>
    </template>
  </FrontmailForm>
</template>

Veřejný klíč je tu skrytý. Použijte svůj vlastní z dashboardu – ve frontendovém kódu je v bezpečí, chrání ho povolené weby a CAPTCHA.

Chcete to mít na svém webu?

Založte si účet zdarma, připojte e-mailovou službu, kterou už používáte, a vyberte šablonu z galerie. Celé nastavení zabere zhruba čtvrt hodiny.

Začít zdarma Projít návod