Form Alert Form Alert

← All guides

Add form notifications to an HTML website

This guide shows you how to add a contact form to any HTML page and receive submissions directly in your email inbox. No JavaScript required.

Prerequisites

Basic form

Add this form to your HTML page. Replace YOUR_ACCESS_KEY with your actual access key.

<form
  action="https://api.form-alert.com/v1/submit"
  method="POST"
>
  <input
    type="hidden"
    name="access_key"
    value="YOUR_ACCESS_KEY"
  />

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

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

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

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

That's it. When someone submits the form, you'll receive an email with all the field values.

With JavaScript (AJAX submission)

If you want to submit the form without a page reload, use the Fetch API to send the data as JSON.

<form id="contact-form">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />

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

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

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

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

<script>
  document
    .getElementById("contact-form")
    .addEventListener("submit", async (e) => {
      e.preventDefault();
      const form = e.target;
      const data = Object.fromEntries(new FormData(form));

      const res = await fetch(
        "https://api.form-alert.com/v1/submit",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(data),
        }
      );

      if (res.ok) {
        alert("Message sent!");
        form.reset();
      } else {
        alert("Something went wrong. Try again.");
      }
    });
</script>

Adding more fields

You can add any fields you need. Every name attribute becomes a key in the email you receive.

<input type="text" name="company" />
<input type="tel" name="phone" />
<select name="subject">
  <option value="general">General inquiry</option>
  <option value="support">Support</option>
  <option value="sales">Sales</option>
</select>

Next steps