Wiring Up Your Contact Form

Make the form on your portfolio actually send you email, with spam protection, no account, and no JavaScript.

The form code

Paste this into your HTML file, then style it however you want. Do not delete the honeypot field or the name attributes.

<form class="contact-form"
      action="https://formsubmit.co/YOUR_EMAIL_OR_ALIAS"
      method="POST">

  <!-- Honeypot: keep hidden in CSS. Bots fill it, humans don't. -->
  <div class="hp" aria-hidden="true">
    <label for="company">Company</label>
    <input type="text" id="company" name="_honey" tabindex="-1" autocomplete="off">
  </div>

  <div class="field">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" autocomplete="name" required>
  </div>

  <div class="field">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" autocomplete="email" required>
  </div>

  <div class="field">
    <label for="subject">Subject</label>
    <input type="text" id="subject" name="subject">
  </div>

  <div class="field">
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="6" required></textarea>
  </div>

  <input type="hidden" name="_subject" value="New portfolio message">
  <input type="hidden" name="_next" value="https://YOUR_SITE/thank-you.html">
  <input type="hidden" name="_template" value="table">

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

<!-- Minimum CSS to hide the honeypot. Move this into your stylesheet. -->
<style>
  .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
</style>

Setup steps

1. Add your email to the form. Find the action line and replace YOUR_EMAIL_OR_ALIAS with your address, like https://formsubmit.co/you@example.com. No signup, no password.
2. Publish your site, then submit the form once yourself. This first submission is what tells FormSubmit your address is real.
3. Check your inbox and click the confirmation link. Your form sends nothing until you do this. It happens once per address.
4. Switch to your private alias. After you confirm, FormSubmit gives you a random endpoint like https://formsubmit.co/el/randomstring. Put that in the action instead of your email, then republish. Your address never appears in the page source, so scrapers cannot harvest it. This is the step that protects you from spam at the source.
5. Set the redirect. Change the _next value to a real page on your live site. Pointing it at a live URL prevents a submit error.
6. Test as a visitor. Submit again. You should get the email, and the visitor should land on your thank-you page.

Good to know

• The honeypot is already wired in. You do not touch it. Spam filtering and a captcha run on FormSubmit's side automatically.
• The free tier has a monthly submission cap. Plenty for a portfolio, which is why this is not a production e-commerce solution.
• Never put a raw email address in a mailto: link or visible text on a live page. Scrapers harvest it within hours. The alias step exists to avoid exactly this.