Meli SDK
Forms
Using <script/>
Place a .meli.yml at your site root:
forms:
form1:
type: email
recipient: test@test.comCreate 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('submitted', () => {
console.log('submitted');
});
</script>
</body>
</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
asyncdirective from your script tag
<script ... data-meli-init="false"></script>
<script>
Meli.Forms.init().catch(console.error);
</script>Using Npm
Install the lib:
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. |
Development
- Run Meli locally
- Ship a site with a form
- Run
npx http-server -p 3030 . - In your site's
index.html, usehttp://localhost:3030/build/browser.jsfor the SDK src - Start the build
npm i && npm start