Create modal window popup contact form to blogger

Hello, Modal popup is become common and popular today by the using of this code we can customize some extra feature like log in, sign up, comment box, or contact form etc.
Now I'm going to share simple coding to create modal popup for your blog and website needs.
(We are hosting all jquery and css file to own server to make modal plugin more easier)

Blogger modal popup contact form

Add modal contact form to Blog:

  1. Sign in to your Blogger account and go to Layout
  2.  Now click on  "Add a Gadget" link and "More Gadgets"
  3. Now find "Contact form" page element and click on it
  4. Contact-Form-Page-element
  5.  If you want to change the title of the contact form widget, so alter it. Then click on "Save" button.

Demo

Hide contact form widget in Blogger

Hide official blogger contact form widget which showing in the sidebar.  One method is removing the contact form html source code. But when you want to show it again in the sidebar, you might be confused.  It is easy to add. But let's do some works. You can hide contact form gadget using CSS. Whenever you want to show contact form, you just need to remove the piece of CSS code from  the template.
Now go to  Edit Template and paste below code just above of ]]> code in the blogger template.

#ContactForm1
 {
 display: none ! important;
 }

Now you can easily add contact form modal plugging via adding Html/java script code by your blogger dashboard.
Copy paste below code (No need of changes).

Copy Code From Here !

<link rel="stylesheet" href="http://demo.tricksway.com/modal1/reveal.css" /> <!– Attach necessary scripts –>
 <script type="text/javascript" src="http://himstar.googlecode.com/files/jquery.reveal.js"></script>
 <a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade">
 <b>Contact Me</b>
 </a>
 <div id="myModal" class="reveal-modal">
 <div dir="ltr" style="text-align: left;" trbidi="on">
 <form name="contact-form">
 <div>
 Your Name : </div>
 <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30″ type="text" value="" />
 <div>
 Your Email: <em>(required)</em></div>
 <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30″ type="text" value="" />
 <div>
 Your Message: <em>(required)</em></div>
 <textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5″></textarea>
 <br/>
 <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send"/>
 <div style="max-width: 350px; text-align: center; width: 100%;">
 <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
 </div>
 <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
 </div>
 </div>
 </form>
 </div>
 <a class="close-reveal-modal">&#215;</a>
 </div>

Note: Above Ajax script in not necessary if you are running your blog on latest ajax. We hosted codes to our secure server so don't worry about it also there is no huge scripts so it's light weighted code.

Trouble Shoot: Your blog must run on following Ajax-

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

* Do you like this story? Then why not share it with your Friends *
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Himanshu is a young engineer living in India. Currently working at LiveCareer as a software engineer. He is an ethical hacker & blogger too, doing lots of crazy stuff... If you seem interesting, go through his portfolio: www.himstar.info : "Open Source. Millions of open minds can't be wrong!"

7 comments: On Create modal window popup contact form to blogger

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Site Footer

Sliding Sidebar

We are India’s largest Startup Community


We are team of ' Delhi Startups ' , most active startup community with strict spam policy.
We are making !deas happen..for future, business and jobs without charging anything, with connecting entrepreneurs.. It's a reason to trust on us.
Come and join or subscribe, we will defiantly give a reason to like us.

Our Facebook Page