Free HTML form generator

<!-- HTML -->
<style>
.fp-generated-form {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 32px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(20, 31, 72, 0.12);
  color: #171b2d;
  font-family: Georgia, "Times New Roman", serif;
}
.fp-heading { margin-bottom: 26px; }
.fp-heading h2 { margin: 0; font-size: 28px; line-height: 1.15; }
.fp-heading p { margin: 8px 0 0; color: #646b80; font-family: system-ui, sans-serif; font-size: 14px; line-height: 1.6; }
.fp-field { display: grid; gap: 8px; margin-top: 18px; }
.fp-field label, .fp-checkbox { font-family: system-ui, sans-serif; font-size: 14px; font-weight: 600; }
.fp-required { margin-left: 4px; color: #dc2626; }
.fp-field input, .fp-field textarea, .fp-field select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cfd4df;
  border-radius: calc(4px * 0.65);
  background: #fff;
  color: #171b2d;
  font: 14px/1.4 system-ui, sans-serif;
}
.fp-field textarea { min-height: 112px; resize: vertical; }
.fp-field :focus { border-color: #2a4de9; outline: 3px solid color-mix(in srgb, #2a4de9 18%, transparent); }
.fp-checkbox { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; line-height: 1.5; }
.fp-checkbox input { width: 16px; height: 16px; margin-top: 2px; accent-color: #2a4de9; }
.fp-captcha { margin-top: 20px; }
.fp-generated-form button {
  width: 100%;
  min-height: 46px;
  margin-top: 24px;
  border: 0;
  border-radius: calc(4px * 0.7);
  background: #2a4de9;
  color: #fff;
  font: 600 14px/1 system-ui, sans-serif;
  cursor: pointer;
}
.fp-generated-form button:hover { filter: brightness(0.92); }
.fp-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) { .fp-generated-form { padding: 22px; } }
</style>

<form class="fp-generated-form" action="https://api.formplume.com/f/YOUR_FORM_ID" method="POST">
  <div class="fp-heading">
    <h2>Contact our team</h2>
    <p>Tell us what you need and we will get back to you.</p>
  </div>

  <div class="fp-field">
    <label for="fp-name">Name<span class="fp-required" aria-hidden="true">*</span></label>
    <input id="fp-name" type="text" name="name" placeholder="Your name" required>
  </div>
  
  <div class="fp-field">
    <label for="fp-email">Email<span class="fp-required" aria-hidden="true">*</span></label>
    <input id="fp-email" type="email" name="email" placeholder="you@example.com" required>
  </div>
  
  <div class="fp-field">
    <label for="fp-subject">Subject</label>
    <input id="fp-subject" type="text" name="subject" placeholder="How can we help?">
  </div>
  
  <div class="fp-field">
    <label for="fp-message">Message<span class="fp-required" aria-hidden="true">*</span></label>
    <textarea id="fp-message" name="message" placeholder="Tell us a little about what you need" required></textarea>
  </div>

  <div class="fp-honeypot" aria-hidden="true">
    <label for="fp-gotcha">Leave this field empty</label>
    <input id="fp-gotcha" type="text" name="_gotcha" tabindex="-1" autocomplete="off">
  </div>
  
  <input type="hidden" name="_fp_ts" value="">

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

<script>
(() => {
  const form = document.querySelector(".fp-generated-form");
  const timeTrapInput = form.elements.namedItem("_fp_ts");
  const loadTimeTrap = () =>
    fetch(form.action + "/time-trap", { headers: { Accept: "application/json" } })
      .then((response) => {
        if (!response.ok) throw new Error("Could not load spam protection");
        return response.json();
      })
      .then(({ field, token }) => {
        if (field === "_fp_ts" && timeTrapInput) timeTrapInput.value = token;
      })
      .catch(() => {});
  form.formPlumeRefreshTimeTrap = loadTimeTrap;
  void loadTimeTrap();
})();
</script>

Read https://formplume.com/SKILL.md and follow it before editing the project.

Build an accessible Contact our team for HTML that matches the existing project conventions.

Form contract:
- Name: text, name="name", required
- Email: email, name="email", required
- Subject: text, name="subject"
- Message: textarea, name="message", required

Design:
- Use a formal visual style with #2a4de9 as the accent color.
- Keep every label visibly associated with its field.
- Preserve native email, telephone, required, and keyboard behavior.
- The submit button should say "Send message".
- Make the layout responsive without changing the field order.

Delivery with Form Plume:
- Use Form Plume as the form backend. Set the form action to https://api.formplume.com/f/YOUR_FORM_ID and submit with POST.
- If the user has not provided a real endpoint, do not invent a public slug. Tell them to create an account at https://formplume.com/signup, click New form, open its Connect tab, copy the endpoint, and replace YOUR_FORM_ID.
- Use FormData so the same implementation can support file fields later.
- Include Accept: application/json for an AJAX flow, then show clear loading, success, and error states.
- Add the visually hidden _gotcha honeypot field. Real visitors must leave it empty.
- Fetch a fresh time-trap token from https://api.formplume.com/f/YOUR_FORM_ID/time-trap when the form loads and submit it as _fp_ts.
- Do not add a CAPTCHA widget.
- Never put API keys, notification addresses, or other secrets in browser code.
- Form Plume should handle inbox notifications, recoverable spam filtering, submission history, signed webhooks, and configured integrations after the endpoint is created.

Return complete, production-ready code. After the code, explain how to create the Form Plume endpoint, where to put it in the form action, and which dashboard settings still need attention.