A static website has no server of its own to receive form submissions, so a contact form needs somewhere to send them. You have five practical options: a mailto link, a form backend service your HTML form posts to, a form builder you link or embed, your host's built-in form handling, or a small serverless function you write yourself. For most small business sites, a form backend or a linked form builder gives the best balance of effort, control and reliability.
Why a static site needs outside help with forms
On a WordPress or PHP site, the same server that sends the page can receive what visitors type. A static site is just files: HTML, CSS, images and maybe some JavaScript. When a visitor presses Send, the browser needs a URL that will accept the data and do something useful with it, such as email it to you or store it. That URL is the piece you add.
This applies to any static site, including the ones you export from FNJ's AI website builder. The builder designs marketing pages; it does not build forms. You either link a button to a hosted form or add a form to the exported code.
The five options at a glance
| Option | Setup | Works on any host | Spam control | Where submissions go | Best for |
|---|---|---|---|---|---|
| Mailto link | Minutes, no account | Yes | None, and it exposes your address | The visitor's email app | Personal sites, a backup option |
| Form backend service (such as Formspree) | Your HTML form plus the service's endpoint | Yes | Varies by service | Your inbox and the service's dashboard | Most business sites |
| Form builder (such as Tally or Google Forms) | Build in their editor, then link or embed | Yes | Depends on the tool | The tool's responses view | Longer intake forms |
| Host's form feature (such as Netlify Forms) | An attribute on your form | Only on that host | Check the host's docs | The host's dashboard | Sites already on that host |
| Your own serverless function | Code plus an email-sending API | Depends on the host | Whatever you build | Wherever your code sends it | Developers who want full control |
Option 1: a mailto link
The simplest contact "form" is a link that opens the visitor's email app with your address filled in:
<a href="mailto:hello@example.com?subject=Project%20inquiry">Email us</a>
It needs no account. The downsides are real, though. On a computer with no email app set up, the click may do nothing useful. Your address is visible to anyone who scrapes the page. And you can't ask structured questions, so every inquiry arrives in a different shape.
Use it as a backup next to a real form, and print the address as text too so people can copy it.
Option 2: a form backend service
You write a normal HTML form, then point its action at an endpoint that a form service gives you. The service receives the submission, emails it to you and usually keeps a copy in a dashboard. Formspree is a well-known example.
<form action="https://forms.example.com/your-endpoint" method="POST">
<label for="name">Name</label>
<input id="name" name="name" type="text" autocomplete="name" required>
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email" required>
<label for="message">How can we help?</label>
<textarea id="message" name="message" rows="5" required></textarea>
<!-- Honeypot: hidden from people, often filled in by bots -->
<div class="hp" aria-hidden="true">
<label for="website">Leave this empty</label>
<input id="website" name="website" type="text" tabindex="-1" autocomplete="off">
</div>
<button type="submit">Send message</button>
</form>
Hide the honeypot with CSS such as .hp { position: absolute; left: -9999px; } and check your service's documentation for the field name it expects, since many services support a honeypot of their own.
This option keeps the form in your design and works on any host, with no code to maintain. Before you pick a service, check how it filters spam, where it stores submissions, whether it can send an automatic reply, how you export your data, and what happens when you go over your plan.
Option 3: a form builder you link or embed
Tools such as Tally and Google Forms let you build the form in their editor and then share a link or paste embed code into your page. Google Forms has an Embed HTML option; Tally offers several embed styles, including one that sits inside the page and a popup.
Linking is underrated. A "Request a quote" button that opens the hosted form page works on every host, adds no scripts to your site and can't break your layout. Embedding keeps visitors on your page but adds a third-party frame. If you embed, give the frame enough height that it doesn't scroll inside the page, and test it on a phone.
Form builders shine for long intake forms. A renovation contractor asking for the room, budget and timeline gets better leads from a structured form than from a blank message box.
Option 4: your host's form feature
Some hosts process forms for you. Netlify Forms is a well-known example: you add a netlify or data-netlify="true" attribute to an HTML form, enable form detection for the site, and Netlify's build finds the form at deploy time and collects submissions in your dashboard. It only works while the site is hosted on Netlify, and forms rendered by JavaScript may not be detected, so it suits plain HTML forms best.
Option 5: your own serverless function
If you are comfortable with code, write a small function that receives the POST request, validates the fields, checks for spam and sends you an email through an email-sending API. On Cloudflare Pages, that's a Pages Function in your project's /functions directory; Vercel and Netlify have their own function features.
You get total control and no form vendor. In exchange, you maintain the code, handle errors, validate everything on the server, and keep API keys in environment variables, never in the page source. For a five-page marketing site, this is usually more work than the form deserves.
Stop spam without punishing real people
Public contact forms attract automated spam, often soon after launch. Layer a few light defenses rather than relying on one heavy one:
- A honeypot field, as in the example above. Invisible to people, often filled in by simple bots.
- A challenge that rarely interrupts people, such as Cloudflare Turnstile, which checks visitors without asking them to solve a puzzle.
- Server-side checks in your service or function: required fields, length limits, rejecting messages stuffed with links.
- Rate limits if you run your own function.
Avoid old-style image puzzles on a contact form. They add friction for exactly the people you want to hear from.
Make the form usable for everyone
- Every field needs a visible label. Placeholder text disappears as people type, so it is not a label.
- Use the right input types (
email,tel) andautocompletevalues so phones show the right keyboard and can fill details in. - Explain errors in words next to the field, not only with a red border.
- Make sure the whole form works with a keyboard alone.
The W3C forms tutorial covers labels, grouping, instructions and error messages in more depth.
Privacy: collect less
- Ask only for what you need to reply. Name, email and a message are enough for most businesses; add phone only if you will actually call.
- Remember that a form service or form builder stores personal data on your behalf. Check where it keeps submissions and for how long, and mention it in your privacy policy.
- Some countries require more, such as a clear explanation of how you use the data or an agreement with the company that processes it. The rules vary by country, and this is general information, not legal advice.
- Tell people what happens next. "We reply within one working day" on the confirmation message or thank-you page does more for trust than a bare "Thanks."
Where to put the form
Put the full form on your Contact page, next to your email address, phone number and, for local businesses, your address and hours. On service pages, end with a short call to action that links to the form rather than repeating it. Keep long forms out of the hero section; a clear button there does the job better.
If people book appointments or tables rather than send messages, a booking tool usually replaces the form entirely. See how to add online booking or reservations to your website.
Adding a form to an FNJ-built site
The fastest route is a button. Ask the builder in plain words, for example "Add a Request a quote button to the header and to the end of each service page, linking to our quote form," and point it at your hosted form's link. Nothing in the exported code then needs hand edits, so you can keep refining the design in FNJ.
If you want the form inside the page, export the static HTML or the Next.js project and paste the form markup or embed code into your contact page. The HTML export makes that a copy-and-paste job; the trade-offs between the two formats are covered in HTML export vs Next.js export.
Where FNJ fits
FNJ's AI builder designs the marketing site around your contact action: the button placement, the contact page layout and the copy that gets people to reach out. The form itself comes from one of the services above, linked from a button or added to the exported code you own. Start with FNJ's AI website builder and choose the form option that matches how you want to receive inquiries.
Frequently asked questions
Can a static website have a contact form?
Yes. The form is ordinary HTML; it just needs to send submissions to a service that can receive them, such as a form backend, a form builder, your host's form feature or a serverless function.
What is the easiest way to add a contact form to a static site?
Build the form in a form builder and link a button to it, or point a plain HTML form at a form backend service. Both take minutes, work on any host and need no server code.
Does FNJ's AI website builder create contact forms?
No. FNJ builds marketing websites without forms, log-ins or databases. You link a button to a hosted form, or add a form service's code to the exported HTML or Next.js project.
How do I stop contact form spam without a CAPTCHA?
Combine a hidden honeypot field, a low-friction challenge such as Cloudflare Turnstile, and server-side checks like required fields, length limits and rejecting link-heavy messages. Each layer catches spam the others miss, and none of them asks real visitors to solve a puzzle.
Do I need a privacy policy for a contact form?
In many countries, collecting names and email addresses means you should explain what you collect, why, and who processes it. Requirements vary by country, so treat this as general information and check the rules where you operate.