Ein Kontaktformular für deine Carrd-Seite, mit echtem Postfach.

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form lang="de" data-mailcontact-language="de">
  <input type="hidden" name="_language" value="de" />
  <fieldset>
    <legend>Kontaktiere uns</legend>
    <label>
      Name (optional)
      <input name="name" type="text" autocomplete="name" maxlength="200" />
    </label>
    <label>
      E-Mail
      <input name="email" type="email" autocomplete="email" maxlength="320" required />
    </label>
    <label>
      Nachricht
      <textarea name="message" rows="5" maxlength="5000" required></textarea>
    </label>
    <noscript>
    <div aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;">
      <label>Website
        <input name="company_website" type="text" tabindex="-1" autocomplete="off" />
      </label>
    </div>
    </noscript>
    <button type="submit">Nachricht senden</button>
  </fieldset>
  <p data-contact-status role="status" aria-live="polite" aria-atomic="true"></p>
</form>
<script defer src="https://mailcontact.app/forms/v1.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<form id="contact" action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Your name" />
  <input type="email" name="email" placeholder="[email protected]" required />
  <textarea name="message" placeholder="What's on your mind?" required></textarea>
  <button type="submit">Send</button>
  <input name="company_website" type="text" tabindex="-1" autocomplete="off"
    style="position:absolute;left:-10000px" aria-hidden="true" />
</form>
<p id="contact-thanks" hidden>Thanks, your message is in.</p>
<p id="contact-status" role="status" aria-live="polite"></p>
<script>
  var form = document.getElementById("contact");
  form.addEventListener("submit", async function (e) {
    e.preventDefault();
    try {
      var response = await fetch(form.action, { method: "POST", body: new FormData(form) });
      var data = await response.json();
      if (!response.ok || data.ok !== true) throw new Error(data.error || "Please try again.");
      form.hidden = true;
      document.getElementById("contact-thanks").hidden = false;
    } catch {
      document.getElementById("contact-status").textContent = "We could not confirm reception. Your text is still here.";
    }
  });
</script>