All Collections
Tutorials
How to use Dynamic Visibility to Protect an Element by Password
How to use Dynamic Visibility to Protect an Element by Password
Updated over a week ago

By using Dynamic Visibility you can easily protect an Element based on a Password that is stored in meta. Follow the below steps to protect an Element.

Few Things to Consider

  1. We shall have two containers, one for Form and the second for the content that has to be protected, i.e. Form Container & Content Container

  2. Password will be set from the ACF Field, so will create a custom field i.e password-key.

  3. The form will not send if the password is wrong means it will send only if the user puts the correct password stored in the ACF Field.

  4. Form action will be "redirect" with a Parameter, we can name it pwd

  5. The Content container will be shown only when the Parameter has a correct value. And if the parameter has a correct value, the Form Container will be set to hidden.

  6. We will use an ID for the content container i.e. protected so that the user is redirected to the protected content container on the page reload.

Features Used in this Tutorial

Steps Involved

  • Create two containers: 1. Form Container, 2. Content Container

  • Drag and Drop a Form inside the Form container.

  • Drag and drop the content widgets that you want to protect inside the Content container. Give this container a special ID. i.e. protected

  • Create a custom field with a key: "password-key"

  • Add a field item of type "Text" with ID "password"

  • Set the Conditional Validation to show an error message when the password is wrong. Use the token password == "[acf:password]"

You can also customize the error and success messages in Additional Options.

Now if you input a value that doesn't match the value of your ACF Field, the form will not send.

  • Now set the Form action to redirect after submitting.

Now use https://yoursite.com/?pwd=[field id="password"]#protected in the redirect. You can also use this token to use the current page URL: [post:permalink]?pwd=[field id="password"]#protected

  • Now set the visibility for your Form Container to hide it when Password is correct

  • Set the Content Container visibility to show it when Password is correct

  • Congratulations! You've successfully protected the content with a password.

For Multiple Passwords

When you have multiple passwords, that are, for example, stored in your ACF Multiple Select Field you can follow the below workaround.

Set the containers visibility context trigger settings to set Parameter status as "in array"

In this case, disable the conditional validation and navigate to additional options and enable PHP validation and set the below code.

$value = get_field( "password-key" );

if (!(in_array($fields['newpassword'], $value))){
return ['password', 'this password is wrong' ];
}

Did this answer your question?