@onereach/webform
Version:
Content Builder includes several views for: - Content builder view itself; - Web Form view; - Slack block-kit builder;
73 lines (61 loc) • 2.24 kB
HTML
<!-- !!! This is sample of usage webform as a lib. Don't delete it !!! -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Google icons css file -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Container for rendering app -->
<div id="form"></div>
<!-- Sample of submit button -->
<div>
<button id="submitButton">
Submit
</button>
</div>
<!-- Webform script -->
<script src="./dist/lib/oneReachWebForm.umd.js"></script>
<script>
// You can use this app in simple html file or any js component
const options = {
selector: '#form',
formUrl: 'https://content-assets.onereach.ai/apps/content-builder/0.0.17/index.html#/webform/staging/0916fc16dc849f81860ede4a4df13492ae733b79f9979703c7ab3317d492d7d3/M2I1NGE2YzktY2E2ZS00MTJkLWI3Y2ItYjk0NjhmMWRjZDNl',
hideSubmitButton: false // show or hide submit button in webform App
}
console.log('local form index.html');
// Create new instance and pass options
const form = new oneReachWebForm.default(options);
// Callbacks for events
const loaded = () => {
console.log('Loaded');
}
const onSubmit = () => {
console.log('onSubmit');
}
const onSubmitSuccess = ({ result, formData }) => {
console.log('onSubmitSuccess', { result, formData });
}
const onSubmitError = (error) => {
console.log('onSubmitError', error);
}
const onError = (error) => {
console.log('onError', error);
}
// Subscrine on events
form.on('on-webform-loaded', loaded);
form.on('on-webform-submit', onSubmit);
form.on('on-webform-submit-success', onSubmitSuccess);
form.on('on-webform-submit-error', onSubmitError);
form.on('on-webform-error', onError); // returns Object { message: 'The form has expired' } || { message: 'Missing parameters (endpoint, key)'}
// Emit event
const submitButton = document.querySelector('#submitButton');
submitButton.addEventListener('click', () => {
form.emit('emit-webform-submit')
})
</script>
</body>
</html>