Animated form HTML snippets

      No Comments on Animated form HTML snippets

Animated form HTML snippets using simple CSS and JavaScript

See the Pen Animated form HTML snippets using simple CSS and JavaScript by scanfcode (@scanfcode) on CodePen.

Animated form HTML snippets-using css and Java script for economy

CSS

.cnt_post_1
{
  background-color: #009999;
  height:100px;
  position:relative;
  width:280px;
}
.cnt_post_1 span,.cnt_post_1 form
{
  color:#009999;
  background-color:#fff;
  border-radius:20px;
  position:absolute;
  top:30px;
  left:90px;
  padding:5px 10px;
  z-index:3;
  cursor:pointer;
}
#form1
{
   left:15px;
   opacity:0;
   padding:5px 5px 5px 10px;
   transition:0.1s ease-in-out;
   z-index:2;
}
#form1 input
{
  border:solid 0px #ccc;color:#009999;
}
#form1 button
{
  border-radius:20px;
  background-color:#009999;
  color:#fff;
  padding:8px 20px;
}
#form1 button:disabled
{
  color: #e6e6e6; opacity:0.5;
}

HTML

<div class='cnt_post_1'>
  <span id='notice' onclick='form_active();'>Notify me</span>
  <form id='form1'>
    <input id='cnt_post_1_input' type="email"><button type="button" onclick='thankyou()' id='cnt_post_1_btn' disabled>Send</button>
  </form>
</div>

JavaScript and jQuery

/* runs on click of the button notify me */
function form_active()
{
 
 // to hide notify button
  document.getElementById('notice').style.opacity="0";
  
 //to display the form
  document.getElementById('form1').style.opacity="1";
}

function thankyou()
{
     //to hide form
     document.getElementById('form1').style.opacity="0";
     
     //change the notify me text to thank you
     document.getElementById('notice').innerHTML="Thank You !";
 
    //display new thank you button
     document.getElementById('notice').style.opacity="1";
}

// variable for javascript regular expression
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;


//function running as you type in the input box
$("#cnt_post_1_input").on('input', function(){

//var email holds the value of the input
var email= $("#cnt_post_1_input").val();

//test() function matches the value in input with  regular expression
	if(re.test(email)) {
		document.getElementById("cnt_post_1_btn").disabled=false;
 }
	else {
              document.getElementById("cnt_post_1_btn").disabled=true;
 }
});

Edit on Codepen

See the Pen Animated form HTML snippets using simple CSS and JavaScript by scanfcode (@scanfcode) on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *