Add Stylish Feedback-Contact Form in Your Blogger Blog | Tutorial

Here is my new tutorial for adding stylish jquery and css feedback form/contact form in your blogger blog, it looks so cute and fully customized. Thanks totutorialzine who made this form and  bloggermint who re-created this tutorial specially for blogger users, and i just re-blog it here with some more details to help newbies. Its easy as 123 and you can add this gadget in your blog by following few steps.

Demo

Click here for Live DEMO

Here we go...

Part 1 - Wufoo Form Builder

Before going through the tutorial, i want to inform you that this feedback form integrates WUFOO Form Builder. So in order to use this form you must sign in for free account. Simply go to the Wufoo website and sign-up a free account.

After you successfuly created new account you will be taken to Form Creator Dashboard, Simply select 'Paragraph Text' to insert it into the form.

Once you inserted Paragraph Text, Choose its Field size to 'small' and Click on Save button available at right side below form preview and again select 'I'm finished! Take me back to the form manager'.

Now you will be on Form Manager. Select 'New Theme' from Default Theme dropdown menu and you have to do certain things there:

a) Go to Backgrounds > Highlight and change the color to transparent.
b) Go to Buttons and select the button type as link and enter this link there https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Sl3FN3iccSQ6u38Ugc3eS8N4aDgNLGjx5Opxn8bQP3wli7wl5CMQnTjVtk_zMZT2Amm0Xr89JG0uFoAxfso33bhju_Hfnkgs6_ZfkVv_5qIhocokKPz7AWmbSQR3jNVD5wi_gqpaiuPY/s1600/submit.png

c) Go to Advanced and paste this URL on the text box. (I will recommend you to host this file on your dropbox free account.
http://dl.dropbox.com/u/58752515/css/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 code there and save it in your text file, we will need this code later in the tutorial.

Part 2 - HTML/CSS/Javascript

Step 1: Open your Blogger Dashboard > Template > Edit HTML > Tick 'Expand Widget Templates,.

Don't forget to make a back-up of your template first! (Recommended).

Step 2: Search for ]]></b:skin> in your template (Hint: Press CTRL+F)
and paste this code immediately before ]]></b:skin>.

/*-------------------------------------------------
               Blogger Feedback Form
          http://premium-stuff-guru.blogspot.com
----------------------------------------------------*/
#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/AVvXsEhWbasV483RfjmRgFsrr1CU5utUhbnpx0ymTjkcImCfE4mIwqQPH4VmIZFD_5zdxQn4LqRKITj5P1TcuiwH5hpfdY3KdjjtyAxHP63174FEMZ_DNbV3FQfoUiX7C4eoIRopBi8ZfptxGY2c/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/AVvXsEjv6rXT8NvMQTgOdi3e-XORY8AM4iyxnqHjiZ7XJxHF0M4-NnC82UwMqfZ_9oZ9XFtMl3pcEb5MaFPV2mU6bPQ63o6NiMYkqrtbDfQ6Udo83DpbrbHtItv1T8cTJVmtn1PyQOrzd27_-KoU/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/AVvXsEgzhrzwc-Lai_IzcFjzSCDxtkNpdkkND5synthkv-2M_bmgPIqkHrzLu24ghf7qO-M0KTjB2SlN4iXOHkrudmbHg8E3cBzln1zV5XcR0joAyvEOwQzsj99Fi3eAwRpW7gvEfqLlgPkB_6jA/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 search for </body> in your template and paste this code immediately before </body>.

<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>

Please replace text 'WUFOO FORM SCRIPT GOES HERE' from above code on line 12 with your Wufoo form embed code.

Step 4: Paste this code immediately before </head> tag of your template

<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'/>

Please insert your jquery source in above first line.

That's it! Save your template and have a look at your blog.

Important!
You need to add jquery library once in your template, and it will work for all your gadgets, so if you already have installed jquery in your template, than just remove first line from above code.

Have to say?

I will always love to hear your comments, so don't forget to leave your comments.

Want to contribute?

Simply contact me and send your tutorial, i will publish it here.