Simple Feedback Form Using jQuery And CSS For Blogger ~ mascimot.com

Do you want to share?

Do you like this story?

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 from Tutorialzine, we made some modification, changed the form method and made it work smoothly for blogger. So lets get started.

View Live Demo

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

Step 2: Now search for ]]></b:skin> and paste the below code before ]]></b:skin>

Step 3: Search for <div id='main-wrapper'>

and place the below before <div id='main-wrapper'>

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>

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 selectparagraph 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 selectNew 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/AVvXsEi68gQ-1Qtlsp3Fgn8_QKmlY7erWJOdgEfyJKM2jrDYPTKrHopRcvK9hZuJkHLZgBWWjM1D0V11tKnwCHHAaJk1iwz1e1Qdo8t-U1Gejq5Ra9xkbnGL0nEZiXl62oi6TLnnb-LsvcIAovFD/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, may be I can try to make a video demo if I get some time. If you have any doubts in the instructions, drop your comments below.

Totally awesome Gold Pendant Necklaces available at LusterForever jewelers stores.