React Contact Form Backend Without Server Setup

npm install sounny-forms

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

export default function ContactForm() {
  // Pass your email address or custom form ID from the SounnyForms dashboard
  const { submitting, succeeded, error, handleSubmit } = useSounnyForm('hello@yourcompany.com');

  if (succeeded) {
    return (
      <div style={{ padding: '24px', background: '#ecfdf5', color: '#065f46', borderRadius: '12px', border: '1px solid #a7f3d0' }}>
        <h3 style={{ fontSize: '18px', fontWeight: 700, marginBottom: '6px' }}>Message Sent Successfully!</h3>
        <p>Thank you for reaching out. We will get back to you shortly.</p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '480px' }}>
      <label style={{ fontSize: '14px', fontWeight: 600, color: '#334155' }}>
        Your Name
        <input type="text" name="name" required style={{ width: '100%', marginTop: '4px', padding: '10px 14px', borderRadius: '8px', border: '1px solid #cbd5e1' }} />
      </label>

      <label style={{ fontSize: '14px', fontWeight: 600, color: '#334155' }}>
        Your Email Address
        <input type="email" name="email" required style={{ width: '100%', marginTop: '4px', padding: '10px 14px', borderRadius: '8px', border: '1px solid #cbd5e1' }} />
      </label>

      <label style={{ fontSize: '14px', fontWeight: 600, color: '#334155' }}>
        Message
        <textarea name="message" rows="4" required style={{ width: '100%', marginTop: '4px', padding: '10px 14px', borderRadius: '8px', border: '1px solid #cbd5e1' }}></textarea>
      </label>

      {error && <p style={{ color: '#dc2626', fontSize: '14px', fontWeight: 500 }}>{error.message}</p>}

      <button
        type="submit"
        disabled={submitting}
        style={{
          background: '#ff4d00',
          color: '#ffffff',
          fontWeight: 700,
          padding: '12px 24px',
          borderRadius: '8px',
          border: 'none',
          cursor: 'pointer',
          marginTop: '6px'
        }}
      >
        {submitting ? 'Transmitting...' : 'Send Inquiry'}
      </button>
    </form>
  );
}