RN Hckr: Simple Feedback Form Using jQuery And CSS For Blogger

Simple Feedback Form Using jQuery And CSS For Blogger

Its been a long time I written a tutorial for Blogger. All these days you can see me into Blogger templates and WordPress themes, but I love creating tuts more than making themes or templates whatever. Ok, so today I will take to you to a simple feedback form tutorial for Blogger users using the jQuery and CSS. The original source of this tutorial was fromTutorialzine, we made some modification, changed the form method and made it work smoothly for blogger. So lets get started.

Step 1: Open your Blogger Dashboard and navigate to Edit HTML and check on Expand Widget Templates

Step 2: Now Press Ctrl+Fsearch for ]]></b:skin> and paste the below code before ]]></b:skin>

#feedback{

background-color:#9db09f;
width:310px;
height:330px;
position:fixed;
bottom:0;
right:120px;
margin-bottom:-270px;
z-index:10000;
}

#feedback .section{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcy79G7ne31D3KACLRilmiK4HdXy8iXmWdTJXG7b-xQKLBDyKBcwDkK5nJ9w0rbJQvWnjDEps0w85ChgIVC8n9V5Z-lHa48lnA-DfgUifkQs3ZKhtvzGNxM991NFoa4QZVQfKLmmpIqrr0/s1600/bg.png') repeat-x top left;
border:1px solid #808f81;
border-bottom:none;
padding:10px 25px 25px;
}

#feedback .color{
float:left;
height:4px;
width:20%;
overflow:hidden;
}

#feedback .color-1{ background-color:#d3b112;}
#feedback .color-2{ background-color:#12b6d3;}
#feedback .color-3{ background-color:#8fd317;}
#feedback .color-4{ background-color:#ca57df;}
#feedback .color-5{ background-color:#8ecbe7;}

#feedback h6{
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXgXzOvf8lacDBfUubXnDVD4ZX5obx7ODySaDKE857q_GG0pCbcUbbHseEVr-M4vXM6XvatKx9BoAz5lR9kjFC5mHQg5an_21EfScvQ-R3mXxw4r9oPsu-Ychw_WHyWfe4PSn1ARt0WZvA/s1600/feedback.png") no-repeat;
height:38px;
margin:5px 0 12px;
text-indent:-99999px;
cursor:pointer;
}

#feedback .message{
font-family:Corbel,Arial,sans-serif;
color:#5a665b;
text-shadow:1px 1px 0 #b3c2b5;
margin-bottom:20px;
}

#feedback .arrow{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijriFo7SWiFEc_XDnUkSnDTDCRHEDkyVoRpLDkTLPQtw9BpmLu8_LVwP0Li-I1jHjS-oQZb5A1DF-aTW08d3jjO6oPSs3spGXC28801Jqiv7fJBUjzsq7s3GkBBp1LpcG98YvET7I9wpIM/s1600/arrows.png') no-repeat;
float:right;
width:23px;
height:18px;
position:relative;
top:10px;
}

#feedback .arrow.down{ background-position:left top;}
#feedback h6:hover .down{ background-position:left bottom;}
#feedback .arrow.up{ background-position:right top;}
#feedback h6:hover .up{ background-position:right bottom;}

Step 3: Now Press Ctrl+F Search for <div id='main-wrapper'> and place the below before <div id='main-wrapper'>

rnhckr<div id='feedback'>



<span class='color color-1'/>
<span class='color color-2'/>
<span class='color color-3'/>
<span class='color color-4'/>
<span class='color color-5'/>

<div class='section'>


<h6>
<span class='arrow up'/>Feedback</h6>

<p class='message'>
Drop in your suggestions about our blog. We appreciate your feedback.</p>

WUFOO FORM SCRIPT GOES HERE
</div>

</div>

Step 4: In order to ensure the smoothness when its clicked, we are adding a little script. If jQuery is initialized previously initialized in your blog template, add only the second script after <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'/><br/><script src='http://sites.google.com/site/bloggermint/script.js'/>

Step 5: This is the very important step. In order to add a form to the feedback form, I am using Wufoo forms to be integrated in the feedback form. So visit Wufoo website, create a free account. After creating the account, you will be taken to the form creator dashboard, now select paragraph text to insert it in the form

Once you added the paragraph text, click save and select I’m finished! Take me back to the form manager

Step 6: Now you will be in Forum Manager, so click on Default theme drop down box and select New Theme. In the Theme Designer you have to do certain things

1. Go to Backgrounds > Highlight and change the color to transparent

2. Go to Buttons and select the button type as link and enter this link there https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsWu5xqP7JEOBhByGoe5MY3ouTizwoZzRZ-gjzaryLUx8k2pcXkf0j2I4wJQPRz2dD34YJyXkUBuxBFLOanoji1Rr3D6asMrEXDmONbys0xSdvkd1W9vkiTG93iJz1uJ8ZaGl_UkO8RAIq/s1600/submit.png

3. Go to Advanced and paste this URL on the text box – http://sites.google.com/site/bloggermint/feedback.css

Thats it. Now name the theme and save it. After saving the form, click on code of the form from the forum manager page and select Embed form code and copy the javascript from there

Finally paste the copied code in the step 3 by replacing the text “WUFOO FORM SCRIPT GOES HERE” and save the Blogger template.

I know the steps may look hard for the beginners. If you have any doubts in the instructions, drop your comments below.

Also Try This: Feedback Widget ForBlogger

Simple Feedback Form Using jQuery And CSS For Blogger

Related Post

0 comments:

Post a Comment