Let's Talk

Building Dynamic Forms in Wix Using Velo: A Developer’s Guide

Kevin Champlin > AI Insights & Tech Trends > Development > Building Dynamic Forms in Wix Using Velo: A Developer’s Guide

In modern web development, dynamic forms play a key role in collecting data, driving user engagement, and integrating seamlessly with backend processes. If you’re working with Wix and want to take full advantage of its flexibility, leveraging Velo (formerly known as Corvid) can unlock more advanced, developer-centric control over form behavior and logic.

This guide will walk through building a dynamic form in Wix using Velo, allowing developers to interact with query parameters, customize form actions, and optimize user interactions based on real-time conditions.

Step 1: Setting Up Your Wix Form

First, create your form using the Wix editor. You can either add a pre-designed form or build your own from scratch by adding various input fields (textboxes, dropdowns, etc.).

Once your form is set up, connect it to a dataset if you plan to store submissions in Wix’s built-in database. This will allow you to map each field to a corresponding database field.

Step 2: Enable Velo Development Tools

To begin working with Velo, make sure you’ve enabled Dev Mode in your Wix site. This can be done by toggling the “Dev Mode” switch in the Wix editor, which will expose the code editor and allow you to write custom JavaScript code.

Step 3: Accessing Query Parameters

One of the strengths of Velo is its ability to interact with URL query parameters. This is useful when you want to modify form behavior based on the URL context (for example, customizing the form for different users).

You can use the wix-location API to extract query parameters from the URL. Here’s an example of how to do this:

import wixLocation from 'wix-location';

$w.onReady(function () {
    const queryParams = wixLocation.query;

    if (queryParams.agent) {
        console.log(`Agent found in query: ${queryParams.agent}`);
        // Perform actions based on the agent parameter
    } else {
        console.log("No agent query parameter found");
    }
});

In the code above, we check if an agent query parameter exists in the URL, and log it to the console. You can expand on this logic to customize form behavior (e.g., pre-filling fields or modifying the form’s appearance).

Step 4: Dynamically Controlling Form Fields

Once you’ve extracted query parameters, you may want to use them to pre-fill certain form fields or conditionally show/hide elements based on user input. This is where Velo’s setFieldValues() function comes in handy.

Here’s how you can dynamically set field values in your form:

$w.onReady(function () {
    const queryParams = wixLocation.query;

    // Example: Pre-fill a form field based on the query parameter
    if (queryParams.agent) {
        $w("#yourFormId").setFieldValues({
            "agent_id_1": queryParams.agent === "1" ? "Daffy Duck" : queryParams.agent === "2" ? "Fred Flintstone" : "Unknown"
        });
    }
});

This snippet sets the agent_id_1 field based on the value of the agent query parameter. If the value is “1”, the form is pre-filled with “Daffy Duck”; if it’s “2”, it pre-fills with “Fred Flintstone”. For any other value (or if the query parameter is absent), it defaults to “Unknown.”

Step 5: Handling User Interactions

You can further customize the user experience by listening for specific events, such as when a video finishes or when a user submits the form. Here’s an example that hides the form initially, displays a video, and shows the form only after the video has finished playing:

$w.onReady(function () {
    const form = $w("#yourFormId");
    const videoPlayer = $w("#yourVideoId");

    // Hide form on page load
    form.hide();

    // Show form once video ends
    videoPlayer.onEnded(() => {
        form.show();
    });
});

In this example, the form is hidden by default and only becomes visible when the video has finished playing. This type of interaction can improve engagement by ensuring users are focused on the video content before filling out the form.

Step 6: Submitting and Validating Form Data

After users interact with the form, you’ll want to validate the data before submission. Wix forms provide built-in validation (e.g., required fields, email format checking), but you can also add custom validation logic using Velo.

Here’s how to add a simple custom validation before the form is submitted:

$w.onReady(function () {
    $w("#submitButton").onClick(() => {
        const formDataset = $w("#yourFormDatasetId");
        const agentField = formDataset.getCurrentItem().agent_id_1;

        if (!agentField || agentField === "Unknown") {
            console.error("Invalid agent selected");
            return;
        }

        formDataset.save()
            .then(() => {
                console.log("Form submitted successfully");
            })
            .catch((err) => {
                console.error("Error submitting form:", err);
            });
    });
});

In this example, we check whether the agent_id_1 field contains a valid value before allowing the form to be submitted. If the value is invalid (e.g., “Unknown”), the form is not submitted, and an error is logged.

Step 7: Conclusion and Best Practices

Building dynamic forms in Wix using Velo allows developers to extend Wix’s capabilities far beyond simple drag-and-drop functionality. By tapping into Velo’s APIs and JavaScript, you can create forms that react to user input, URL parameters, and other real-time conditions.

When building forms in Velo, keep the following best practices in mind:

  • Leverage built-in validation: Where possible, use Wix’s native form validation features to minimize custom code and ensure consistency.
  • Keep your code modular: As your form logic grows, consider breaking down complex behaviors into smaller functions to keep your code maintainable.
  • Test your forms thoroughly: Ensure all form interactions work as expected, especially when dealing with query parameters or conditional logic.

With Velo, you can create truly customized and interactive forms, giving users a better experience and ensuring you collect the data you need efficiently.

Blog Posts