Skip to content
Documentation

Send form submissions to email in 5 minutes

MailDock turns any HTML form into a branded email delivered through your own SMTP server. This guide covers setup, templates, spam protection, and deliverability.

Quick start

  1. Create a client account. Sign up, create an account for the website, and enter its URL. That domain is automatically allowed to submit forms.
  2. Connect your SMTP server. Enter host, port, username, and password. Send a test email to confirm delivery and use the DNS check to verify SPF and DMARC.
  3. Create a template. Start from Contact, Welcome, or Newsletter; generate one with AI; or paste your own HTML into the Content Designer.
  4. Connect your form. Add the two data attributes and the script below.
  5. Submit and verify. Send a test submission and confirm it appears in the account’s delivery logs.
<form
  data-maildock-id="YOUR_SITE_KEY"
  data-maildock-template="YOUR_TEMPLATE_ID"
  data-maildock-success-message="Thanks! We'll reply within 1 business day."
>
  <input name="name" required />
  <input name="email" type="email" required />
  <textarea name="message" required></textarea>
  <label><input type="checkbox" name="subscribe" value="true" /> Join our newsletter</label>
  <button type="submit">Send</button>
</form>

<script src="https://app.maildock.dev/maildock.js" defer></script>

Works with plain HTML, Astro, Next.js, React, Svelte, Vue, WordPress, Webflow exports, and AI-generated apps built with Cursor, Lovable, v0, or Bolt. No backend code or server routes are required.

Prompt snippet for AI & Vibe Coders

Building with Cursor, Lovable, v0, or Bolt? Copy and paste this prompt to connect your form instantly:

Wire this form to MailDock:
1. Add data-maildock-id="YOUR_SITE_KEY" and data-maildock-template="YOUR_TEMPLATE_ID" to the <form> tag.
2. Add <script src="https://app.maildock.dev/maildock.js" defer></script> before </body>.
Do not write custom API routes or server backend functions.

Form attributes

AttributeRequiredDescription
data-maildock-id Yes Your client account site key.
data-maildock-template Yes The template ID used to render the email.
data-maildock-success-message No Overrides the success message shown after submit.
data-maildock-redirect-url No Sends the visitor to a thank-you page after submit.

Success messages and redirect URLs can also be set per template in the dashboard.

Template variables

Each form field is available in your template as a Handlebars variable named after the input’s name attribute. After the first submission, MailDock lists the detected fields in the template editor.

<p>Hi {{First name}},</p>
<p>Thanks for reaching out. Here's what you sent:</p>
<blockquote>{{message}}</blockquote>
<p>We'll reply to {{email}} shortly.</p>

Built-in helpers

  • {{First name}} and {{Last name}} split a full name into first and last name.
  • {{Email}}, {{Phone}}, and {{Message}} find the field regardless of capitalization.

Set a reply-to field on the template (usually email) so you can reply to the visitor directly from your inbox.

AI templates & brand scan

  1. Open the client account settings, enter the website URL, and click Scan Brand. MailDock saves a brand profile with summary, industry, tone, colors, services, and a suggested CTA.
  2. In the template editor, click AI Generate and describe the email you need.
  3. The generated HTML uses the saved brand profile plus the account’s logo, email, and website. Edit it visually in the Content Designer; styling is preserved.

The scan runs once and is reused for every generation, so it doesn’t consume extra AI credits. Each generation counts toward your plan’s monthly AI limit.

Spam protection

The MailDock script protects every form automatically. No configuration is needed.

  • A hidden honeypot field is injected into each form.
  • Submissions faster than 2 seconds or with no human interaction are rejected.
  • The server flags gibberish names, number-only messages, and messages with more than two links.
  • Only allowed origins can submit, and each IP is limited to 20 requests per minute.

Blocked submissions still show visitors a normal success message so bots learn nothing, and they appear as Blocked in your logs. You can also add your own honeypot field name per template.

Deliverability checklist

  • Publish an SPF record that includes your SMTP provider.
  • Enable DKIM signing in your email provider.
  • Add a DMARC record, starting with p=none to monitor.
  • Send from an address on the same domain as your website.

MailDock’s DNS check shows whether SPF and DMARC are present for your domain.

Docs FAQ

Where do I find my site key and template ID?

In the MailDock dashboard, open the client account. The site key is shown on the account overview, and each template shows its template ID in the template editor.

Why does my form return “Origin not whitelisted”?

MailDock only accepts browser submissions from domains listed on the account. Add your website URL, and any staging domains, under the account’s allowed origins. The www and non-www versions are matched automatically.

How do I test my SMTP connection before going live?

In your account settings, enter your SMTP credentials and click Test Connection to send a test email. MailDock also checks your domain’s DNS to verify that SPF and DMARC records are in place.

How do I use form fields inside my email template?

Every form field becomes a Handlebars variable named after the input’s name attribute, for example {{firstName}} or {{message}}. After the first submission, MailDock detects the fields automatically and lists them in the template editor.

Ready to connect your first form?

Start free with one site. Upgrade when you add more clients.