Skip to main content

[How-To] Password Protect a Page Within Enrollio

Charie

You can now password protect pages within Enrollio's website builder and funnel builder!



Video walkthrough

 

 

Step 1: Open the pop up

 

Step 2: Place this script inside the custom HTML/JS element:

<div id="error" style="display:none;">Incorrect Password</div>
<input type="password" id="pass">
<input type="button" value="Enter" id="enter" onclick="checkPass();">

<script>
  password='enrollio';
  css = 'body.blurred .inner{filter:blur(10px);filter:url(blur.svg#gaussian_blur);-webkit-filter:blur(10px)}body #overlay .inner,body.open{filter:blur(0)!important;filter:none!important;-webkit-filter:blur(0)!important}div#error{text-align:center;color:red;font-weight:700;font-size:20px}';
  style = document.createElement('style');
  style.innerHTML=css;
  document.querySelector('head').appendChild(style);
   document.body.classList='blurred'; 
  document.querySelector('#hl_main_popup').classList.remove('hide');
  document.querySelector('#hl_main_popup').classList.add('show');

   document.querySelector('#overlay').classList.remove('hide');
  document.querySelector('#overlay').classList.add('show');
  document.querySelector('#overlay').style.display='block';
  document.querySelector('#overlay').click = ''; 

   document.querySelector('.closeLPModal').remove();
  document.querySelector('#enter').click = function() { console.log('test'); };

  function checkPass()
  {
    pass = document.getElementById('pass').value;
    if (pass==password)
    {
     document.body.classList.remove('blurred');
     document.querySelector('#overlay').remove();
    } else {
     document.getElementById('error').style.display='block';
    }
  }
 
</script>
HTML

 

Step 3: Add a button to the form anywhere. Add the class popbutton to it.

 

 

Step 4: Underneath the button add an HTML/JS element. Add this script:

 

<script>
 document.querySelector('.popbutton').click();
</script>
HTML

Step 5: Add the following CSS into the Page Setting > Custom CSS area

 

.popbutton{
display:none;
}
body.blurred .inner{



     <i>/* Any browser which supports CSS3 */</i>
    filter: blur(10px);



    <i>/* Firefox version 34 and earlier */</i>
    filter: url("blur.svg#gaussian_blur");



    <i>/* Webkit in Chrome 52, Safari 9, Opera 39, and earlier */</i>
    -webkit-filter: blur(10px);
}
body <i>#overlay .inner,body.open {</i>
 filter: blur(0) !important;



    <i>/* Firefox version 34 and earlier */</i>
    filter: none !important;



    <i>/* Webkit in Chrome 52, Safari 9, Opera 39, and earlier */</i>
    -webkit-filter: blur(0px) !important; 
}
div<i>#error</i> {
    text-align:center;
    color:red;
    font-weight:bold;
font-size:20px;
}



<i>/* this styles the password box and the enter button */</i>
div<i>#hl_main_popup input {</i>
  width:50%;
  display:block;
  padding:10px;
  border:1px <i>#ccc solid;</i>
  margin:auto;
  margin-bottom:10px;
  margin-top:10px;
}
HTML