#Forms

Meli allows you to submit HTML forms easily. At the moment, we only support sending form submissions by email. Hence, you will need to configure emails beforehand.

Inputs of type file are sent as attachments.

#Captcha

Forms can be protected using Google Recaptcha V3.

  1. Get your API keys here.
  2. Configure environment variables in Meli:
MELI_GOOGLE_RECAPTCHA_SITE_KEY=
MELI_GOOGLE_RECAPTCHA_SECRET_KEY=

#Using <script/>

Place a .meli.yml at your site root:

forms:
  form1:
    type: email
    recipient: test@test.com

Create an HTML form:

<!doctype html>
<html>
<head>
    <!-- ... other scripts -->
    <script async src="https://unpkg.com/@getmeli/sdk@^1/build/browser.js"></script>
</head>
<body>

<form data-form="form1" id="my-form">
    <input type="text" name="name">
    <input type="file" name="logo">
    <button type="submit">Submit</button>
</form>

<script>
    const formElement = document.getElementById('my-form');
    formElement.addEventListener('submitting', () => {
        console.log('submitting');
    });
    formElement.addEventListener('submitted', () => {
        console.log('submitted');
    });
</script>

</body>
</html>

By default, the sdk automatically looks for forms with the data-form attribute. You can disable this by:

  • adding the data-meli-init="false" to your script tag
  • removing the async directive from your script tag
<script ... data-meli-init="false"></script>
<script>
    Meli.Forms.init().catch(console.error);
</script>

#Using Npm

Install the SDK:

npm i @getmeli/sdk

Use it in your code:

import Meli from 'meli';

Meli.Forms.init().catch(console.error);

#Api

To pass your own forms:

const form = document.getElementById('my-form');

Meli.Forms
  .init([form])
  .catch(console.error);

Manually create a form and bind it:

Meli.Forms
  .init([]) // passing the empty array cancels the auto detection
  .then(() => {
    const formElement = document.getElementById('my-form');
    const form = new Meli.Forms.Form(form);
  })
  .catch(console.error);

To remove all listeners:

// ...
const form = new Meli.Forms.Form(form);
forms.remove();

#Events

On the HTML form element:

const formElement = document.getElementById('my-form');
formElement.addEventListener('submitted', () => {
  console.log('submitted');
});

Or on the Form object:

Meli.Forms
  .init([])
  .then(() => {
    const formElement = document.getElementById('my-form');
    const form = new Meli.Forms.Form(form);
    form.addEventListener('submitted', () => {
      console.log('submitted');
    });
  })
  .catch(console.error);
Event Callback signature Description
submitting () => void The form submit callback was called.
submitted () => void The form was submitted successfully.
error (error) => void Something went wrong.