Examples

"use client";
import { useMailprex } from "mailprex";
 
const ContactForm = () => {
  const { formData, handleChange, handleSubmit, response } = useMailprex({
    url: "https://api.mailprex.excelso.xyz/email/send",
    webName: "Your Website",
    emailDestiny: "you@example.com",
    formToken: process.env.NEXT_PUBLIC_MAILPREX_FORM_TOKEN!,
  });
 
  return (
    <form onSubmit={handleSubmit} className="max-w-lg mx-auto p-4">
      <label htmlFor="fullname">Full name *</label>
      <input
        id="fullname"
        name="fullname"
        value={formData.fullname}
        onChange={handleChange}
        required
      />
 
      <label htmlFor="email">Email *</label>
      <input
        id="email"
        name="email"
        type="email"
        value={formData.email}
        onChange={handleChange}
        required
      />
 
      <label htmlFor="message">Message *</label>
      <textarea
        id="message"
        name="message"
        value={formData.message}
        onChange={handleChange}
        required
      />
 
      <button type="submit">Send</button>
 
      {response.loading && <p>Sending…</p>}
      {response.error && <p>Failed: {response.error}</p>}
      {response.data && <p>Message sent!</p>}
    </form>
  );
};
 
export default ContactForm;

"use client";
import { useMailprexForm } from "mailprex";
 
export function LeadForm() {
  const { fields, handleChange, handleSubmit, response } = useMailprexForm({
    url: "https://api.mailprex.excelso.xyz/email/send",
    webName: "Agency Site",
    emailDestiny: "hello@example.com",
    formToken: process.env.NEXT_PUBLIC_MAILPREX_FORM_TOKEN!,
    initialFields: {
      fullname: "",
      email: "",
      message: "",
      company: "",
      budget: "",
    },
  });
 
  return (
    <form onSubmit={handleSubmit}>
      <input name="fullname" value={fields.fullname} onChange={handleChange} />
      <input name="email" value={fields.email} onChange={handleChange} />
      <input name="company" value={fields.company} onChange={handleChange} />
      <input name="budget" value={fields.budget} onChange={handleChange} />
      <textarea name="message" value={fields.message} onChange={handleChange} />
      <button type="submit">Send</button>
      {response.error && <p>{response.error}</p>}
    </form>
  );
}

import { sendMailprex } from "mailprex";
 
document.querySelector("form")?.addEventListener("submit", async (e) => {
  e.preventDefault();
  const form = e.target as HTMLFormElement;
  const data = new FormData(form);
 
  const result = await sendMailprex({
    url: "https://api.mailprex.excelso.xyz/email/send",
    formToken: import.meta.env.VITE_MAILPREX_TOKEN,
    webName: "Landing Page",
    emailDestiny: "you@example.com",
    fields: Object.fromEntries(data.entries()) as Record<string, string>,
  });
 
  alert(result.ok ? "Sent!" : result.error);
});