Fetch () does not work with Lightboxes

Ask the community
, ,
1

Hi guys, I have this code in my contact us page, the # of the form is “contactus”:

import {fetch} from 'wix-fetch';
import wixSeo from 'wix-seo';
import {local} from 'wix-storage';
import wixLocation from 'wix-location';

export function contactus_wixFormSubmitted() {
  fetch("https://hook.integromat .com/ia4ods8mjptw4e4exz", {
    "method": "post",
    "headers": {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    "body":
      "first_name="+$w('#firstname').value
      +"&last_name="+$w('#lastname').value
      +"&email="+$w('#email').value
      +"&website="+$w('#website').value
      +"&message="+$w('#message').value
   })
}

It works out great! When the form is successfully submitted, I receive an http post request to my Integromat webhook.

I copied the exact same code to my lightbox, since it has a form in it. The # of the form is “getDemoPopup”:

import {fetch} from 'wix-fetch';
import wixSeo from 'wix-seo';
import {local} from 'wix-storage';
import wixLocation from 'wix-location';

export function getDemoPopup_wixFormSubmitted() {
  fetch("https://hook.integromat .com/ia4ods8mjptw4e4exz", {
    "method": "post",
    "headers": {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    "body":
      "first_name="+$w('#firstname').value
      +"&email="+$w('#email').value
      +"&website="+$w('#website').value
   })
}

For some reason, it does not work.
What am I missing here?
Thanks in advance :slight_smile:

2

Worth mentioning that this form redirects the user to another page after it’s submitted.

3

It is certainly possible to use fetch() from a Lightbox. What isn’t working? Are you getting errors? Are you using the correct field IDs in the Lightbox code? You also aren’t sending the same fields (message, lastname) - not sure if that matters or not.

Note: that fetch() requires handling of the returned Promise. See the following for more information about Promises:

4

i tried including a console log right after the wixFormSubmitted () function, it didn’t show. This means that for some reason, this function isn’t triggering at all.

The fields shouldn’t matter, I just have less fields in that form.
The ID is identical.

This is a simple post http request, I don’t need to get any sort of answer from the server, just to push the data into the http. It works out great as it is in my contact us page, just not in the lightbox.

5

@admin81489 Welp, it seems as if the issue isn’t fetch() , but rather the wixFormSubmitted() event handler isn’t being triggered.

You stated…
I copied the exact same code to my lightbox, since it has a form in it. The # of the form is “getDemoPopup”:
What form does the Lightbox have? Did you add a Wix Form ? How did you add the form and configure it? How does the form appear in the Lightbox? Does it have the same field names? (I know, I know, but I’m just checking to be sure)

6

I hope this covers everything:

2260×1204 419 KB

The IDs of the fields are exactly as they are in the code.
I appreciate your help.

7

I want to check if there’s a system issue. Please post the URL of your site, and tell me where I can find this Lightbox/WixForm.

8

I created a test form and the wixFormSubmitted() event handler triggered just fine. Where did you put your console.log() statement? You said it didn’t display?

9

From the screen shot, it appears that you did not connect the wixFormSubmitted function to the Form.

Like this:

618×638 61.2 KB

10

@yisrael-wix Thanks, that did it :slight_smile: