Guides

Add Mailiy to your website

You need your form's key from the dashboard and an HTML form. Ready-made forms are in the templates.

Guide for your platform

• WordPress contact form without a plugin

  A WordPress contact form without a plugin: add an HTML block, paste your key, done. Submissions arrive by email, hosted in the EU.

• Receive Webflow forms by email

  Send Webflow forms to Mailiy: set action and method on the Form Block, add the key with an Embed. Submissions by email, servers in the EU.

• Add a contact form to Framer

  A contact form in Framer with Mailiy: add an HTML embed, paste your key, publish. Submissions land in your inbox by email.

• HTML contact form without PHP

  An HTML contact form without PHP or a server: copy the form code, add your key, receive submissions by email. GDPR compliant, hosted in the EU.

• React contact form without a backend

  A React contact form without a backend: one component with fetch(), no extra package. Submissions arrive by email, servers in the EU.

• Next.js contact form without an API route

  A Next.js contact form without an API route: a client component that posts to Mailiy. No server code, no SMTP, submissions by email from the EU.

• Astro contact form without a server

  A contact form for Astro without a server adapter: an HTML form as a component, submissions by email. Works with a static build, hosted in the EU.

• Vue and Nuxt contact form without a backend

  A Vue and Nuxt contact form without a backend: a single-file component that posts to Mailiy. Submissions by email, GDPR compliant in the EU.

Privacy

What a form needs under the GDPR is in the checklist for a GDPR compliant contact form.

Any other website

A form with its action pointing to Mailiy and method POST is enough. Add the script as well and it sends every such form in the background and writes the answer below it. If your page's lang attribute says German, the answer is in German, otherwise in English.

<form action="https://mailiy.com/api/submit" method="POST"
      data-success="Thanks! We'll get back to you.">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  …
  <p data-mailiy-result></p>
</form>
<script src="https://mailiy.com/client/script.js" defer></script>

• data-success, data-error: your own text instead of Mailiy's answer.
• data-mailiy-result: where the answer shows. If it's missing, the script adds one at the end of the form.
• data-mailiy / data-mailiy-off: include a form with a different action, or leave a Mailiy form alone.
• redirect: If the form has a field with this name, the browser goes there after success.

While sending, the form has aria-busy and the button is disabled. Afterwards data-state is success or error, and the script fires an event:

document.addEventListener("mailiy:success", (event) => {
  // event.target is the form, event.detail the answer from Mailiy
});

Open the dashboard