top of page

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!

Comments


ABOUT WIXCREATE

Welcome to WIXCreate, your top-level WIX Partner! Our experienced team of digital professionals has built hundreds of beautiful and functional websites using the WIX platform for companies and organizations around the world.

 

We're passionate about helping businesses like yours succeed online. With our expertise in design, development, and digital marketing, we're here to support you every step of the way. Whether you're looking to create a new website, improve your online presence, or drive more leads and sales, we're here to help you achieve your goals.

SUBSCRIBE!

Receive our latest blog posts directly in your inbox.

Thanks for subscribing!

HOW CAN WE HELP?

We offer the following services:

  • Design and development of new websites

  • Migration of existing websites to WIX

  • Help with managing and updating existing WIX websites

  • Ongoing website maintenance and support

  • SEO optimization to improve your website's search engine ranking

bottom of page