Getting Started

Welcome to Formonger! This guide will help you get up and running with your first form endpoint in just a few minutes.

Quick Start

Visit formonger.com and create your account. You’ll automatically get a free workspace on the Hobby plan.

2. Create Your First Endpoint

Navigate to your workspace dashboard
Click “Create Endpoint”
Give your endpoint a name (e.g., “Contact Form”)
Define your form schema by adding fields:
- name (string, required)
- email (string, required, email format)
- message (string, optional)

3. Save Your Keys

After creating your endpoint, you’ll receive two keys:

Secret server key: keep this private and use it in Node.js, PHP, or backend code
Publishable browser key: safe to use in frontend code and browser SDKs

Both keys are shown once. Save them securely.

4. Test Your Endpoint

Use this cURL command to test your endpoint:


curl -X POST https://api.formonger.com/submit \
  -H "Authorization: Bearer YOUR_SECRET_SERVER_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "John Doe",
    "email": "john@example.com",
    "message": "Hello, this is a test submission!"
  }'

Integration Examples

HTML Form


<form id="contact-form">
  <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"></textarea>
 
  <button type="submit">Submit</button>
</form>
 
<script>
  document.getElementById("contact-form").addEventListener("submit", async (event) => {
    event.preventDefault();
 
    const formData = new FormData(event.currentTarget);
    const response = await fetch("https://api.formonger.com/submit", {
      method: "POST",
      headers: {
        "Authorization": "Bearer YOUR_PUBLISHABLE_BROWSER_KEY",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(Object.fromEntries(formData)),
    });
 
    console.log(await response.json());
  });
</script>

JavaScript (Fetch API)


const form = document.getElementById('contact-form');
 
form.addEventListener('submit', async (e) => {
  e.preventDefault();
 
  const formData = new FormData(form);
  const data = Object.fromEntries(formData);
 
  try {
      const response = await fetch('https://api.formonger.com/submit', {
        method: 'POST',
        headers: {
          'Authorization': 'Bearer YOUR_PUBLISHABLE_BROWSER_KEY',
          'Content-Type': 'application/json'
        },
      body: JSON.stringify(data)
    });
 
    const result = await response.json();
 
    if (response.ok) {
      alert('Form submitted successfully!');
      form.reset();
    } else {
      alert('Error: ' + result.error);
    }
  } catch (error) {
    console.error('Submission failed:', error);
  }
});

React Hook


import { useState } from 'react';
 
function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
 
  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
 
    try {
      const response = await fetch('https://api.formonger.com/submit', {
        method: 'POST',
        headers: {
          'Authorization': 'Bearer YOUR_PUBLISHABLE_BROWSER_KEY',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      });
 
      if (response.ok) {
        alert('Form submitted successfully!');
        setFormData({ name: '', email: '', message: '' });
      } else {
        const error = await response.json();
        alert('Error: ' + error.error);
      }
    } catch (error) {
      console.error('Submission failed:', error);
    } finally {
      setIsSubmitting(false);
    }
  };
 
  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          id="name"
          name="name"
          value={formData.name}
          onChange={handleChange}
          required
        />
      </div>
 
      <div>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          required
        />
      </div>
 
      <div>
        <label htmlFor="message">Message:</label>
        <textarea
          id="message"
          name="message"
          value={formData.message}
          onChange={handleChange}
        />
      </div>
 
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  );
}

Next Steps

Need Help?

If you run into any issues, check out our troubleshooting guide or contact our support team at support@formonger.com.