Add Blogger Pop-Up Contact Form With Professional Look

Pop-up minimal look contact form

Customising blogger has never made easy. Adding simple and minimal designed forms makes it easy for your web visitors and clients to contact you straight from your blog. Normally "professionally looking" free contact form services, would have the providers credits below. In addition, most of the services would have you to embed the forms in a newly/existing built page or post.

In this tutorial, we will guide you in installing a simple yet professional looking contact form, with out embedding on your blog pages nor your blog posts. With the help form  Kontactr.Com, we will create a pop-up, easy to install simple professional look contact form  The initial design for the contact form has a very sharp and minimal look, with light-box style pop-up features, using automated generated JavaScript codes provided by Kontactr.Com .

Professional Looking Contact Form by Kontactr.Com

First you have to register and create your account at  Kontactr.Com . Here we want to generate the necessary JavaScript codes for your soon to be contact form.

> Go to  Kontactr.Com web site > Click Register > Fill out the Forms > Add you're e-mail address (This is where the form will re-direct the messages to.)

Explanation: Here we want to grab the JavaScript code based on your given registered account details (ie e-mail) which will direct all your forms requests to your designated e-mail address. The registration process is quite simple and straight forward.

> After filing the Forms  > Go to Home (if you're not redirected) > And view the automated javascript codes by Kontactr.Com.

There are a few other options here for your contact form customisation and we will not got that extent. Here we only need the generated JavaScript code for your blogger contact form link or buttons

Adding Link/Button Style for Pop-Up Contact Form 

If your opt for a link-style or pre-designed button style click and pop-up contact form, you will do this:-

> Open a new window > go to Blogger.Com > "Your blog" > Dashboard > Layout > add a New Wighet - Preferably near your side bar area  > HTML widget.

> Now at Kontactr.Com Home > copy the JavaScript code under the K-Box sections with the buttons styles on the left. You have 2 buttons and 1 link styles as an option for your pop-up contact form link. The sample code would look like below:-

<script type="text/javascript" id="123456".....

> Now go back to your blogger page with the HTML widget window and paste the above code > Click Save > and Click Save again at the top right screen.

Now Preview > you will see the generated button for your pop-up form depending on your HTML widget location > Test it and your done!

Adding Pop-Up Contact Form to your Customised Navigations

If you opt for adding the contact form links as part of your customised top or side navigation bar, you can do this:-

Depending on where your customised navigation code is (widgets or built in template) > Find the codes similar to the below:-

<ul>
<li><a href="http://yourblog.blogspot.com/p/home.html">Home</a></li>
<li><a href="http://yourblog.blogspot.com/p/about-me.html">About Me</a></li>
<li><a href="http://yourblog.blogspot.com/p/personal.html">Personal</a></li>
</ul>

To add in your new navigation links for your pop-up contact form > Back at Kontactr.Com Home > copy the JavaScript code using the links method - label 7.

Paste the code at your navigation unordered list so it would look like below:-

<ul>
<li><a href="http://yourblog.blogspot.com/p/home.html">Home</a></li>
<li><a href="http://yourblog.blogspot.com/p/about-me.html">About Me</a></li>
<li><a href="http://yourblog.blogspot.com/p/personal.html">Personal</a></li>
<li><script type='text/javascript'> id=123456; t=1; ctxt=&quot;Contact Us&quot;; </script>
<script src='http://kontactr.com/kpu/kontactr.js' type='text/javascript'/></li>
</ul>

The numbers in blue is your contact form ID with Kontactr.Com. You can customise the navigation link by changing the Contact Us section from the above code. Save and you're done!

A sample pop-up contact form can be visualised at our blog "About Us" top navigation link.

Some people, especially web developers are not very fond of additionl JavaScript calls for their blog or website. Web developers will tend to eliminate as much of external JavaScript calls at a given site for maximum performance.

We tested the speed of our blog with Yslow browser built page speed test and it only indicate a difference of -1 score after installing the contact form JavaScript. In our opinion, it does not hurt in reducing a bit of speed for your site, as long s it looks professional and functions well with easy to use interface for your future web visitors and clients.

Credits goes to Kontactr.Com for providing this free service for blog and website owners. Thanks a million.