4 min read

Creating a Personalized Form Experience in Wix Using Velo

If you're building a dynamic website in Wix, there might be times when you need a form that automatically recognizes which page a visitor is coming from and pre-fills information based on that page. For example, suppose you have multiple products or services listed on different dynamic pages. In that case, you may want a form to automatically capture the relevant product or service information when a visitor requests a quote. This eliminates the need for users to manually input this data, improving both user experience and data accuracy.

In this tutorial, you’ll learn how to create a button on a dynamic page that links to a form and automatically passes details from the dynamic page to the form using Velo by Wix.

What You’ll Achieve

By the end of this guide, you will have:

A button on a dynamic page that links to a form.
A form that pre-fills specific fields with data from the page the user was viewing, ensuring accurate and personalized input.

Why This is Important

Personalizing form experiences not only reduces friction for your users but also helps capture more accurate data by pre-filling fields that users might overlook or mistype. This is especially useful for product or service quote forms, booking requests, or lead generation forms where details vary depending on the page.

Step 1: Adding a Button to Your Dynamic Page

The first step is to create a button that will link to a form, sending dynamic information about the page to the form. This could be details such as the name of a product, service, or other page-specific data.

How to Set it Up:

Add a Button: On your dynamic page, place a button that users can click to request more information or submit a form.
Use Velo Code: Now, we need to add Velo code to capture data from the dynamic page and send it to the form.

Here’s the code to add to your dynamic page:

import wixWindow from 'wix-window';

// This function is triggered when the button is clicked
export function btnQuote_click(event) {
    // Retrieve the current item's details from the dataset connected to the dynamic page
    let currentItem = $w('#dynamicDataset').getCurrentItem();
    
    // Create an object with the data you want to send to the form (e.g., product name and ID)
    let dataObj = {
        "name": $w("#text16").text, // Replace with the actual text element you want to capture
        "id": currentItem._id
    }
    
    // Open the form (lightbox) and pass the data object to it
    wixWindow.openLightbox("QuoteForm", dataObj);
}

What This Code Does:

Captures data from the current dynamic page: The code retrieves information like the name and ID of the current item displayed on the dynamic page.
Sends data to a lightbox form: When a user clicks the button, the wixWindow.openLightbox function sends the data to a form (which opens as a lightbox).

This ensures that the form knows exactly which page the user is coming from and what item they’re interacting with.

Step 2: Setting Up the Lightbox Form

Next, we need to create the form that will receive the data from the dynamic page and display it in the form fields.

How to Set it Up:

Create a Lightbox: In your Wix Editor, add a lightbox page that will serve as the form. You can design the form to include fields for user input, such as name, email, and product details.
Add Velo Code: On the lightbox page, we’ll use Velo code to capture the data sent from the dynamic page and pre-fill it into the form.

Here’s the code for the lightbox form:

import wixWindow from 'wix-window';
let receivedData = wixWindow.lightbox.getContext(); // Get the data sent from the dynamic page

$w.onReady(function () {
    initializeForm(); // Pre-fill the form with data when the page is ready

    $w('#dataset1').onBeforeSave(() => {
        // Before saving the form, set the "referenceField" to the ID from the dynamic page
        $w('#dataset1').setFieldValue("referenceField", receivedData.id);

        return true; // Return true to proceed with saving
    });
});

function initializeForm() {
    // Create options to display in the form based on the data received
    let options = [
        { "label": receivedData.name, "value": receivedData.id }
    ];
    
    // Use these options to pre-fill form fields if necessary
    // For example, you might pre-fill a dropdown or a text field
}

What This Code Does:

Retrieves the data sent from the dynamic page: The wixWindow.lightbox.getContext() function fetches the data object sent from the button click on the dynamic page.
Pre-fills the form: The initializeForm function can pre-populate any relevant form fields with the data received.
Links the form to the dynamic page: Before the form saves, it assigns a "referenceField" (you’ll need to replace this with the actual database field) to ensure that the submitted form is linked to the specific dynamic page the user was viewing.

Step 3: Customizing the Form

You can further customize the form by:

Pre-filling Additional Fields: You could use more fields from the dynamic page, such as prices, descriptions, or other product/service details.
Adding Validation: Ensure that required fields are filled before submitting.
Adjusting the Layout: Style the form to match the look and feel of your site.

Key Considerations

Database Field Names: Make sure to replace "referenceField" with the actual field in your database that links to the dynamic item. This is important for data organization and reporting.
Form Customization: Depending on your use case, you can customize the form to pre-fill more fields, display different data, or trigger additional logic before submission.
Testing: Test the functionality on your live site to ensure that the form correctly receives and pre-fills data from different dynamic pages.

By following this guide, you’ve created a personalized form experience that links a dynamic page to a form and automatically pre-fills relevant information. This setup is ideal for product/service requests, booking forms, or any scenario where users interact with different items on your website.

With Velo by Wix, the possibilities for dynamic content are nearly endless. You can expand on this by adding more functionality like email notifications, form triggers, and more.

At WIXCreate, we specialize in building custom, high-performance websites using Wix. Whether you need a simple website, complex dynamic functionalities, or expert advice on how to take your Wix site to the next level, our team is here to help. We are proud to be a Wix Partner with a deep understanding of how to make the most of Wix's tools, including Velo, to create stunning and functional websites tailored to your unique needs.