onWixFormSubmitted handler issues

Ask the community
, , ,
1

Question:
Having trouble getting the onWixFormSubmitted handler to fire. I’ve gotten it to fire on a new website I built earlier this year in 2023, but for one I built way back in 2018, I can’t get it to fire!

So, because it’s the same handler for both websites, and one’s working, the other isn’t… I’m assuming it’s a legacy issue?

Code that doesn’t work: (Just trying to send to data layer and onto Mixpanel from there)

export function cateringrequestform_wixFormSubmitted(event) {

    console.log("Debugging: ", $w("#fname"));

    const formData = {
        'FirstName': $w("#fname").value,
        'LastName': $w("#lname").value,
        'Organization': $w("#organization").value,
        'Email': $w("#emailaddress").value,
        'Phone': $w("#phonenumber").value,
        'SelectedDate': $w("#pickdate").value,
        'SelectedTime': $w("#picktime").value,
        'ServiceType': $w("#servicetype").value,
        'NumberOfPeople': $w("#people").value,
    };

    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        event: 'catering-form-submit',
        formData: formData,
    });
}

Code that works: (Goes to an API endpoint and into a MySQL database)

import { submitForm } from 'backend/api';

export function section2form1_wixFormSubmitted(event) {
    const data = {
        user_fn: $w("#fname").value,
        user_ln: $w("#lname").value,
        user_email: $w("#email").value,
        message_reason: $w("#reason").value,
        message_details: $w("#message").value,
    };

    return submitForm(data)
        .then(response => {
            console.log(response);
        })
        .catch(error => {
            console.error(error);
        });
}

Product:
I’m in the developer tools of Wix Editor.

What are you trying to achieve:
Has anyone ran into this issue? Code working for one website and not another? (I mean, unless my code is wrong?)

What have you already tried:
I’ve tried adding event listeners to log any click to the console, but the form elements don’t get picked up for either website. Rewrote the code 1,000 different ways, just throwing my hands in the air at this point.

Additional information:
Not the strongest coder, but clearly gotten this to work already.

2

Hi,

When working with the Window Web API on sites built on Wix, you must do so via the Wix Window Frontend API.

In the first code snippet you provided, it seems you are trying to access the Window Web API directly, instead you should look into sending the event to Google Tag Manager with trackEvent()

You can learn more about integrating Google Tag Manager with your Wix Site via the following support article: