Can AI build a free contact form for my site?
Half. AI can write the form in minutes, but a form needs somewhere to send submissions and spam protection. Pair it with a free form service, or use a free form builder.
01Why half-bot
- The HTML is easy for AI.
- Receiving submissions needs a backend or form service.
- Spam protection matters as soon as the page is public.
Sponsor slot · openFeatured tool for this task. A labeled card for one relevant tool.
Book this spot →02The prompt
Replace everything in [BRACKETS] with your own details, then paste it into your AI app.
You are a web developer. Fields I need: [NAME, EMAIL, MESSAGE, ETC.] Where submissions go: [FREE FORM SERVICE NAME OR 'suggest options'] My site's style: [COLORS, FONT] Your task: build the form. Rules: - MUST produce accessible HTML with labels, validation and a honeypot field for spam. - MUST explain how to connect it to a form service, and tell me to check that service's free-plan limits. - NEVER collect passwords, payment or ID numbers. Give me: the code and setup steps.
03Steps
- Pick where submissions will go.
- Run the prompt.
- Submit a test entry.
04What can go wrong
- Add a privacy note about how you use submissions.
- Free form services have monthly limits.
05What to use
Any AI coding tool.
06Our test runs
2 runs, each with a different made-up sample. 0 of 2 passed every check.
Run 1 · Llama 3.3 70B · graded by GPT-OSS 120BOct 3, 2026Passed with a catch
The made-up sample:
[NAME, EMAIL, MESSAGE, ETC.]Name, Email, Subject, Message, Phone (optional)[FREE FORM SERVICE NAME OR 'suggest options']Formspree (free tier) – easy webhook integration, 50 submissions/month[COLORS, FONT]Primary #2C3E50, accent #E74C3C, background #F9F9F9, font "Roboto", fallback sans-serif
- Provide accessible HTML with labels, validation, and honeypot
- Explain connection to form service and mention free‑plan limits
- Never collect passwords, payment or ID numbers
- Give the code and setup steps
- Made up details we never gave it
Details it made up: “max-width: 500px;”, “border: 1px solid #ddd;”, “box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);”, “background-color: #fff;”
What came back (excerpt):
Note: This code does not collect passwords, payment, or ID numbers, as per the rules. The honeypot field is used to prevent spam submissions.
Read the full answer
### Contact Form Code and Setup
#### HTML Code
```html
<form id="contact-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<label for="phone">Phone (optional):</label>
<input type="tel" id="phone" name="phone">
<!-- Honeypot field to prevent spam -->
<input type="text" id="website" name="website" style="display: none;">
<button type="submit">Submit</button>
</form>
```
#### CSS Code (using the provided style)
```css
body {
background-color: #F9F9F9;
font-family: 'Roboto', sans-serif;
}
form {
max-width: 500px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input, textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
background-color: #2C3E50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #E74C3C;
}
```
#### JavaScript Code (for Formspree integration)
```javascript
const form = document.getElementById('contact-form');
form.addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(form);
fetch('https://formspree.io/f/YOUR_FORMSPREE_ENDPOINT', {
method: 'POST',
body: formData,
headers: {
'Accept': 'application/json'
}
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error(error));
});
```
### Setup Steps
1. **Create a Formspree account**: Go to [Formspree](https://formspree.io/) and sign up for a free account.
2. **Create a new form**: Click on the "Create a new form" button and follow the instructions to set up your form.
3. **Get your Formspree endpoint**: Once you've created your form, you'll receive a unique endpoint URL. Replace `YOUR_FORMSPREE_ENDPOINT` in the JavaScript code with this URL.
4. **Add the HTML, CSS, and JavaScript code to your website**: Copy the code above and add it to your website's HTML, CSS, and JavaScript files.
5. **Check Formspree's free-plan limits**: Make sure you're aware of Formspree's free-plan limits, which include 50 submissions per month. If you expect more submissions, consider upgrading to a paid plan.
Note: This code does not collect passwords, payment, or ID numbers, as per the rules. The honeypot field is used to prevent spam submissions.Verify the hidden honeypot field is not visible to users.
Run 2 · Llama 3.3 70B · graded by GPT-OSS 120BOct 24, 2026Passed with a catch
The made-up sample (a messier one):
[NAME, EMAIL, MESSAGE, ETC.]Name, Email, Phone (optional), Message, How did you hear about us? (dropdown: Google, Friend, Social media, Other)[FREE FORM SERVICE NAME OR 'suggest options']suggest options: Formspree (free tier up to 50 submissions/month), Getform (free plan 100 submissions), or Netlify Forms (free with site hosted on Netlify).[COLORS, FONT]Primary teal #1abc9c, secondary dark gray #2c3e50, accent coral #e74c3c; body font Open Sans (Google Fonts), headings use Montserrat, with 1rem base spacing.
- Provide accessible HTML with labels, validation, honeypot
- Explain how to connect to a form service and check limits
- Never collect passwords, payment or ID numbers
- Give code and setup steps
- Made up details we never gave it
Details it made up: “background-color: #f9f9f9;”
What came back (excerpt):
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
Read the full answer
### Form Code
```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form id="contact-form" method="POST">
<h2 class="heading">Get in Touch</h2>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone (optional):</label>
<input type="tel" id="phone" name="phone">
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
</div>
<div class="form-group">
<label for="hear-about">How did you hear about us?</label>
<select id="hear-about" name="hear-about" required>
<option value="">Select an option</option>
<option value="Google">Google</option>
<option value="Friend">Friend</option>
<option value="Social media">Social media</option>
<option value="Other">Other</option>
</select>
</div>
<input type="hidden" id="honeypot" name="honeypot" />
<button type="submit">Submit</button>
</form>
<script src="script.js"></script>
</body>
</html>
```
```css
/* styles.css */
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 1rem;
background-color: #f9f9f9;
}
.heading {
font-family: 'Montserrat', sans-serif;
color: #1abc9c;
margin-bottom: 1rem;
}
.form-group {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
}
input, select, textarea {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #2c3e50;
border-radius: 0.25rem;
}
button[type="submit"] {
background-color: #1abc9c;
color: #fff;
padding: 0.5rem 1rem;
border: none;
border-radius: 0.25rem;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #e74c3c;
}
```
```javascript
// script.js
const form = document.getElementById('contact-form');
form.addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(form);
const honeypot = formData.get('honeypot');
if (honeypot !== '') {
// Ignore form submission if honeypot field is filled
return;
}
// Submit form data to form service
fetch('/api/form', {
method: 'POST',
body: formData,
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error(error));
});
```
### Setup Steps
1. **Choose a form service**: You have three options: Formspree (free tier up to 50 submissions/month), Getform (free plan 100 submissions), or Netlify Forms (free with site hosted on Netlify). Choose one that fits your needs.
2. **Create an account**: Sign up for the chosen form service and create a new form.
3. **Get the form endpoint**: Obtain the form endpoint URL from the form service. This URL will be used to submit the form data.
4. **Update the JavaScript code**: Replace the `/api/form` URL in the `fetch` function with the form endpoint URL provided by the form service.
5. **Check the free-plan limits**: Make sure to check the free-plan limits of the chosen form service to avoid any unexpected charges or limitations.
6. **Deploy the form**: Deploy the form on your website, and test it to ensure it's working correctly.
Note: Never collect passwords, payment, or ID numbers in your form. This code is for a basic contact form and should not be used for sensitive information.Replace the placeholder fetch URL with your actual form‑service endpoint.
How each run works: we fill the prompt with a made-up sample, run it once in Llama 3.3 70B, and GPT-OSS 120B grades the answer against the prompt's own rules. Word limits are counted by code, and every quote flagged as made up is checked against the full answer. Your results can differ. How we test.
Prompt packReplace Paid Apps 10 step-by-step prompts that go further than this one, $19.
See what’s inside →