Meli SDK

Forms

$3

Place a .meli.yml at your site root:

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

Create an HTML form:

`html










`

By default, the lib will automatically load and look 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

`html



`

$3

Install the lib:

`
npm i @getmeli/sdk
`

Use it in your code:

`js
import Meli from 'meli';

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

$3

To pass your own forms:

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

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

Manually create a form and bind it:

`js
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:

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

$3

On the HTML form element:

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

Or on the Form object:

`js
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. |

Development

1. Run Meli locally
1. Ship a site with a form
1. Run npx http-server -p 3030 .
1. In your site's index.html, use http://localhost:3030/build/browser.js for the SDK src
1. Start the build npm i && npm start`