ZError in Custom Form extension
Hey guys, I am having an error with my form custom action Uncaught TypeError: Cannot read properties of undefined (reading 'name’). Can anyone help me with this. Can't share the whole code will send it separately:
<script>
const ArticleFormExtension = {
name: 'ArticleFormExtension',
type: 'response',
match: ({ trace }) => trace.type === 'ArticleForm',
render: ({ trace, element }) => {
const form = document.createElement('form');
form.innerHTML = ``;
element.appendChild(form);
const $ = (s) => form.querySelector(s);
const $$ = (s) => Array.from(form.querySelectorAll(s));
form.addEventListener('input', (e)=>{
const t = e.target;
if (t.classList.contains('invalid') && t.value.trim()!=='') t.classList.remove('invalid');
});
form.addEventListener('submit', (e)=>{
e.preventDefault();
let ok = true;
$$('.invalid').forEach(el=>el.classList.remove('invalid'));
$$('input[required], select[required]').forEach(el=>{
if (!el.value) { el.classList.add('invalid'); ok=false; }
});
if (!ok) return;
const payload = {
//Data here
}
};
form.querySelector('.btn').disabled = true;
window.voiceflow.chat.interact({ type: 'complete', payload });
});
}
};
</script>
<script type="text/javascript">
(function(d, t) {
const v = d.createElement(t),
s = d.getElementsByTagName(t)[0];
v.onload = function() {
window.voiceflow.chat.load({
verify: { projectID: 'Project ID' },
url: 'https://general-runtime.voiceflow.com',
versionID: 'production',
assistant: {
extensions: [ArticleFormExtension]
}
});
};
v.src = "https://cdn.voiceflow.com/widget-next/bundle.mjs";
v.type = "text/javascript";
s.parentNode.insertBefore(v, s);
})(document, 'script');
</script>
<script>
const ArticleFormExtension = {
name: 'ArticleFormExtension',
type: 'response',
match: ({ trace }) => trace.type === 'ArticleForm',
render: ({ trace, element }) => {
const form = document.createElement('form');
form.innerHTML = ``;
element.appendChild(form);
const $ = (s) => form.querySelector(s);
const $$ = (s) => Array.from(form.querySelectorAll(s));
form.addEventListener('input', (e)=>{
const t = e.target;
if (t.classList.contains('invalid') && t.value.trim()!=='') t.classList.remove('invalid');
});
form.addEventListener('submit', (e)=>{
e.preventDefault();
let ok = true;
$$('.invalid').forEach(el=>el.classList.remove('invalid'));
$$('input[required], select[required]').forEach(el=>{
if (!el.value) { el.classList.add('invalid'); ok=false; }
});
if (!ok) return;
const payload = {
//Data here
}
};
form.querySelector('.btn').disabled = true;
window.voiceflow.chat.interact({ type: 'complete', payload });
});
}
};
</script>
<script type="text/javascript">
(function(d, t) {
const v = d.createElement(t),
s = d.getElementsByTagName(t)[0];
v.onload = function() {
window.voiceflow.chat.load({
verify: { projectID: 'Project ID' },
url: 'https://general-runtime.voiceflow.com',
versionID: 'production',
assistant: {
extensions: [ArticleFormExtension]
}
});
};
v.src = "https://cdn.voiceflow.com/widget-next/bundle.mjs";
v.type = "text/javascript";
s.parentNode.insertBefore(v, s);
})(document, 'script');
</script>
