Sunday, January 24, 2010

Creating Contact forms with Kontactr (plus comparison with Google Docs)

Rather than publishing your email address which may attract robotic email harvesters and spam, it is wise either to display a graphic of your email address or even better, a contact form (which I have done at Contact form for Blogger Tips and Tricks which don't reveal your email address. This post will discuss the pros and cons of using either plus how to use Kontactr for your contact form. I think I will leave a post about how to use Google Apps for contact forms till later since I have opted for Kontactr for contact form.

Kontactr for contact form

It is very easy to create a contact form with Kontactr. All you need to do is to sign up for an account, using the email address which you wish to receive emails sent from the contact form. On successful registration, an email will be sent to that email address with an activation link which you must click to activate your account. If after some time you still haven't receive the activation email, click RESEND and it will be sent to you again.

Once your account is activated and you successfully signed in, there will be a total of eight choices out of which 3 will send your respondent to Kontactr's website and the other 5, your respondent will not leave your website. I have put demonstration contact forms, links and buttons over at my test blog with the eight possibilities in the exact order as they occur over at Kontactr

The very first one is uses AJAX Embed Widget and is highly recommended.

Kontactr Ajax Embed Code for contact form

You can also customize the color to blend with your website's colors. All you need to do is to copy and paste the script into the post editor and publish the post and if you want the contact form in a post or alternatively, into a HTML/Javascript gadget (page element) if you want it in your footer, sidebar or whatever, but the place where you embed it must be wide enough to contain the contact form. However, the good thing is it will not send your respondent to Kontactr website, but will remain in your website.

The last one at the bottom of the page is the HTML embed widget which I do not recommend

Kontactr HTML embed code for contact form

as you will have to edit the HTML to get rid of all the line breaks, otherwise you will get lots of blank spaces above your contact form.

Somewhere in the middle of the page will be the codes for the "button contact form" which is what you should choose if you don't want a large contact form and a little non space invading button that fits nicely into a little space in your sidebar. Don't take those three codes on the left. Pick any of those 3 "KPU form" with KPU a short for Kontactr Pop Up. If you install these either somewhere in a post or in the sidebar or anywhere, clicking on the button will cause the contact form to pop up with the respondent staying on your site.

Pros and cons of using Google Docs and Kontactr for contact forms

I have used Kontactr before for contact forms for other blogs except for this blog until recently. In fact, I made a small donation to Kontactr in gratitude.

Kontactr gives a "true contact form" in the sense that when someone enters his true email address into the Kontactr contact form, what you receive is actually an email from that email address and not a message from Kontactr that someone has sent you a message and you have to go to Kontactr's website to read the message. With that email message, if you so choose, you can respond direct to that email address. In addition, Kontactr provides a captcha (word verification) to help you reduce spam from the contact form.

What I don't like is that you will be dependent on Kontactr, a third party not as big or as strong as the mighty cash cow Google. If Kontactr services or website goes offline, there goes your contact form. Not many people provide services and products for charity, and if a provider is not making any money or worst, losing money, it is very likely to cease to provide support. This is exactly what happened in the case of a Philippine online favicon generator and host.

Google Apps: While Google Docs is still a third party provider, I have confidence in Google Apps because it is backed by that cash cow Google and so unlikely to go bust anytime. Another pro if you consider it a plus is that all the fields created in that contact form when someone fill in and submit will go to an online Google Spreadsheet which tabulates them neatly into searchable rows and columns. That can be mighty handy for you to organize all the data collected.

Unfortunately, using Google Docs don't give you a "true" contact form because it only provide you with the possibility that when someone fill in that contact form, an email message is sent to you plus a link to read the fields (such as name, email address, message) that you included in the contact form at the Google Spreadsheet that is created when you create that contact form.

Saturday, January 23, 2010

Contact Form

Related post:
Create static pages with Blogge in Draft
How to create simple text horizontal navigation bar
Creating contact form with Kontactr plus comparison with Google Docs
Contact form
Kontactr for your contact form to avoid email harvesting
email COntact form for Blogger

Blogger Tips and Tricks Privacy Policy

Privacy Policy for Blogger Tips and Tricks:

If you require any more information or have any questions about our privacy policy, please feel free to contact us by email at .

At Blogger Tips and Tricks, the privacy of our visitors is of extreme importance to us. This privacy policy document outlines the types of personal information is received and collected by Blogger Tips and Tricks and how it is used.

Log Files (Visitor counter)
Like many other Web sites, Blogger Tips and Tricks makes use of log files. The information inside the log files includes internet protocol ( IP ) addresses, type of browser, Internet Service Provider ( ISP ), date/time stamp, referring/exit pages, and number of clicks to analyze trends, administer the site, track user’s movement around the site, and gather demographic information. IP addresses, and other such information are not linked to any information that is personally identifiable.

Cookies and Web Beacons
Blogger Tips and Tricks does not use cookies.

DoubleClick DART Cookie
.:: Google, as a third party vendor, uses cookies to serve ads on
.:: Google's use of the DART cookie enables it to serve ads to users based on their visit to and other sites on the Internet.
.:: Users may opt out of the use of the DART cookie by visiting the Google ad and content network privacy policy at the following URL -

Some of our advertising partners may use cookies and web beacons on our site. Our advertising partners include ....
Google Adsense

These third-party ad servers or ad networks use technology to the advertisements and links that appear on send directly to your browsers. They automatically receive your IP address when this occurs. Other technologies ( such as cookies, JavaScript, or Web Beacons ) may also be used by the third-party ad networks to measure the effectiveness of their advertisements and / or to personalize the advertising content that you see. has no access to or control over these cookies that are used by third-party advertisers.

You should consult the respective privacy policies of these third-party ad servers for more detailed information on their practices as well as for instructions about how to opt-out of certain practices.'s privacy policy does not apply to, and we cannot control the activities of, such other advertisers or web sites.

If you wish to disable cookies, you may do so through your individual browser options. More detailed information about cookie management with specific web browsers can be found at the browsers' respective websites.

Saturday, January 16, 2010

Simple adjustable way to hide Navbar

An email from a blogger regarding his problem with hiding the navbar caused me to revisit the hiding the navbar issue plus recheck the Blogger TOS (Terms of Service) plus discovered a very simple way to hide the navbar which I tested at A-Z Products and adapted from Disable/hide navbar.

In order to hide the Blogger navbar, all you have to do is to sign into Blogger dashboard, click LAYOUT then EDIT HTML to open the template editor. Look for the body section in the stylesheet which in the standard Blogger Minima template is as follows:

font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;

Now all you need to do is to copy and paste this small bit of CSS

position: relative;
top: -40px;

and paste it, say, at the bottom of the above script just before the last } like this:

