Dynamic.ooo

By using <a href="https://help.dynamic.ooo/en/articles/4954083-dynamic-visibility">Dynamic Visibility</a> you can easily protect an Element based on a Password that is stored in meta. Follow the below steps to protect an Element.

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

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

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.

Form action will be "redirect" with a Parameter, we can name it <code>pwd</code>

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.

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.

1. We shall have two containers, one for Form and the second for the content that has to be protected, i.e. Form Container &amp; Content Container
2. Password will be set from the ACF Field, so will create a custom field i.e <code>password-key</code>.
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 <code>pwd</code>
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.

<a href="https://help.dynamic.ooo/en/articles/4952562-dynamic-visibility-triggers-context">Dynamic Visibility Context Trigger</a>

<a href="https://help.dynamic.ooo/en/collections/4893554-dynamic-shortcodes-types">Dynamic Shortcodes</a>

<a href="https://help.dynamic.ooo/en/articles/5302896-conditional-validation-for-elementor-pro-form">Conditional Validation for Elementor Pro Form</a>

- <a href="https://help.dynamic.ooo/en/articles/4952562-dynamic-visibility-triggers-context">Dynamic Visibility Context Trigger</a>
- <a href="https://help.dynamic.ooo/en/collections/4893554-dynamic-shortcodes-types">Dynamic Shortcodes</a>
- <a href="https://help.dynamic.ooo/en/articles/5302896-conditional-validation-for-elementor-pro-form">Conditional Validation for Elementor Pro Form</a>

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 unique ID. i.e. <code>protected</code>

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

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

- 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 unique ID. i.e. <code>protected</code>

- 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 dynamic shortcode <code>password == "{acf:password}"</code> in the expression.

- Set the Conditional Validation to show an error message when the password is wrong. Use the dynamic shortcode <code>password == "{acf:password}"</code> in the expression.

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 be sent. 

Now, set the Form action to redirect after submitting. 

- Now, set the Form action to redirect after submitting. 

Now use <code>https://yoursite.com/?pwd=[field id="password"]#protected</code> in the redirect.

You can also use this shortcode to use the current page URL: <code>{post:permalink}?pwd=[field id="password"]#protected</code>

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

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


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

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

- Set the Content Container visibility to show it when the Password is correct 
- Congratulations! You've now successfully protected the content with a password.

Few Things to Consider

Features Used in this Tutorial

Steps Involved