In this lesson, you will learn how to use form inputs to redirect users to different pages on your Wix website. Depending on your user's input in the form, will redirect them to different pages.
Before you copy and paste the code on your website, be sure to watch our video to learn how to set up your website properly!
Now that you have an understanding for how to set up your form and website, below is the code for...
Input Dropdown Not Required:
import wixLocation from 'wix-location'; $w.onReady(function () { const btn = $w('#submitBtn'); btn.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('#thankstext').show(); } }) });
Input Dropdown Required:
import wixLocation from 'wix-location'; $w.onReady(function () { const btn = $w('#submitBtn'); const dropdown = $w('#dropdown1'); dropdown.onChange(() => { btn.enable(); }) btn.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('#thankstext').show(); } }) });
Keep in mind that you will need more of the line below if you have more than 2 pages.
else if (dropdownValue == "Page 2") { wixLocation.to("/page-2") }
And make sure that you name your page input elements the same as mine to match the code or visa versa. Also, make sure that your dropdown input values match the "dropdownValue" in the code. The dropdown input label can say anything, but the value is what the Velo code reads.
Have Fun!