A Popup Contact us Form for bloggers CSS | html
icon-search
A Popup Contact us Form for bloggers CSS | html

A Popup Contact us Form for bloggers CSS | html

A Popup Contact us Form for bloggers

Html Code here

Hi guys today you're going to learn how to add popup contact form in blogger or website.Every site owner want
to display contact form for their contributors.But blogger official contact form seem simple.Now i have done to design
amazing style contact form using html,CSS and javascript code.

Features:

• Get leads if you offer services
• You will Get user e-mail for respond.
• Easy to use for user.
• You will Get message automatically.
• You will attach with other bloggers who might want to Participate

So,let's start.
First you need to add simple contact form.
1. Go to Blogger Dashboard.
2. Click Layout.
3. Click Add a Gadget.
4. Find Contact Form and click to add.
5. Click Save.
Well Done you've add simple contact form.In the sidebar you will see simple contact form.You can simply hide this simple form by using CSS Code below.
Copy CSS Code and paste it into blogger Theme before ]]></b:skin>  tag.

CSS
<style>
#ContactForm1
 {
 display: none ! important;
 }   </style>
we're going to customize it well using html,css and javascript.You no need more work.
just copy below code and paste it into blogger html Theme before the </head>  tag
 
JAVASCRIPT
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'/>
Now you've all done Now just simply copy below html code and paste into your web page or Theme.where you want to show popup contact form.



HTML
<div class="shape-separator"></div>
<div id="my-welcome-message">
<h2 style="color:White">Please Fill out this field</h2>
<body oncontextmenu="return false;">
<div class="rauf1">
<input id="ContactForm1_contact-form-name" type="text" required/>
<label>First Name</label></div>
<div class="rauf1">
<input type="text" required/>
<label>Last Name</label>
</div>
<div class="rauf1">
<input id="ContactForm1_contact-form-email" type="text" required/>
<label>Email Address</label></div>
<div class="rauf1">
<textarea id="ContactForm1_contact-form-email-message" name="email-message" type="text" placeholder="Write text here..."
required/></textarea>
</div>
<input id="ContactForm1_contact-form-submit" class="button" type="button" value="Submit" /> <br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div></div></div>
Now Copy Cascading Style sheet Code and paste it into below HTML code.

CSS
<style>
textarea{
box-shadow: 0 0 10px #fc0206;
  background-color:transparent;
  border: 1px solid #ff4a56;
  
  font-size: 17px;
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 10px 15px;
  border-radius: 15px;
  color: white;
  font-weight: 100;
  letter-spacing: 0.01em;
  position: relative;
  
}
#apna-blackout {
z-index: 499;
position: fixed;
width: 100%;
height: 100%;
position: fixed;
background:#000000;
opacity: 1.5;
}
#my-welcome-message {
overflow:hidden;
z-index: 500;
position: fixed;
width: 36%;
left: 30%;
top: 15%;
padding: 50px 3%;
background:black;
position: fixed;
border-radius: 30px;
}

#apna-close {

 background: radial-gradient(circle closest-side, pink, transparent);
position: absolute;
top: 15px;
right: 20px;
cursor: pointer;
border: 1px solid #ff4a56;
  line-height: 0;
  font-size: 17px;
  display: inline-block;
  box-sizing: border-box;
  padding: 20px 15px;
  border-radius: 30px;
  color:white;
  font-weight: bold;
  letter-spacing: 0.01em;
 z-index: 1;
    
 }
#apna-close:hover{
background-image: radial-gradient(circle closest-side, transparent,hotpink,yellow,white, yellow,#ff4a56);
color:black;
}

#apna-dialog h2 {
font-size: 2em;
margin: 0;
}
#apna-dialog p {
margin: 0;
}
  .transition,  button, .rauf1 label,  .rauf1 input[type="text"] {
  -moz-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
  -o-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
  -webkit-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
  transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
}

