In case anybody is interested:
Based on that github issue, moving the example to the React framework I got the following code to start working:
const zsubmit = event => {
event.preventDefault();
setFormState(formState => ({...formState,isSending: true}));
getZammadConfig('https://your-zammad.server').then(config=>{
zammadSubmit(config).then(result=>{
console.debug(result);
//Redirect to where you want... or update the UI in other way.
window.location="/result";
});
})
};
const fingerprint='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASw';
async function getZammadConfig(server){
const response = await fetch(server+'/api/v1/form_config' ,{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
fingerprint: fingerprint
}),
});
return response.json();
}
async function zammadSubmit(config){
if (!config.enabled){
log.error("Server reports form Submission disabled! ")
}
const response = await fetch(config.endpoint,{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: formState.values.fullname,
email: formState.values.email,
body: formState.values.message,
title: "Zammad Web Enquiry",
fingerprint: fingerprint,
token: config.token
})
});
return response.json();
}
And you find this to the HTML components:
<form
name="contact-form"
method="post"
onSubmit={zsubmit}
>
You can use form-state to have the form change its look while sending, by using the react useState pattern too.
I just have to look at browser compatibility too…