Documentation

Sendly is a simple API that allows you to handle form submissions and receive them as emails without setting up a backend.

1. Introduction

Welcome to Sendly. Our platform is designed to make form handling as seamless as possible. You construct your frontend, point your forms to our API, and we'll deliver the submissions directly to your inbox.

Key Benefit: No backend required. Just plug and play.

2. Getting Started

Create an Account

Copy API Key

Navigate to the specific Settings tab in your dashboard and safely copy your secret API key.

3. Basic Usage

Sendly is completely framework-agnostic. You can easily use native HTML forms or any library you choose. Make sure you place your API key securely into the apiKey field.

<form action="https://sendly-bay.vercel.app/api/send" method="POST">
  <!-- Place your Project API key here -->
  <input type="hidden" name="apiKey" value="sk_live_xxxxxxxxxxxxxxxx" />

  <label for="name">Name</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">Send Message</button>
</form>

After submission, Sendly securely processes your fields and directly drops a clean, formatted email into the account owner's inbox. Make sure to replace http://your-domain.com with your actual site URL.

Automatic Success Redirect

When your users submit a standard HTML form natively (without using JavaScript or fetch), our API automatically redirects them to a beautiful Sendly-hosted Success Page confirming their message was received. This page includes a small tag showing they are powered by Sendly.

4. API Endpoint

If you prefer using JavaScript (AJAX/Fetch), you can call our endpoint directly with JSON data.

POST/api/send

fetch('https://sendly-bay.vercel.app/api/send', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'x-api-key': 'sk_live_xxxxxxxxxxxxxxxx'
  },
  body: JSON.stringify({
    name: 'Jane Doe',
    email: 'jane@example.com',
    message: 'Hello, this API is amazing!'
  })
})

5. CORS & Security

Sendly has built-in CORS support, allowing you to call the API from any domain. You don't need to configure any extra headers on your server.

Supports application/json and application/x-www-form-urlencoded.
Always use your Secret API Key starting with sk_.
Keep your API keys private. Never share them in public repositories.

6. API Endpoint Details

POSThttps://sendly-bay.vercel.app/api/send

Required Fields

apiKey
Required Your Secret Token
The unique key to authenticate your project.
email
Required Sender Email
The email address of the person filling out the form.
message
Required Request Body
The body of the form submission.
name
Optional Sender Name
The sender's full name.

Formats: Send your request beautifully in application/json or application/x-www-form-urlencoded. We always return a predictable JSON response indicating success or an error string.

7. Integration Examples

Here is the best way to integrate Sendly into your existing projects. You can pass the API key either securely in the body payload or via the apikey header.

Vanilla JavaScript Fetch

fetch("https://sendly-bay.vercel.app/api/send", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "apikey": "sk_live_YOUR_API_KEY" // Pass API key in header. For security, always store your key in a .env file.
  },
  body: JSON.stringify({
    name: "John Doe",
    email: "john@example.com",
    message: "I am really interested in your services!"
  })
})
.then(response => response.json())
.then(data => {
  if (data.status === "success") {
    window.location.href = "https://sendly-bay.vercel.app/success";
  }
});

React / Next.js Component (Drop-in ready)

If you are using React or Next.js, you can seamlessly copy and paste this Contact Form component into your frontend project.

import { useState } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("Sending...");

    const formData = {
      name: e.target.name.value,
      email: e.target.email.value,
      message: e.target.message.value,
    };

    try {
      const res = await fetch("https://sendly-bay.vercel.app/api/send", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "apikey": "sk_live_YOUR_API_KEY" // Add your Secret API key here
        },
        body: JSON.stringify(formData)
      });
      
      const data = await res.json();
      if (data.status === "success") {
        // Automatically redirect to the Sendly visual Success Page ad!
        window.location.href = "https://sendly-bay.vercel.app/success";
      } else {
        setStatus("Error: " + data.message);
      }
    } catch (err) {
      setStatus("Failed to send the message.");
    }
  };

  return (
    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: '400px' }}>
      <input type="text" name="name" placeholder="Your Name" required style={{ padding: '0.5rem' }} />
      <input type="email" name="email" placeholder="Your Email" required style={{ padding: '0.5rem' }} />
      <textarea name="message" placeholder="Your Message" required style={{ padding: '0.5rem', minHeight: '100px' }} />
      <button type="submit" style={{ padding: '0.5rem', cursor: 'pointer' }}>Submit</button>
      {status && <p>{status}</p>}
    </form>
  );
}

8. How It Works

User beautifully submits the form on your website.

The payload request is safely sent directly to the Sendly API endpoint.

Sendly strictly validates your API key and the provided data.

A clean, formatted email is beautifully sent to the main account owner.

The safe submission is saved in your own dashboard for audit and future view.

9. Notes & Best Practices

Keep Your API Key Private!

For your absolute safety, NEVER paste your Secret API Key openly in public repositories or unprotected client-side code where anyone can scrape it. If you must embed it directly in HTML forms on your site, heavily restrict your key to only your approved domains via the Sendly dashboard.

✅ Frontend Validations

Validate form inputs heavily on the frontend (like email format validation) so your users get active immediate feedback before submit.

📩 Proper Formats

Use proper universally accepted email formats. Sendly actively rejects emails that don't match standard structural validation.

🌐 Domain Locking

While client-side API calls are possible, highly restrict and lock your API key to only your approved domains in the Sendly dashboard.

10. Error Handling

Sendly uses conventional HTTP response codes universally correctly to indicate the success or standard failure of an API request.

401 Unauthorized

Invalid API Key

Ensure your exact API key is correctly formatted and actively not revoked.

400 Bad Request

Missing Fields

The required email or full message variable payload is visibly entirely missing.

422 Unprocessable Element

Invalid Email Address

The string provided heavily lacks a correct proper generic domain logic configuration.

11. FAQ Section

Can I securely use this purely without any backend?

Absolutely! Sendly is exclusively designed logically exactly for frontend developers who want simple setup skipping tedious server-side API setups altogether. You can easily embed our key logically into your client-side form safely using domain-protection limits.

Is it forever free?

We inherently offer a genuinely generous free tier highly perfect automatically for personal tiny portfolios and independent small developer websites. You can actively upgrade gracefully as your requests successfully scale upward!

How many solid standard requests can I safely effectively send?

The active universal completely free tier automatically allows natively naturally strictly up to beautifully 100 safe successful form logical submissions inherently universally correctly per month.