Živá ukážka
Skutočný formulár. Skutočný e-mail. Vyskúšajte to.
Vyberte si framework. Vľavo je kompletný komponent, vpravo presne ten istý komponent spustený proti živému Frontmail API. Odošlite správu a sledujte, ako prechádza.
Živý komponent · React
Táto ukážka má obmedzený počet požiadaviek. Správy idú do schránky tímu Frontmail, nikdy nie na adresu, ktorú 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="tpl_01m3hk61yth7gefvf2s5h7gefv"
turnstileSiteKey="YOUR_TURNSTILE_SITE_KEY"
onSuccess={onSuccess}
onError={onError}
>
{({ status }) => (
<>
<label>
Meno
<input name="name" autoComplete="name" required maxLength={200} />
</label>
<label>
E-mail
<input name="email" type="email" autoComplete="email" required />
</label>
<label>
Správa
<textarea name="message" rows={4} required minLength={2} maxLength={5000} />
</label>
<button type="submit" disabled={status === 'sending'}>
{status === 'sending' ? 'Odosiela sa…' : 'Odoslať správu'}
</button>
</>
)}
</FrontmailForm>
</FrontmailProvider>
);
}Verejný kľúč je tu zamaskovaný. Použite vlastný z dashboardu – vo frontendovom kóde je v bezpečí, pretože ho chránia povolené weby a CAPTCHA.
Živý komponent · Svelte
Táto ukážka má obmedzený počet požiadaviek. Správy idú do schránky tímu Frontmail, nikdy nie na adresu, ktorú 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="tpl_01m3hk61yth7gefvf2s5h7gefv"
turnstileSiteKey="YOUR_TURNSTILE_SITE_KEY"
{onSuccess}
{onError}
>
{#snippet children({ status })}
<label>
Meno
<input name="name" autocomplete="name" required maxlength="200" />
</label>
<label>
E-mail
<input name="email" type="email" autocomplete="email" required />
</label>
<label>
Správa
<textarea name="message" rows="4" required minlength="2" maxlength="5000"></textarea>
</label>
<button type="submit" disabled={status === 'sending'}>
{status === 'sending' ? 'Odosiela sa…' : 'Odoslať správu'}
</button>
{/snippet}
</FrontmailForm>Verejný kľúč je tu zamaskovaný. Použite vlastný z dashboardu – vo frontendovom kóde je v bezpečí, pretože ho chránia povolené weby a CAPTCHA.
Živý komponent · Vue
Táto ukážka má obmedzený počet požiadaviek. Správy idú do schránky tímu Frontmail, nikdy nie na adresu, ktorú 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="tpl_01m3hk61yth7gefvf2s5h7gefv"
turnstile-site-key="YOUR_TURNSTILE_SITE_KEY"
@success="(result) => emit('success', result)"
@error="(error) => emit('error', error)"
>
<template #default="{ status }">
<label>
Meno
<input name="name" autocomplete="name" required maxlength="200" />
</label>
<label>
E-mail
<input name="email" type="email" autocomplete="email" required />
</label>
<label>
Správa
<textarea name="message" rows="4" required minlength="2" maxlength="5000"></textarea>
</label>
<button type="submit" :disabled="status === 'sending'">
{{ status === 'sending' ? 'Odosiela sa…' : 'Odoslať správu' }}
</button>
</template>
</FrontmailForm>
</template>Verejný kľúč je tu zamaskovaný. Použite vlastný z dashboardu – vo frontendovom kóde je v bezpečí, pretože ho chránia povolené weby a CAPTCHA.
Chcete ho mať na svojom webe?
Založte si bezplatný účet, pripojte e-mailovú službu, ktorú už používate, a vyberte si šablónu z galérie. Celé nastavenie zaberie asi pätnásť minút.