Issue with Data Transmission via Webhook from Wix to Zapier

Other Questions Zapier
1

I am working on sending data from a custom Wix form to Zapier using a webhook. Although Zapier reports a successful receipt, the payload appears to be empty. I have restructured my code to see if it resolves the issue. Any advice or suggestions would be appreciated.

import { request } from 'wix-fetch';

export function processSubmission(event, $w) {
  const endpoint = "YOUR_WEBHOOK_ENDPOINT"; // Replace with your webhook URL
  
  const fname = $w("#firstNameInput").value;
  const lname = $w("#lastNameInput").value;
  const emailAddr = $w("#emailInput").value;
  const companyName = $w("#companyInput").value;
  const phoneNum = $w("#phoneInput").value;
  const staffCount = $w("#staffCountInput").value;
  const comments = $w("#commentsInput").value;
  
  const payload = {
    fname: fname,
    lname: lname,
    email: emailAddr,
    company: companyName,
    phone: phoneNum,
    staff: staffCount,
    comments: comments
  };
  console.log(payload);
  
  const jsonPayload = JSON.stringify(payload);

  request(endpoint, { method: 'POST', body: jsonPayload })
    .then((res) => {
      if (res.ok) return res.json();
      else throw new Error('Response not OK');
    })
    .then(data => {
      console.log(JSON.stringify(data));
      $w('#submitButton').disable();
      $w('#submitButton').label = 'Submission received!';
    })
    .catch(error => console.log(error));
}
2

hey, try verifyin that the payload fieldnames exactly match what zapier expects. i once ran into an issue with a header mismatch and data type misinterpretation. using explicit ‘content-type: application/json’ might help clear it up.

3

hey, i suspect the issue might be with how the endpoint processes the json. even if zapier shows success, missing or misnamed headers can cause empty payloads. you could try setting ‘content-type: application/json’ explicitly. cheers

4

Through my experience with webhook integrations, I learned that sometimes the issue isn’t with the payload formation but rather with how the headers and endpoint configurations are managed. I encountered a similar problem where data seemed to transmit successfully, yet the payload was empty on the receiving end. After scrutinizing the network traffic, I discovered that explicitly setting the Content-Type header was necessary on some endpoints. This ensured that the payload was interpreted correctly. I recommend examining your endpoint’s expected header configuration and confirming whether it requires any specific formats for successful processing.

5

In my experience, similar issues with an empty payload were often due to misconfiguration in how data was passed to the webhook endpoint rather than a problem with creating or stringifying the payload. I found that ensuring every element ID was correct and matching the expected parameters on the receiving end is crucial. In my case, adding explicit headers like ‘Content-Type: application/json’ when posting the data solved the issue. Also, verifying that all form fields contained valid values before submission helped avoid sending an incomplete request.

6

From my experience, troubleshooting issues with seemingly successful responses but empty payloads often revolves around ensuring all aspects of the data transfer process are fully configured. I once encountered a similar problem with a custom form integration where the form data appeared to vanish despite successful responses on the receiving end. It turned out that although the code was fine, the integration required specifying explicit HTTP headers, especially the content type. I found that adding ‘Content-Type: application/json’ to the request configuration helped resolve the issue. Additionally, consider verifying that the promised asynchronous operations are properly chained, ensuring the payload is fully constructed and passed without interference from other code parts.