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.

Did this answer your question?