font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
position: relative;
top: -40;


Depending on your template, you can play with the variable -40 until the extreme top of your blog header sits right at the top of the browser window or at any position according to your desire. To illustrate, see the screen shots below showing the original, the appearance with the variable as -50, then -40:

original appearance navbar with Minima template
Original appearance with standard Blogger Minima template with Blogger Navbar plus space visible

navbar plus part of Header hidden
Blogger Navbar plus part of Header hidden

Blogger Navbar hidden and no space above blog Header

Update: A commentator commented that the comments of J and Carol helped him, I think, with the new Blogger Template Designer, so I figured I will add their comments into the post proper:

For those using the new Template Designer, go to Design - Template Designer - Advanced - Add CSS.
Paste this code:

div.navbar {
position: relative;
top: -50px;

Curse Blogger for making me spend two days on this!!!!

Carol Schultz said...
I tried yours and the only modification I needed to make was the last line from top:-50px; to top:-40x;
Maybe it's different depending on the template? Thanks for your help

Related posts:
Another way of hiding the navbar (February 2007)
How to hide Navbar for New Blogger (May 2007)
How to hide New Blogger Navbar (October 2008)

Thursday, January 14, 2010

Blogging tip - search definition (general)

I plan this to be a series of tips and tricks for blogging in general, not only related to platform, but applicable for any blogging software including Wordpress, Live Journal, Jomlah, etc.

I will start off by one simple little search engine trick I often use. Frequently, I like to define some word before writing about something related to that word. What I will do is just to type the word "define" before the word in a search engine.

For example, I want to publish a post about diabetes. Searching for [define diabetes]. Further, you can use different search engines depending on what kind of results you want.

If you use, the very first result will usually be the Web definition:

Web definitions for diabetes
a polygenic disease characterized by abnormally high glucose levels in the blood; any of several metabolic disorders marked by excessive urination ... - Definition in context

If you use other search engines, the first result will not be as consistent. For example, using, first result was from

American Diabetes Association Home Page - Aerican Diabetes ...
The American Diabetes Association is leading the fight against the deadly consequences of diabetes and fighting for those affected by diabetes. Cached page

but the first result for asthma was from

Asthma UK - Homepage
Asthma UK is the charity dedicated to improving the health and well-being of the 5.4 million people in the UK whose lives are affected by asthma. Cached page

Friday, January 01, 2010

Cannot add gadgets with template designer? - solution

A blogger who was unable to add gadgets when in design (clicking on "add gadgets" takes me the blogger back to my dashboard page). Also, if he try from layouts, thru new template designer, all options are deactivated.

The blogger solved his problem quite simply in the end:
(1) adopted new template, and
(2), changed to mozilla firefox browser... "add gadgets" got enabled again...

Well if you have a similar problem, perhaps his experience can help you solve the problem

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics