HTML Forms

Using plain HTML is the simplest way to get submissions from your website. Whether you are using hand-written code, static site templates, or AI site builders (like Cursor, Claude, or Lovable), you can connect your form in seconds.

AI Prompt (Cursor, Claude, v0, ChatGPT)

If you are using an AI coding assistant (such as Cursor, Claude, v0, Windsurf, or ChatGPT) to build your site, copy and paste this prompt to generate your form markup instantly:

Create a clean, responsive HTML contact form.

Submission Endpoint:
https://api.lucidforms.co/f/{your-form-id}

Requirements:
- Method: POST
- Action: https://api.lucidforms.co/f/{your-form-id}
- Fields: Full Name (name="name"), Email Address (name="email"), and Message (name="message")
- Include an invisible honeypot field for bot spam protection:
  <div style="display: none;">
    <input type="text" name="_honeypot" tabindex="-1" autocomplete="off" />
  </div>
- Make it fully responsive and modern with clean Tailwind CSS styling
- Include accessible labels, placeholders, and HTML5 validation (required attributes)

Basic Form Template

Copy and paste this standard template into your project. Replace {your-form-id} with your actual form ID from the Lucid Forms dashboard:

<form action="https://api.lucidforms.co/f/{your-form-id}" method="POST">
  <!-- Name field -->
  <div>
    <label for="name">Full Name</label>
    <input type="text" id="name" name="name" required />
  </div>

  <!-- Email field -->
  <div>
    <label for="email">Email Address</label>
    <input type="email" id="email" name="email" required />
  </div>

  <!-- Message field -->
  <div>
    <label for="message">Message</label>
    <textarea id="message" name="message" required></textarea>
  </div>

  <!-- Honeypot Bot Trap (Invisible to users, traps spam bots) -->
  <div style="display: none;">
    <input type="text" name="_honeypot" tabindex="-1" autocomplete="off" />
  </div>

  <!-- Submit Button -->
  <button type="submit">Submit Form</button>
</form>

Key Requirements

To ensure your HTML form integrates correctly with Lucid Forms, make sure your form matches the following settings:

1. Action URL

The action attribute of your <form> element must point exactly to:

action="https://api.lucidforms.co/f/{your-form-id}"

2. POST Method

The method attribute of your <form> must be set to POST. GET requests are not accepted.

method="POST"

3. Named Inputs

Lucid Forms relies on the name attribute of each input element to save and display data on your dashboard.

For example: <input type="text" name="phone" /> will show up as a phone column in your submission logs.
Inputs without a name attribute will be completely ignored.

Adding Bot Protection (Honeypot)

Bots scan websites and automatically fill out every input field they can find. You can trap them silently by adding an invisible honeypot field.

<!-- This field is completely hidden from real visitors -->
<div style="display: none;">
  <input type="text" name="_honeypot" tabindex="-1" autocomplete="off" />
</div>

How it works: Real users cannot see this input, so they will leave it blank. Spam bots will fill it out. If Lucid Forms receives a submission with the _honeypot field filled, we automatically discard it as spam.
Learn more: Check out our Spam Protection Guide for details on Captcha, ML screening, and allowed domains.

Accepting File Uploads

Need to accept resumes, screenshots, or documents? Pro users can accept user-submitted files directly:

Add enctype="multipart/form-data" to your <form> element.
Add a standard file input: <input type="file" name="attachment" />.
Keep individual files under 5MB (with up to 1GB total storage on Pro).

For full configuration and AJAX examples, read the File Uploads Guide.