Wix Form Input Redirects

In this tutorial, you will learn how to use form inputs to redirect users to different pages on your Wix website. Depending on what the user selects from the form, they will be redirected to a specific page. This can enhance user interaction by guiding them to relevant content based on their choices.

Setting Up Form Redirects

Case 1: Dropdown Input Optional

In this case, the dropdown input is optional. If the user does not make a selection, a thank you message will be displayed instead.

Here’s how to set it up:

import wixLocation from 'wix-location';

$w.onReady(function () {

    const button = $w('#submitButtton');

    button.onClick(() => {
        const dropdownValue = $w('#dropdown1').value;

        if (dropdownValue === "Page 1") {
            wixLocation.to("/page-1");
        } else if (dropdownValue === "Page 2") {
            wixLocation.to("/page-2");
        } else {
            $w('#thankyoutext').show();
        }
    });
});

Case 2: Dropdown Input Mandatory

In this case, the dropdown selection is required for the form to proceed. The submit button will be enabled only after the user makes a selection.

Here’s the code for this setup:

import wixLocation from 'wix-location';

$w.onReady(function () {

    const button = $w('#submitButton');
    const dropdown = $w('#dropdown1');

    dropdown.onChange(() => {
        button.enable();
    });

    button.onClick(() => {
        const dropdownValue = $w('#dropdown1').value;

        if (dropdownValue === "Page 1") {
            wixLocation.to("/page-1");
        } else if (dropdownValue === "Page 2") {
            wixLocation.to("/page-2");
        } else {
            $w('#thankyoutext').show();
        }
    });
});

Extending for Multiple Pages

You add more conditions if you need to handle more than two pages. For example:

else if (dropdownValue === "Page 3") {
    wixLocation.to("/page-3");
}

You can extend the code to include as many pages as required.

Key Points to Remember

1. Element Naming: Ensure that your form elements' names match those in the code, or adjust the code to fit your element names.

2. Dropdown Values: Make sure the values in your dropdown match the dropdownValue in the code. While the labels can be anything, the values must align with the code.

By following these steps, you can easily set up form redirects on your Wix website, creating a more personalized and dynamic user experience.

Need Help with Your Website Design?

If you need assistance with your website design, WIXCreate is here to help! Our team of experts can assist you in creating a stunning and functional website tailored to your needs. Contact us today to get started!