{"id":26871,"date":"2022-11-04T21:15:59","date_gmt":"2022-11-04T21:15:59","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=26871"},"modified":"2023-07-28T11:06:11","modified_gmt":"2023-07-28T11:06:11","slug":"jetengine-how-to-unlock-content-based-on-progress","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-unlock-content-based-on-progress\/","title":{"rendered":"How to Unlock Content Based on Progress"},"content":{"rendered":"\n

Unlocking Content Based on Progress in Elementor<\/h2>\n\n\n\n

With the JetEngine <\/strong>plugin, you\u2019re able to create a WordPress membership<\/strong><\/a> site. From this tutorial, you will know how to unlock the posts with the lessons to the users according to their progress. You will learn how to attach Dynamic Visibility<\/strong><\/a> to the form so that users can open the next lesson according to the answers in the JetEngine<\/strong> or JetFormBuilder<\/strong> form.<\/p>\n\n\n\n

For example, we\u2019ve created a Page that shows all lessons on our site. To each image with the closed lock, we\u2019ve attached a pop-up with a form and dynamic visibility connected to the options in the form.<\/p>\n\n\n\n\"page\n\n\n\n

When users select the \u201cYes\u201d option in the form, they unlock the next lesson. With the Conditional Visibility<\/strong><\/a> for the form field, users cannot see the following question unless they don\u2019t correctly answer the previous one.<\/p>\n\n\n\n\"page\n\n\n\n

Create posts, or a new CPT and posts<\/h3>\n\n\n\n

First, you need to create posts with the studying content or the dedicated Custom Post Type<\/strong><\/a> (CPT) for the lesson posts.<\/p>\n\n\n\n\"post\n\n\n\n

Create a meta field in the meta box<\/h3>\n\n\n\n

To make the form and the Dynamic Visibility<\/strong><\/a> work jointly, you need to create a meta field.<\/p>\n\n\n\n

Since we want to display the form on the page, we are required to create the meta box<\/strong><\/a> <\/strong>for the pages<\/strong>.<\/p>\n\n\n\n

Proceed to JetEngine > Meta Boxes <\/em><\/strong>and push the \u201cAdd New\u201d <\/strong>button.<\/p>\n\n\n\n

Enter the Title<\/strong> and select the \u201cPost\u201d option in the Meta Box for <\/strong>field.<\/p>\n\n\n\n

In the Visibility Conditions <\/strong>tab, choose the \u201cPages\u201d post type in the Enable For Post Types <\/strong>field.<\/p>\n\n\n\n\"meta\n\n\n\n

Tick the \u201cNew Meta Field\u201d <\/strong>button on the bottom of the page. Since we want to attach the Dynamic Visibility<\/strong> condition to the user\u2019s choice \u201cYes\u201d or \u201cNo\u201d in the form, we will create a Radio<\/strong> meta field with such options. Feel free to create the same field or other ones according to your needs.<\/p>\n\n\n\n

You can create the Radio<\/strong> options manually by hitting the \u201cNew Field Option\u201d<\/strong> button or fill it with the Glossary<\/a> <\/strong>feature by enabling the Get options from the glossary <\/strong>toggle.<\/p>\n\n\n\n\"meta\n\n\n\n

After finishing, press the \u201cUpdate Meta Box\u201d <\/strong>button.<\/p>\n\n\n\n

How to Create a JetEngine Form<\/h2>\n\n\n\n

Move to JetEngine > Forms<\/em><\/strong> in the WordPress Dashboard and click on the \u201cAdd New\u201d <\/strong>button. Give the new form a title.<\/p>\n\n\n\n

Leave the Hidden <\/strong>field settings as they are by default, hit the \u201cAdd Field\u201d <\/strong>button, and place the new field between the Hidden <\/strong>field and the Submit Button<\/strong>.<\/p>\n\n\n\n

In the new Field Settings<\/strong> window, we\u2019ve selected the same Type<\/strong> as our just created meta field \u2013 \u201cRadio,\u201d entered the field\u2019s Name<\/strong> and Label<\/strong>. The Name <\/strong>will be used in the form settings. The Label <\/strong>will be shown to users in the form on the front end so that you can enter the question here.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

Be aware that all field names inside one form must be unique, and field names must contain a value with only lowercase Latin letters, no spaces. If you want to split words, this can be done by using the \u201c-\u201d and \u201c_\u201d characters.<\/p><\/div><\/div>\n\n\n\n

In the Fill Options From <\/strong>field, pick the \u201cManual Input\u201d option and add the same options as in your meta field (\u201cYes\u201d and \u201cNo\u201d in our case). If you\u2019ve used the Glossary <\/strong>for the meta field, you can use it again here by selecting the \u201cGlossary\u201d option in the Fill Options From <\/strong>field.<\/p>\n\n\n\n\"radio\n\n\n\n

Then, push the \u201cApply Changes\u201d<\/strong> button.<\/p>\n\n\n\n

Tick the \u201cPre-set form field values\u201d checkbox. Choose the \u201cPost\u201d option as a Source<\/strong> and the \u201cCurrent post\u201d option in the Get post ID from<\/strong> field.<\/p>\n\n\n\n

In the Fields Map<\/strong>, select the \u201cPost ID\u201d option near the Hidden<\/strong> field name (post_id<\/strong> in our case). Near the Radio<\/strong> or another field for the Dynamic Visibility, pick the \u201cPost Meta\u201d option, and in the nearby field, enter the name of the recently created meta field.<\/p>\n\n\n\n\"pre-set\n\n\n\n

Go to the Post-submit Actions \/ Notifications Settings<\/strong> tab and click on the pencil-shaped icon to edit the action.<\/p>\n\n\n\n

Pick the \u201cInsert\/Update Post\u201d Type<\/strong>, select the needed Post Type <\/strong>(\u201cPages\u201d in our case), and pick the \u201cPublished\u201d Post Status<\/strong>.<\/p>\n\n\n\n

In the Fields Map<\/strong>, select the \u201cPost ID (will update post)\u201d option near the Hidden<\/strong> field name (post_id<\/strong> in our case). Near the Radio<\/strong> or another field for Dynamic Visibility, pick the \u201cPost Meta\u201d option again, and in the nearby field, enter the name of the recently created meta field.<\/p>\n\n\n\n\"insert\n\n\n\n

After finishing, push the \u201cApply Changes\u201d<\/strong> button.<\/p>\n\n\n\n

You can also add several fields with the questions into the form to check your learners’ knowledge and apply Conditional Rules<\/strong> to them.<\/p>\n\n\n\n\"radio\n\n\n\n

We\u2019ve created three question Radio fields for the form (including the field with the \u201cYes\u201d and \u201cNo\u201d options) and applied the Conditional Rules<\/strong> to the last two of them.<\/p>\n\n\n\n

Click on the \u201cSet up conditional rules\u201d<\/strong> button and then press the \u201c+ New Rule\u201d <\/strong>button.<\/p>\n\n\n\n\"conditional\n\n\n\n

In the Edit conditional logic for <\/strong>window, select the \u201cShow this field if\u2026\u201d Type<\/strong>, choose the name of the previous Field <\/strong>with the question, pick the \u201cEqual\u201d Operator<\/strong>, and enter the Value <\/strong>of the right option in the Value to compare <\/strong>field. <\/p>\n\n\n\n

For instance, our previous field contains the Label <\/strong>with the question \u201cWhat plugin is required for the CPT creation?\u201d and has two Options<\/strong> entered manually with the \u201cjetengine\u201d and \u201cjetelements\u201d Values<\/strong>. The correct answer is \u201cJetEngine,\u201d <\/strong>so we\u2019ve entered the \u201cjetengine\u201d <\/strong>in the Value to compare <\/strong>field. Thus, the user will only see the next question if they pick the correct answer.<\/p>\n\n\n\n\"edit\n\n\n\n

Press the \u201cApply Changes\u201d<\/strong> button and set the Conditional Logic<\/strong> to other fields if you need it.<\/p>\n\n\n\n

We don\u2019t want to save the answers results of the newly created Radio field, so we\u2019ve left the Fields Map <\/strong>options in the Pre-set<\/strong> and Post-submit Action <\/strong>unchanged.<\/p>\n\n\n\n\"form\n\n\n\n

When you are done working with the form, hit the \u201cPublish\u201d <\/strong>or \u201cUpdate\u201d <\/strong>button.<\/p>\n\n\n\n

How to Create a JetFormBuilder Form<\/h2>\n\n\n\n

If you prefer to create the form with the JetFormBuilder<\/strong><\/a> <\/strong>plugin, that\u2019s how to do this.<\/p>\n\n\n\n

Navigate to JetFormBuilder > Add New <\/em><\/strong>in the WordPress Dashboard. Give the new form a title.<\/p>\n\n\n\n

Leave the Hidden Field<\/strong> settings as they are by default and delete the Text Field<\/strong> if you don\u2019t need it.<\/p>\n\n\n\n

Click on the Toggle block inserter<\/strong> button and place the Radio<\/strong> Field<\/strong><\/a> between the Hidden Field<\/strong> and the Action Button<\/strong>.<\/p>\n\n\n\n

In the Block General <\/strong>settings tab of the Radio Field, <\/strong>enter the Field Label<\/strong> and the Form field name<\/strong>. The Field Label <\/strong>will be shown to users in the form on the front end so that you can enter the question here, and the Form field name <\/strong>will be used in the form settings.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

Be aware that all field names inside one form must be unique, and field names must contain a value with only lowercase Latin letters, no spaces. If you want to split words, this can be done by using the \u201c-\u201d and \u201c_\u201d characters.<\/p><\/div><\/div>\n\n\n\n\"jetformbuilder\n\n\n\n

Pick the \u201cManual Input\u201d option in the Fill Options From<\/strong> field and then hit the \u201cManage Items\u201d <\/strong>button.<\/p>\n\n\n\n

In the new appeared window, add the same options as in your meta field (\u201cYes\u201d and \u201cNo\u201d in our case). If you\u2019ve used the Glossary <\/strong>for the meta field, you can use it again here by selecting the \u201cGlossary\u201d option in the Fill Options From <\/strong>field.<\/p>\n\n\n\n

Then, push the \u201cUpdate\u201d<\/strong> button.<\/p>\n\n\n\n\"edit\n\n\n\n

Proceed to the JetForm<\/strong> settings tab and go to the Preset Settings <\/strong>section. Enable <\/strong>the toggle, select the \u201cPost\u201d as a Source<\/strong>, and pick the \u201cCurrent post\u201d option in the Get post ID from<\/strong> field.<\/p>\n\n\n\n

Choose the \u201cPost ID\u201d option near the Hidden<\/strong> field name (post_id<\/strong> in our case). Near the Radio<\/strong> or another field for Dynamic Visibility, pick the \u201cPost Meta\u201d option, and in the nearby field, enter the name of the recently created meta field.<\/p>\n\n\n\n\"preset\n\n\n\n

Move to the Post Submit Actions <\/strong>tab, select the \u201cInsert\/Update Post\u201d type, and click on the pencil-shaped icon to edit the action.<\/p>\n\n\n\n\"post\n\n\n\n

In the appeared window, select the needed Post Type <\/strong>(\u201cPages\u201d in our case), and pick the \u201cPublished\u201d Post Status<\/strong>.<\/p>\n\n\n\n

In the Fields Map<\/strong>, select the \u201cPost ID (will update post)\u201d option near the Hidden<\/strong> field name (post_id<\/strong> in our case). Near the Radio<\/strong> or another field for Dynamic Visibility, pick the \u201cPost Meta\u201d option again, and enter the name of the recently created meta field in the field below.<\/p>\n\n\n\n\"edit\n\n\n\n

After finishing, push the \u201cUpdate\u201d<\/strong> button.<\/p>\n\n\n\n

You can also add several fields with questions into the form to check your learners\u2019 knowledge and apply Conditional Rules<\/strong> to them.<\/p>\n\n\n\n\"radio\n\n\n\n

We\u2019ve created three question Radio fields for the form (including the field with the \u201cYes\u201d and \u201cNo\u201d options) and transformed<\/strong><\/a> the last two fields into the Conditional <\/a><\/strong>Blocks<\/strong><\/a>.<\/p>\n\n\n\n

Click on the field block and its icon on the appeared panel. Select the Conditional Block<\/strong><\/a> from the transformation list.<\/p>\n\n\n\n\"field\n\n\n\n

To open the Conditional Block<\/strong> settings window, press the button with the crossed arrows icon placed on the top tool panel to the left of the \u201cOptions\u201d<\/strong> button.<\/p>\n\n\n\n\"how\n\n\n\n

In the Conditional Logic <\/strong>window, select the \u201cShow this field if\u2026\u201d Type<\/strong>, <\/strong>choose the name of the previous Field <\/strong>with the question, pick the \u201cEqual\u201d Operator<\/strong>, and in the Value to compare <\/strong>field enter the Value <\/strong>of the correct option.<\/p>\n\n\n\n

For instance, our previous field contains the Label <\/strong>with the question \u201cWhat plugin is required for the CPT creation?\u201d and has two Options<\/strong> entered manually with the \u201cjetengine\u201d and \u201cjetelements\u201d Values<\/strong>. The correct answer is \u201cJetEngine,\u201d <\/strong>so we\u2019ve entered \u201cjetengine\u201d <\/strong>in the Value to compare <\/strong>field. Thus, the user will only see the next question if they pick the correct answer.<\/p>\n\n\n\n\"conditional\n\n\n\n

Press the \u201cUpdate\u201d<\/strong> button in the window and set the Conditional Logic<\/strong> to other fields if you need it.<\/p>\n\n\n\n

We don\u2019t want to save the answers results of the newly created Radio field, so we\u2019ve left the settings in the Pre-set <\/strong>and Post-submit Action <\/strong>unchanged.<\/p>\n\n\n\n\"post-submit\n\n\n\n

When you are done working with the form, hit the \u201cPublish\u201d <\/strong>or \u201cUpdate\u201d <\/strong>button.<\/p>\n\n\n\n

Create a pop-up<\/h3>\n\n\n\n

To create a pop-up, you need the installed JetPopup<\/strong><\/a> plugin. If you don\u2019t want to set the pop-up, you can also place the form on the page instead of putting it in the pop-up, so simply skip this step.<\/p>\n\n\n\n

Navigate to JetPopup > Create New Popup <\/em><\/strong>in the WordPress Dashboard. You can also proceed to the JetPopup Presets Library <\/strong>and install any pop-up template from there and redesign it, but we will create a pop-up from scratch.<\/p>\n\n\n\n\"pop-up\n\n\n\n

Give the pop-up a title and hit the \u201cPublish\u201d <\/strong>and then \u201cEdit with Elementor\u201d <\/strong>buttons.<\/p>\n\n\n\n

Drag-n-drop the Form <\/strong>widget (for JetEngine and JetFormBuilder <\/strong>forms) or the JetForm <\/strong>widget (for the JetFormBuilder forms) into the pop-up.<\/p>\n\n\n\n

In the Form <\/strong>widget\u2019s Content <\/strong>settings, choose the Provider <\/strong>plugin which you used to create a form and Select <\/strong>the form<\/strong>\u2019s name.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

To make the Dynamic Visibility<\/strong> work with the form, select the \u201cReload\u201d Submit type<\/strong> to trigger dynamic visibility after page rendering.<\/p><\/div><\/div>\n\n\n\n\"form\n\n\n\n

After finishing, click on the \u201cUpdate\u201d <\/strong>button.<\/p>\n\n\n\n

Create a page with content<\/h3>\n\n\n\n

Move to Pages > Add New<\/em><\/strong> in the WordPress Dashboard. Give the page a title and press the \u201cEdit with Elementor\u201d<\/strong> button.<\/p>\n\n\n\n

Since there need to be different forms and visibility conditions applied to each post, it\u2019s not possible to use the Listing Grid on the page.<\/p>\n\n\n\n

At first, we placed the Title <\/strong>and Video <\/strong>widgets manually on the page without applying dynamic visibility to them to provide the first lesson materials to any learners.<\/p>\n\n\n\n\"the\n\n\n\n

For every next lesson, we\u2019ve added the Title<\/strong>, the Image <\/strong>with the <\/strong>closed lock, the Video<\/strong>, <\/strong>and the Button <\/strong>widgets.<\/p>\n\n\n\n\"following\n\n\n\n

Click to edit the Image <\/strong>widget with the closed lock and proceed to the Advanced <\/strong>section.<\/p>\n\n\n\n

Open the JetPopup<\/strong> tab, select the needed pop-up in the Attached Popup <\/strong>field, and leave the \u201cClick on Widget\u201d Trigger Type<\/strong>.<\/p>\n\n\n\n\"attached\n\n\n\n

Open the Dynamic Visibility <\/strong>tab and Enable <\/strong>the toggle.<\/p>\n\n\n\n

The lock must disappear when the user selects the \u201cYes\u201d answer to the question \u201cWould you like to move on to Lesson 2?\u201d in the form. So choose the \u201cHide element if condition met\u201d Visibility condition type<\/strong> and the \u201cEqual\u201d Condition<\/strong>.<\/p>\n\n\n\n

Hit the \u201cDynamic Tag\u201d<\/strong> button near the Field <\/strong>and select the \u201cCustom Field\u201d option from the list.<\/p>\n\n\n\n\"dynamic\n\n\n\n

In the dynamic tag Settings<\/strong>, Pick the Field<\/strong> you\u2019ve created in the Meta Box <\/strong>for the Pages.<\/strong><\/p>\n\n\n\n\"custom\n\n\n\n

In the Value <\/strong>field, enter the value “yes” of the Radio meta field\u2019s \u201cYes\u201d option.<\/p>\n\n\n\n\"dynamic\n\n\n\n

Click to edit the widget that will appear when the user chooses the \u201cYes\u201d option in the form. It could be the featured image of the post, an open lock image, or a video (as in our case).<\/p>\n\n\n\n

The settings are similar, but you need to select the \u201cShow element if condition met\u201d Visibility condition type<\/strong>.<\/p>\n\n\n\n

You can also attach the same popup to this widget, so users can change their answers and unlock the lesson by selecting the \u201cNo\u201d option in the form, but that\u2019s optional.<\/p>\n\n\n\n\"show\n\n\n\n

Set redirection on the post<\/h3>\n\n\n\n

If you need users to switch to the post with the lesson after they open the video or image, you can set it in the following ways.<\/p>\n\n\n\n