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 from Tutorialzine, we made some modification, changed the form method and made it work smoothly for blogger. So lets get started.Step 2: Now search 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/AVvXsEjcSjW_wSFL0d5QMz08SFrph5LSl_F581NldlOWSVB2j6Sb9uwqi-zyv5Tn3EgG6-XbUve9nQ0gszpIFvJPUoIenwVTHhPxU-k99o0NKUHamgAJTVnGx3wbTQQmt4e1-3JQJesbbpxl9yXE/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/AVvXsEj7rOc-d1yMBnDSAPZIBMhGQoKeQ2d1FZlV_e_rharQIjE4ffViFR6lo7KDnebU2Ewiw9PblkWhREg4wCljPd9AiKjrdBtjMNbpEN_PiLiDYaibPHPopl1W7gcUrbMwkfsPhLiU2P779hW1/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/AVvXsEiMZ_CvGZUgg7aNaD38XbFJqfVAvbc-htPa76jM6QZHt_VFSBmZz7l7kj9AxHYZuCFVy2foBvd9CLXIJo_qBEygxb2K34HS23S_ij7ANBWUMlyg65_c7gKZ17TQFDGccqcTPQuSRdRIz7Cs/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: Search for
<div id='main-wrapper'> and place the below before <div id='main-wrapper'> <div id='feedback'> <!-- Five color spans, floated to the left of each other --> <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'> <!-- The arrow span is floated to the right --> <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'/> <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
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/AVvXsEjIXS2a58yfpdj9lJ1k_4HI7CgIv9WIugVYgK_8Srk5Cy2jq-_0GSQ2QB-9J_QY_y1ouQqeS_BN0j_b9gP18F7EIQ_ep8OaeBuSBu_4JG5u6XIuwpr7Gk_RsWHKpQkzayFwFD2a5bAD6Utx/s1600/submit.png
