Blogger Ever

Add message and customize contact form in Blogger

Add message and customize message form in Blogger
Contact form is a helpful widget,Blogger provided,since I had provided a customization snippet for it.But,now I'm going to share how to add message in a contact form,like write your full name or Please make sure that e-mail is correct or something like that.Sometimes it is a need or sometimes it is for elaboration.In this post I'll teach how to add message and a customization snippet to customize your contact form using CSS.So lets begin.

To add message it requires pure Jquery,so lets begin with adding message.
First you must know how to add contact form,to get form go to the link below.

Now to add message follow the steps below.
  • You must add Jquery first if you didn't add it yet.
  • You must confirm that Jquery is present or not,if you will add jquery twice,then Jquery won't work.
  • To add Jquery
  • Go to Template > Edit HTML
  • Then paste the following code just after <head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
  • After adding Jquery,
  • Just before </head> paste the following script.
<script>
  $(document).ready(function(){
    $(".form p:nth(0)").append("<span class='contact-form-message'>Full name</span>");
    $(".form p:nth(1)").append("<span class='contact-form-message'>Make sure e-mail is correct,because we will reply through this e-mail.</span>");
    $(".form p:nth(2)").append("<span class='contact-form-message'>Please be descriptive.</span>");
  });
</script>
  • Replace RED highlighted text with your desire text,it will come above name field.
  • Replace Orange highlighted text with your desire text,it will come above e-mail field.
  • Replace yellow highlighted text with your desire text,it will come above message field.
  • Now add the following script just above ]]></b:skin>
/*
---------------------------------------------
Contact Form Widget By Bloggerever.com
---------------------------------------------
*/
.contact-form-widget
{
color: #333;
}
.contact-form-widget input,.contact-form-widget textarea
{
background: #fff;
margin:10px 0;
-webkit-box-shadow: 0px 0px 2px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 0px 2px rgba(50, 50, 50, 0.75);
box-shadow:         0px 0px 2px rgba(50, 50, 50, 0.75);
border: none;
color: #333;
}
.contact-form-widget input:focus,.contact-form-widget textarea:focus
{
border: none;
}
.contact-form-message
{
font:normal 12px 'open sans',sans-serif;
font-style:italic;
color:#BDBCBC;
}
.contact-form-widget .contact-form-button
{
background: #333 !important;
color: #fff;
}
.contact-form-widget .contact-form-button:hover
{
border: none;
}
  • Save template and see effect.
  • If you find any problem,you may ask in comments.


Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.