API4FORMS IS MIGRATING TO CLOUD!!

Form Submissions Directly to mail box.

API4FORMS allows you to securely manage form submissions enabling form data to be forwarded directly to your email address. NO BACKEND REQUIRED

HOW TO USE API4FORMS

Generate your unique API key using Email.

Copy the API key into your HTML form integration.

View form submissions directly in your email inbox.

HTML


<form action="https://api-4forms.vercel.app/YOUR_API_KEY_HERE/forms/submit" method="POST">
  <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">Submit</button>
</form>

JAVASCRIPT


const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  const data = new FormData(form);
  
  fetch('https://api-4forms.vercel.app/YOUR_API_KEY_HERE/forms/submit', {
    method: 'POST',
    body: data
  })
  .then(response => response.json())
  .then(data => {
    console.log('Form submitted successfully:', data);
  })
  .catch(error => {
    console.error('Error submitting form:', error);
  });
});

REACT


import React, { useState } from 'react';

export default function Form() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    
    fetch('https://api-4forms.vercel.app/YOUR_API_KEY_HERE/forms/submit', {
      method: 'POST',
      body: JSON.stringify(formData),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(response => response.json())
    .then(data => {
      console.log('Form submitted successfully:', data);
    })
    .catch(error => {
      console.error('Error submitting form:', error);
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name:</label>
      <input
        type="text"
        id="name"
        name="name"
        value={formData.name}
        onChange={handleChange}
        required
      />
      
      <label htmlFor="email">Email:</label>
      <input
        type="email"
        id="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        required
      />

      <label htmlFor="message">Message:</label>
      <textarea
        id="message"
        name="message"
        value={formData.message}
        onChange={handleChange}
        required
      />

      <button type="submit">Submit</button>
    </form>
  );
}