How to add a contact form to an Astro site

Add a contact form to your Astro site by posting plain HTML to a Lamofel endpoint -- no JavaScript or Astro integration required.

  1. Generate the form. Use the free contact form generator at lamofel.com/tools: pick the fields, and it gives you ready-to-paste HTML that works without JavaScript. No account is needed to generate a form.
  2. Paste the form into src/pages/contact.astro. In Astro, an .astro file in src/pages becomes a page on your site at the path of the file, and the part of an .astro file below the --- code fence is the HTML template, where plain HTML is rendered as written. Example (the generator's output for name, email and message fields; the form action ends in the placeholder CLAIM_YOUR_ENDPOINT until you claim an endpoint):
<form action="https://lamofel.com/f/CLAIM_YOUR_ENDPOINT" method="POST">
  <label for="field-name">Name</label>
  <input id="field-name" type="text" name="name" required>
  <label for="field-email">Email</label>
  <input id="field-email" type="email" name="email" required>
  <label for="field-message">Message</label>
  <textarea id="field-message" name="message" rows="5" required></textarea>
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden>
  <button type="submit">Send message</button>
</form>

Keep the hidden _gotcha field as generated: it is the spam trap. A filled-in _gotcha field marks the post as spam.

  1. Claim your endpoint. On the generator's result page, enter the email address where submissions should arrive and press "Claim my endpoint". Your account, the form and the live endpoint are created right away; the claim result gives you the same HTML with your real endpoint in the form action -- paste that version in place of the placeholder. Delivery starts after you confirm that address from the email Lamofel sends you; until then, submissions are stored but not emailed. The confirmation link works for 7 days (see the confirmation table on lamofel.com/privacy).
  2. Deploy your Astro site the way you normally do.
  3. Send a test submission from the live page and check that it arrives in your confirmed inbox.

Limits

Generate a free form ยท See plans