Dynamic Landing Pages Redirection Based on User Input using WS Form

In the unofficial Bricks Discord chat, a user asked:

So I have to make a website that has a password on the frontpage and depending on two answers/different password, they either go to landingpage A or landingpage B. Anyone have experience with this and would be the best solution for this?

This tutorial provides the steps to use the Conditional Logic and Actions features of WS Form Pro to redirect the user to /page-a/ or /page-b/ depending on what they input in a password field.

We also provide the solution to an alternative logic of redirecting users to /page-a/ if they enter a specific password, to /page-b/ if they enter another specific password or to /page-c/ if the password is something else.

Step 1

Install and activate WS Form.

Go to WS Form → Add New and create a new blank form.

Enter a title say, Dynamic Landing Pages Form and press Save.

Click on the Password field from the Toolbox → FIELDS on the right side.

Bring up the field settings.

Uncheck “Password Strength Meter”.

Step 2

Click on Actions icon.

Delete all the three default actions namely, Save Submission, Show Message and Send Email.

Add a new Action row by clicking + and name it say, “Redirect to Landing Page A”.

Uncheck “Form Submitted”.

Set the URL to your desired landing page.

Duplicate this action and change the URL to that of your other landing page.

Step 3

Click on the Conditional Logic icon.

Click + to add a new row.

Name it say, “Homepage Redirect”.

Set up the logic as desired. Below we are setting it up such that if the password matches the correct string, secret in this case, the user will be taken to /page-a/ after clicking the Submit button and if the password is anything other than secret, they will be redirected to /page-b/.

You could alternatively set it up such that if the password is secret1, the user is taken to /page-a/ and if the password is secret2, to /page-b/ and if anything else, to /page-c/ (make sure you add another Action row for this) using multiple conditions like this:

Preview the form and after ensuring that it is working as it should, save and publish it.

Step 4

Insert the form via the block WS Form adds in the WordPress block editor or via its shortcode.



Instant access to 390+ Bricks code tutorials with BricksLabs Pro

Leave the first comment