SounnyForms Client SDK (sounny-forms)

The ultra-lightweight (2.5KB) official client SDK and React hook for SounnyForms — the zero-API-key serverless form processing backend and real-time lead manager.

⚡ Features

• Zero Configuration: Drop in and submit form data using only your email address or form ID.
• Built-in Anti-Spam: Automatic honeypot injection and focus velocity timers block 100% of crawler bots.
• First-Class React Hook: useSounnyForm with submitting states, error handling, and success events.
• Zero Dependencies: Pure vanilla JavaScript, 2.5KB gzipped.
• Universal: Works seamlessly with React, Next.js (App Router / Pages Router), Remix, Vite, Astro, and static HTML.

📦 Installation

npm install sounny-forms
# or
yarn add sounny-forms
# or
pnpm add sounny-forms

🚀 Usage

1. React / Next.js Hook (useSounnyForm)

import React from 'react';
import { useSounnyForm } from 'sounny-forms/react';

export default function ContactForm() {
  // Pass your formId or recipient email
  const { submitting, succeeded, error, handleSubmit } = useSounnyForm('YOUR_FORM_ID_OR_EMAIL');

  if (succeeded) {
    return <p className="text-green-600 font-medium">Thank you! Your message was sent.</p>;
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label>Your Email</label>
        <input type="email" name="email" required className="border p-2 w-full rounded" />
      </div>

      <div>
        <label>Your Message</label>
        <textarea name="message" required className="border p-2 w-full rounded" />
      </div>

      {error && <p className="text-red-500 text-sm">{error.message}</p>}

      <button
        type="submit"
        disabled={submitting}
        className="bg-orange-600 hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded"
      >
        {submitting ? 'Sending...' : 'Send Message'}
      </button>
    </form>
  );
}

2. Vanilla JavaScript / TypeScript (submitForm)

import { submitForm } from 'sounny-forms';

async function handleCustomSubmit() {
  try {
    const result = await submitForm('[email protected]', {
      name: 'Alex Rivera',
      email: '[email protected]',
      message: 'Interested in enterprise licensing.',
    });

    console.log('Submission confirmed:', result.submissionId);
  } catch (err) {
    console.error('Failed to submit:', err);
  }
}

3. Pure HTML / Script Tag (Zero Build)

<script src="https://cdn.jsdelivr.net/npm/sounny-forms@1/dist/sounny-forms.min.js"></script>

<form data-sounnyform="contact_form" action="https://forms.sounny.com/f/[email protected]" method="POST">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <textarea name="message" placeholder="Your Message" required></textarea>
  
  <button type="submit">Send Message</button>
</form>

📄 License

MIT © Dr. Moulay Anwar Sounny-Slitine