Tutorial: a contact form in 15 minutes

In this tutorial you put a contact form on your website. When a visitor submits it:

1. you get the message in your inbox, and hitting Reply answers the visitor directly,
2. the visitor gets a short “thanks, we’ve got your message” email,
3. bots are stopped before they cost you anything.

There’s no server to write or host. The form talks to Frontmail straight from the browser with your public key; Frontmail checks where the request comes from, renders your template and sends the email through your own email account or provider.

Want to see the result first?

The live demo runs the same kind of form in React, Svelte and Vue, with the code right next to it.

What you need

• A Frontmail account. Sign up at app.frontmail.dev – the Free plan is enough. Confirm your email address, otherwise you can look around but not send.
• An email account to send from. Any SMTP mailbox (Seznam, Zoho, your web host…), a Gmail or Outlook account, or an API provider such as Resend or Postmark.
• A website where you can edit HTML. A static page is fine. For local testing, a dev server on localhost works too.
• About 15 minutes.

Already went through “Get started”?

After creating your organization, the dashboard offers a short setup wizard. It covers the same ground as steps 1, 2, 4 and 6 here. If you finished it, skim those steps and focus on the auto-reply and the form itself.

The steps

Each step is short and ends with a link to the next one.

1. Connect an email serviceTell Frontmail which account or provider sends your emails.

2. Create the contact templateStart from the gallery, check the recipient and preview it with sample data.

3. Add an auto-replyA second template that thanks the visitor, linked to the first one.

4. Allow your websiteLimit your public key to your domain and turn on the CAPTCHA.

5. Build the formPlain HTML plus the browser SDK from the CDN.

6. Test and follow deliverySend a free test, submit the real form and watch it in History.

In a hurry? The Quickstart lists the same flow on one page, without the explanations.