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 tagasync
- removing the directive from your script tag
`html
`
Install the lib:
``
npm i @getmeli/sdk
Use it in your code:
`js
import Meli from 'meli';
Meli.Forms.init().catch(console.error);
`
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();
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. |
1. Run Meli locally
1. Ship a site with a form
1. Run npx http-server -p 3030 .index.html
1. In your site's , use http://localhost:3030/build/browser.js for the SDK srcnpm i && npm start`
1. Start the build