Build a Contact Form with Velox Form (HTML + Fetch)

This guide shows a simple, reliable way to handle contact forms: your frontend sends JSON to a single endpoint, and you review submissions in the dashboard. It works for landing pages, static sites, and custom apps.

Step 1: Create your account and get an API key

• Sign up and open your dashboard.
• Create an API key (or use the default key if enabled).
• Keep the key private and use it only in your website integration code.

Step 2: Create an HTML form

<form id="contactForm">
  <input name="name" placeholder="Your name" required />
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit">Send</button>
</form>

Step 3: Send the submission using fetch

const form = document.getElementById('contactForm');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const fd = new FormData(form);
  const payload = Object.fromEntries(fd.entries());

  const res = await fetch('https://your-domain.com/api/submit', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'API-Key': 'YOUR_API_KEY'
    },
    body: JSON.stringify({
      form_name: 'Contact Form',
      data: payload
    })
  });

  const json = await res.json();
  if (!json.success) throw new Error(json.message || 'Submission failed');
  alert('Thanks! We received your message.');
});

Step 4: Verify in the dashboard

• Open the submissions inbox.
• Confirm the form name and captured data.
• Enable notifications/webhooks if you want automation.