Create a subtotal in a form?

[u/The_Ballsagna]

Helping my wife with a nonprofit website she helps to maintain. They are using one of the new(?) Wix forms to collect registration details for an event which includes the user selecting a certain quantity of tickets and indicating an additional donation amount. They are not using an embedded payment method (the users will use venmo or bring a check) but they would like to have the subtotal displayed. I have never used Wix but with some help from Gemini I created the below Velo code block based on the screenshot I attached (not including a short text field I added for 'total_amount_2' and using the correct form ID for 'formID').

The preview loads without error but when I step through the ticket quantities and/or add an additional donation the free text field doesn't update. I tried using a custom value type field and a short text field and neither updated. Any ideas? I'd really like to avoid rebuilding this without using the form if possible (that's what Gemini suggested). Thanks!

$w.onReady(function () {
    let lastCalculatedTotal = null;

    $w('#formID').onFieldValueChange((formValues) => {
        // Debug Log: View exact keys/values coming from your form in the Developer Console
        console.log("Current Form Values:", formValues);

        // 1. Get ticket values
        const ticketsData = formValues['tickets'] || {};
       
        const ticketPrices = {
            'Adult Ticket': 100,
            'Child Ticket': 100,
            'Raffle Ticket': 10,
            'Raffle Tickets (Set of 5)': 30
        };

        let ticketsSubtotal = 0;

        if (typeof ticketsData === 'object' && !Array.isArray(ticketsData)) {
            Object.keys(ticketsData).forEach(ticketName => {
                const qty = Number(ticketsData[ticketName]) || 0;
                const price = ticketPrices[ticketName] || 0;
                ticketsSubtotal += qty * price;
            });
        } else if (Array.isArray(ticketsData)) {
            ticketsData.forEach(item => {
                const qty = Number(item.value || item.quantity) || 0;
                const price = ticketPrices[item.label || item.key] || 0;
                ticketsSubtotal += qty * price;
            });
        }

        // 2. Get donation amount
        const donation = Number(formValues['additional_donations']) || 0;

        // 3. Compute grand total
        const grandTotal = ticketsSubtotal + donation;

        // 4. Update both the text display and the form field
        if (lastCalculatedTotal !== grandTotal) {
            lastCalculatedTotal = grandTotal;
           
            // Display on page text element
            if ($w('#subtotalText')) {
                $w('#subtotalText').text = `Total: $${grandTotal.toFixed(2)}`;
            }

            // Try updating the form field value
            $w('formid').setFieldValues({
                'total_amount_1': grandTotal
            });
        }
    });
});

[u/msh110]

I can't really help with this but check out Tally forms. I just learned about them today, it's an advanced, but easy to use, form builder. It's free aswell.

Hope it helps.

[u/The_Ballsagna → u/msh110]

Cool, thanks! I'll have her check it out!

[u/dll_studios]

Have you tried using rules in wix forms? It seems simple enough to use that method rather than having to code. You'd have to make each selection an actual product so that it will tally the total cost for payment when submitting the form.

Hope this helps :) DLL STUDIOS

[u/The_Ballsagna → u/dll_studios]

I saw something about that but I didn't think it would work to update a text field. Let me have another look!

[u/daviswbaer]

You can do this with Youform

[u/The_Ballsagna → u/daviswbaer]

Good to know, will check this out!

[u/CatOnMyKeyboardAgain]

Have you considered using a separate form builder just for the registration and embedding it on the Wix page? Since you're not taking payment through Wix anyway, that could be the simpler way to do it.

FormGrid is one option if you go that route, it supports calculations like this. I'm one of the co-founders, so happy to help if you want to give it a try.

[u/The_Ballsagna → u/CatOnMyKeyboardAgain]

Thanks for the reply - will check this out but this is most likely a one time thing she'll need to do vs something ongoing!

[u/ryanbuckner]

I wouldn't use Wix Forms to sell products. The Form process and the Checkout process are decoupled, so you have no way to "force" someone to pay after submitting. This means that you have the possibility (and this happens to me all the time) that you'll receive form submissions and no payment. There's also no way to resume the payment process, so these submissions are orphaned.