* {
  font-family: Helvetica, sans-serif;
  font-weight: light;
  -webkit-font-smoothing: antialiased;
}
.button {
box-shadow: 0 0 10px #fc0206;
  margin-top:10px;
  background-image: linear-gradient(black,hotpink, black);
  border: 1px solid #ff4a56;
  line-height: 0;
  font-size: 17px;
  display: inline-block;
  box-sizing: border-box;
  padding: 20px 30px;
  border-radius: 60px;
  color:white;
  font-weight: 100;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
}
 .button:hover,  button:focus {
 color: black;
 background-image: radial-gradient(white,hotpink,yellow,#ff4a56,white,yellow);
}
 .rauf1 {
  position: relative;
  padding: 10px 0;
}
 .rauf1:first-of-type {
  padding-top: 0;
}
.rauf1:last-of-type {
  padding-bottom: 0;
}
 .rauf1 label {
  transform-origin: left center;
  color: white;
  font-weight: 100;
  letter-spacing: 0.01em;
  font-size: 17px;
  box-sizing: border-box;
  padding: 10px 15px;
  display: block;
  position: absolute;
  margin-top: -40px;
  z-index: 2;
  pointer-events: none;
}
.rauf1 input[type="text"] {
box-shadow: 0 0 10px #fc0206;
  appearance: none;
  background-color: black;
  border: 1px solid #ff4a56;
  line-height: 0;
  font-size: 17px;
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 10px 15px;
  border-radius: 60px;
  color: white;
  font-weight: 100;
  letter-spacing: 0.01em;
  position: relative;

  z-index: 1;
}
.rauf1 input[type="text"]:focus {
  outline: none;
  background: #fafcb5;
  color: #000000;
  margin-top: 30px;
}
.rauf1 input[type="text"]:valid {
  margin-top: 30px;
}
.rauf1 input[type="text"]:focus ~ label {
  -moz-transform: translate(0, -35px);
  -ms-transform: translate(0, -35px);
  -webkit-transform: translate(0, -35px);
  transform: translate(0, -35px);
color:white;

}
.rauf1 input[type="text"]:valid ~ label {
font-size:15px;
  text-transform: uppercase;
  font-style: italic;
  -moz-transform: translate(0, 35px) scale(0.6);
  -ms-transform: translate(0, -35px) scale(0.6);
  -webkit-transform: translate(0, -35px) scale(0.6);
  transform: translate(0 , -35px) scale(0.6);
color:white;
}
</style>
Copy Javascript Code and paste it into below Cascading Style sheet (CSS) code.

JAVASCRIPT 
<script>
$(function () {
$('#my-welcome-message').firstVisitPopup({
cookieName: 'homepag1e',
showAgainSelector: '#show-message'
});
});

(function ($) {

 'use strict';

 $.fn.firstVisitPopup = function (settings) {

  var $body = $('body');
  var $dialog = $(this);
  var $blackout;
  var setCookie = function (name, value) {
   var date = new Date(),
    expires = 'expires=';
   date.setTime(date.getTime() + 31536000000);
   expires += date.toGMTString();
   document.cookie = name + '=' + value + '; ' + expires + '; path=/';
  }
  var getCookie = function (name) {
   var allCookies = document.cookie.split(';'),
    cookieCounter = 0,
    currentCookie = '';
   for (cookieCounter = 0; cookieCounter < allCookies.length; cookieCounter++) {
    currentCookie = allCookies[cookieCounter];
    while (currentCookie.charAt(0) === ' ') {
     currentCookie = currentCookie.substring(1, currentCookie.length);
    }
    if (currentCookie.indexOf(name + '=') === 0) {
     return currentCookie.substring(name.length + 1, currentCookie.length);
    }
   }
   return false;
  }
  var showMessage = function () {
   $blackout.show();
   $dialog.show();
  }
  var hideMessage = function () {
   $blackout.hide();
   $dialog.hide();
   setCookie('apna' + settings.cookieName, 'true');
  }

  $body.append('<div id="apna-blackout"></div>');
  $dialog.append('<a id="apna-close">X');
  $blackout = $('#apna-blackout');

  if (getCookie('apna' + settings.cookieName)) {
   hideMessage();
  } else {
   showMessage();
  }

  $(settings.showAgainSelector).on('click', showMessage);
  $body.on('click', '#apna-blackout, #apna-close', hideMessage);

 };

})(jQuery);
</script>
Hope So you are happy Now by adding a stylish contact page for visitors.
if you have any kind of problem feel free comment below.we will respond you as soon as possible.

Disqus Codes

No comments

Notifications

Disqus Logo