Submit form from custom UI

[rvalle]

Hi!

I am trying to integrate the ticket from form functionality in a React webapp.

I would like to submit a form to zammad from our own UI.

Is there a code sample for submitting the form without using the provided UI?

Rafael

[rvalle]

I think this issue on github may be related: Contact form: 401 when posting to /api/v1/form_submit · Issue #1456 · zammad/zammad · GitHub

In case anybody else is interested

[rvalle]

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…