Enquiry docs

Quick start

Your access key is on the form’s Setup tab in the dashboard, with this code already filled in for you. It isn’t a secret: anyone can see it in your page, and the allowed websites and spam checks are what protect the form.

<form action="https://enquiry.bromputers.co.uk/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <!-- Spam trap: keep it hidden. People never tick it; bots do. -->
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
  <button type="submit">Send</button>
</form>

<form id="enquiry" action="https://enquiry.bromputers.co.uk/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <!-- Spam trap: keep it hidden. People never tick it; bots do. -->
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
  <button type="submit">Send</button>
  <p id="enquiry-status" role="status"></p>
</form>
<script>
  const form = document.querySelector('#enquiry');
  const status = document.querySelector('#enquiry-status');
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    status.textContent = 'Sending…';
    try {
      const res = await fetch('https://enquiry.bromputers.co.uk/submit', {
        method: 'POST', headers: { Accept: 'application/json' }, body: new FormData(form),
      });
      const result = await res.json();
      status.textContent = result.success ? 'Thanks, your message has been sent.' : result.message;
      if (result.success) form.reset();
    } catch {
      status.textContent = 'Sorry, that didn\'t send. Please try again.';
    }
  });
</script>

import { useState } from 'react';

const accessKey = 'YOUR_ACCESS_KEY';

export default function EnquiryForm() {
  const [status, setStatus] = useState('');

  async function onSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    setStatus('Sending…');
    try {
      const res = await fetch('https://enquiry.bromputers.co.uk/submit', {
        method: 'POST', headers: { Accept: 'application/json' }, body: new FormData(form),
      });
      const result = await res.json();
      setStatus(result.success ? 'Thanks, your message has been sent.' : result.message);
      if (result.success) form.reset();
    } catch {
      setStatus('Sorry, that didn\'t send. Please try again.');
    }
  }

  return (
    <form onSubmit={onSubmit}>
      <input type="hidden" name="access_key" value={accessKey} />
      <label>Name <input type="text" name="name" required /></label>
      <label>Email <input type="email" name="email" required /></label>
      <label>Message <textarea name="message" required></textarea></label>
      {/* Spam trap: keep it hidden. People never tick it; bots do. */}
      <input type="checkbox" name="botcheck" style={{ display: 'none' }} tabIndex={-1} autoComplete="off" />
      <button type="submit">Send</button>
      <p role="status">{status}</p>
    </form>
  );
}

---
// src/components/EnquiryForm.astro
const accessKey = 'YOUR_ACCESS_KEY';
---
<form id="enquiry" action="https://enquiry.bromputers.co.uk/submit" method="POST">
  <input type="hidden" name="access_key" value={accessKey}>
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <!-- Spam trap: keep it hidden. People never tick it; bots do. -->
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
  <button type="submit">Send</button>
  <p id="enquiry-status" role="status"></p>
</form>

<script>
  // Sends without leaving the page; without JavaScript the form still posts and shows our thank-you page.
  const form = document.querySelector<HTMLFormElement>('#enquiry')!;
  const status = document.querySelector('#enquiry-status')!;
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    status.textContent = 'Sending…';
    try {
      const res = await fetch('https://enquiry.bromputers.co.uk/submit', {
        method: 'POST', headers: { Accept: 'application/json' }, body: new FormData(form),
      });
      const result = await res.json();
      status.textContent = result.success ? 'Thanks, your message has been sent.' : result.message;
      if (result.success) form.reset();
    } catch {
      status.textContent = 'Sorry, that didn\'t send. Please try again.';
    }
  });
</script>

That’s all a working form needs. Add, remove or rename fields as you like: a field called phone_number shows in the email as “Phone number”. Checkboxes that share a name are joined with commas.

Fields

These names steer the submission instead of, or as well as, appearing in the email. They are the same names Web3Forms uses.

You can send the form as multipart/form-data (needed for files), application/x-www-form-urlencoded or JSON. A form can have up to 100 fields; each value can be up to 20,000 characters.

Files

Add enctype="multipart/form-data" to the form and a file input with any name:

<form action="https://enquiry.bromputers.co.uk/submit" method="POST" enctype="multipart/form-data">
  …
  <input type="file" name="attachment" multiple>
</form>

• Accepted: JPEG, PNG, GIF, WebP, HEIC, HEIF, AVIF and PDF. The type is read from the file’s contents, so a renamed program is refused.
• Up to five files per submission by default (you can set up to ten), each up to 10 MB.
• When the files add up to 5 MB or less they are attached to the email. Every file also gets a download link, which works for as long as the form keeps its submissions.
• A refused file stops the submission with a message saying which file and why, so the visitor can fix it.

Spam and captcha

Spam never just disappears. Anything caught waits in the form’s Spam folder, where “Not spam” sends it on as normal. Spam doesn’t count towards your monthly submissions.

• Honeypot. Keep the hidden botcheck checkbox from the quick start in your form.
• Spam score. Every submission is scored for lots of links, URL shorteners, known spam phrases, throwaway email domains and the same message sent twice in a day.
• Allowed websites. List your domains in the form’s settings and posts from anywhere else are refused. A domain covers its subdomains, so example.com allows www.example.com.
• Captcha. Pick Cloudflare Turnstile or hCaptcha in the form’s settings and paste your secret key, then add the widget inside your form:

<div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY"></div>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

The autoresponder only runs on forms with both a captcha and allowed websites, so nobody can use your form to send email to strangers.

Redirects and JavaScript

A plain form post

After a successful post the visitor goes to the page in your redirect field (if it’s on an allowed website), else the form’s own thank-you page from its settings, else our thank-you page. Errors show a short page saying what went wrong, with a link back.

From JavaScript

Send Accept: application/json and you get JSON back instead. Any website can call it (CORS is open); the allowed websites setting still applies.

// 200
{ "success": true, "message": "Email sent successfully!", "body": { "data": { "name": "…", "email": "…" } } }

// 400, 403, 413, 415, 429 or 500
{ "success": false, "message": "This form can only be sent from its own website." }

The message is written for the visitor, so you can show it as it is. The JavaScript, React and Astro tabs in the quick start do exactly that.

Moving from Web3Forms

1. Ask for access, and we’ll set up your account and form.
2. Change the form’s action to https://enquiry.bromputers.co.uk/submit/YOUR_ACCESS_KEY. With the key in the URL, the old access_key field is ignored, so it’s a one-line change. Or keep https://enquiry.bromputers.co.uk/submit and swap the key in the hidden field.
3. Optional: in Web3Forms, export your submissions as CSV, then open the form’s Submissions tab, choose “Import its past submissions” and upload it. Imported enquiries are kept but not emailed again and don’t count towards your plan.

What works differently, on purpose:

• redirect must be on one of the form’s allowed websites, so nobody can use your form to send visitors elsewhere.
• ccemail only copies addresses already confirmed on your account.
• webhook sent from the form is ignored. Webhooks and reCAPTCHA v3 are not available yet (see what’s coming).

Limits

Over a limit, the visitor sees a plain message (status 429 or 413) saying what happened.