Platform Guide

Replit Contact Form

Add a contact form that emails you to a website published from Replit

Last updated

To add a contact form to a website published from Replit, add a contact.html page with the form below, add a thanks.html page, and publish again. The form posts to https://api.staticforms.dev/submit with your form's API key, and Static Forms emails each submission to you. The pages need no server code and no JavaScript, and they work on the Static Forms free plan.

Before you start: how was this app created?

This guide covers a Static deployment only: HTML files served with no backend. Replit's deployment types page says Static Deployments are not compatible with Replit Apps created using Agent, and recommends Autoscale or Reserved VM for those. We do not cover Autoscale or Reserved VM setup here.

How the app was createdWhat to use
You wrote plain HTML files yourself (an index.html with no framework)This guide.
Agent built it, or it is a React or Vite appNot this guide. Use the form component in the React guide, and the Replit tutorial for the Replit side.

For the second case, see the React guide and the Replit contact form tutorial.

Replit plan: the published link can expire

Replit's Starter plan page says you get one free published app, that the published link goes down after 30 days, and that additional published apps need Core or Pro. A contact form on a link that has gone down cannot be reached, so check your plan in Replit's publishing costs before you rely on it. Static Forms itself is separate and has its own free plan.

1. Copy the page

Replace YOUR_API_KEY with the key from the General tab of your form in the app, and YOUR-APP with the name in your published address. The key is visible in the page, which is expected: the form API key cannot read submissions.

contact.html

The visitor's email field becomes the reply-to address on the notification, and every other named field appears in the email. redirectTo must be a full URL. Without it, the visitor sees a plain confirmation from Static Forms instead of your own page.

2. Add the thank-you page

thanks.html

3. Publish it

Replit's publishing guide says to select Tools in the pane header, then Publishing under Replit Cloud, review the settings, and select Publish. Choose the Static type, which hosts files such as HTML, CSS and JavaScript.

1

Add the two files

Create contact.html and thanks.html in the same folder as your index.html and paste in the code above.

2

Link to the contact page

Add <a href="/contact.html">Contact</a> to your home page.

3

Check the public directory

Replit says Static configuration includes the public directory to serve. Open the Static settings in Publishing and check that the directory it serves is the folder that holds index.html, contact.html and thanks.html. Replit's docs do not say which folder is the default, so confirm it yourself.

4

Publish and republish

Select Publish. After any later change, select Republish: Replit says changes in the Project Editor do not automatically replace the live release, and that republishing creates a new production release at the same URL. Test on the published address, not the editor preview.

4. Test it

Open /contact.html on your published address, send a message and check that you land on the thank-you page. The message arrives by email and is listed in the Inbox in the app.

Spam protection

Every submission goes through the built-in spam filter, and the honeypot field catches bots that fill in every field. CAPTCHA widgets and their field names are in the plain HTML guide. A longer walkthrough, including React apps, is in the Replit contact form tutorial.

Domain restriction

If you turn on domain restriction (Starter and up), add your published address. A domain that is not on the list is rejected with a 403 that names it.

Troubleshooting

What you seeWhy, and what to do
401 "Invalid API key"Check that the apiKey value matches the key on the form's General tab, with no extra spaces.
The visitor sees a plain confirmation, not your pageThe redirectTo value is missing or is not a full URL.
The form works in the editor preview but not when publishedReplit says editor changes do not replace the live release until you republish. Republish, then open the published address.
A field is missing from the emailGive the input a name attribute.
403 "Submission rejected: Domain … is not in the allowed domains list"Domain restriction is on and your site is not listed. Add your published domain on the form's security settings.
No email arrivesCheck your spam folder, then the Inbox in the app: if the submission is listed, the problem is delivery.

FAQ

Does this work on the free plan?

Yes. The snippet only uses Free plan features: 250 submissions every 30 days, 1 form endpoint, email delivery, the built-in spam filter, a honeypot field and reCAPTCHA v2. No credit card is needed.

How do I keep spam out?

Every submission is checked by the built-in spam filter on every plan. The snippet adds a hidden honeypot field (any field whose name contains "honeypot"); bots fill it in and those submissions are dropped. reCAPTCHA v2 is available on Free. Cloudflare Turnstile, hCaptcha, ALTCHA and reCAPTCHA v3 are available from the Starter plan.

Is it safe to put the API key in my HTML?

Yes. The form API key is meant to be public. It cannot read your submissions or sign in to your dashboard.

Do I need a backend on Replit?

No. The browser posts the form straight to https://api.staticforms.dev/submit, so the site only needs the HTML files.