Having a page for your site visitors to contact you is VERY crucial.
If you don't have implemented already, you might have missed tons of opportunities to help your blog visitors.
But, don't worry. Today you are going to learn how to add Blogger contact form to a page.
You know the importance of the contact form in various situations, right?
It has become an indispensable widget that every website and blog must have. The Blogger contact form widget has some features such as working efficiently than most other third-party contact forms (send the message to the email account of blog owner immediately), simple to work (no word confirmation) and littleness (can be used in whether fixed or fluid Blogger theme), etc.
A few weeks before, one of my friends on Facebook asked me what can I use Blogger contact form widget on a post page or stand-alone page (static page).
So, this post is for you who intend to add a contact form on separate pages (add the contact form to blogger page or posts). Let’s start embedding the official contact form widget into a stand-alone page in Blogger.
Why Pitiya Contact Plugin for Blogger is Better For You
Over 50 bloggers have asked me why they should install Pitiya Contact Plugin for blogger. If you have any doubt, here're a few reasons why you should use this plugin.
Do you know?
If used correctly, you can make money with Pitiya Contact Plugin for Blogger.
Install Pitiya Contact Plugin for Blogger
It takes only a few seconds to install Pitiya Contact plugin on your BlogSpot blog. Please follow the instructions below respectively.
- 1Sign in to your Blogger account and select the blog which you want to install Blogger contact widget.
- 2Now navigate to "Theme" >> Edit HTML.
- 3Next, find below code on your Blogger theme. Use keyboard shortcut CTRL + F (PC), Command + F (Mac) to find this code on your blog.
- 4Paste below code just above of </body> tag only once.
See how I added above code to my Blogger template.
- 5Now you're almost done. Just one step! Search for widget section locations on your Blogger template. To find them, search the code below. Depending on your template, you'll find a few placements.
- 6Next copy the entire HTML code below.
- 7Paste it just below of any of "<b:section-contents" codes you find.
- 8Last step, save your changes! Click on that beautiful orange button. 🙂
You just installed Pitiya Contact plugin for Blogger!
It didn't take a lot of time. did it?
Now visit your blog and see a new cool Contact widget is shown your blog.
Click here to see it live in the demo blog.
Create Contact Us Page In Blogger
Now we’re going to add the contact form widget to a stand-alone page. Ex: Creating contact us page for your blog.
This is an optional step. However, if you're keen on adding Contact page to your blog, then, here's how to do it. 🙂
Follow steps below and make necessary customization in the aforementioned steps.
- 1Click on ‘Pages’ tab on the left-hand side.
- 2Now click on New page >> Blank page.
- 3Switch to HTML mode and click on ‘options’ tab on the right side. Then select the “Use <br> tag” option in the Line Breaks section like below.
- 4Now paste contact us form HTML code for Blogger on the empty "Edit HTML" field.
Note: Don’t overuse or add new HTML codes for Blogger contact form code. I have seen many bloggers get troubled by editing and adding new fields to the Contact form. You’ll not be able to receive values/inputs for newly added fields (ex: website field value). Also, by over changing the source code, your contact form will not work in static pages well.
- 5The most crucial step in this tutorial. It’s the save your template!
Customize Contact Plugin for Blogger
Now you've successfully added contact page to your blog. I recommend visit a page or two to see how it works. Please check out the demo at this blog to see how Pitiya Contact Plugin works.
In this section, I will explain how to customize Pitiya Contact Plugin for Blogger. Here's the code again.
- 1ShowSlidingWidget — This variable tells the plugin to whether it should be displayed or not. It uses numeric values to set conditions. Show = 1, Hide = 0.
- 2ThemeStyle — Currently there are 8 theme styles for Pitiya Contact Plugin for Blogger. It ranges from 1-8. So, for example, if you want to enable white-grey theme, just enter 8 theme code.
- 3HideInThesePages — You might want to hide contact form widget in specific pages. Enter the full web page URLs separated by commas.
Make sure each web page URL are surrounded by quotation marks.
You can add up to 7 web pages. Contact me if you want more spaces.
- 1tabs — Display tabs widget in sliding widget. Enter 0 or another numeric value if you don't want tabs to be shown up. Please note that by disabling tabs options, other features such as Live Chat won't work.
- 2SkypeIconColor — Color for Skype chat icon. Enter Hexadecimal, RGBA or name of color you want to specify. Here's a color picker you can use to get color values.
- 3SkypeID — Enter your Skype ID. Online chat conversations will be sent to the Skype account you specify here.
- 4TabMessageContent, TabEmailContent, TabSocialContent and TabChatContent — Enter content you want to display when a tab is clicked. You can add HTML content here and can be styled using CSS. Just make sure content are cross-device friendly.
Here's how I have added HTML content to tabs widget. Feel free to copy this code and customize as you want.
- 1TabOneTitle, TabOneTitle, TabOneTitle and TabOneTitle — Enter names you want to specify for buttons. Ex: Message, Start a Chat. Obviously, you need to ensure that each button name is relevant to the content each tab contains.
- 2MyContactPageURL — By default, Sliding contact form widget won't work in contact page. Make sure to specify the URL for your contact page to hide it.
FAQ – Frequently Asked Questions: Contact Us Form for Blogger
I have been asked a lot of questions about Blogger contact form, and so I thought it is good to list a few frequently asked questions about contact form Blogger. If you have any further problem regarding Blogspot contact form, please use the comment form below to share your questions and so I can answer them as fast as I can.
Can I add custom fields to Blogger contact form page ?
No, you can’t add custom fields such as phone number, mailing address and file upload methods to the contact form in blogger. BlogSpot uses unique codes known as data tags to transfer data. So you can’t handle those tags as you want.
How do I change the permalink of Blogger contact page?
If you have already added a contact form to a static page, you can’t change the Blogger contact page URL.
The best way to add a custom permalink such as myblog.blogspot.com/p/contact-me.html is that creating a new static page and install Blogger contact form HTML code. Before publishing the page, add a page title like contact me, contact us or contact to make it as the permalink. Ex: If you have added the name as contact me, your blog's contact me page address would be, yourblog.blogspot.com/p/contact-me.html or www.yourblog.com/p/contact-me.html.
Can I add Blogger contact form to a post page, instead of a stationary page?
Yes, of course. You can add the contact form to blogger post page. There are no differences, despite blog post pages are indexed quicker than static pages, list in Archives section and have a published date.
Why should I add a contact form to Blogger?
Adding a blog contact page to your website will give a professional look and also make it more accessible people to contact you directly on your site.
How do I include Blogger contact page in Google site links?
You can’t specify what pages should be listed on Google site links. But, you can demote existing site-links through Google search console.
The best way to include your blog contact page in Google site links is that adding a horizontal menu bar to Blogger. I suggest having a good premium Blogger theme installed on your BlogSpot blog. Generally, those have tons of options to control the menu bars.
What’s the SEO effect of Blogger contact form page? Does it decrease my search traffic?
There’s nothing SEO effect of using a contact page in Blogger. You increase your credibility, professionalism and get more people to treat your site as a BRAND.
If you want to increase website traffic for free, make sure you read my ultimate guide to Blogger SEO – The Best On-Page SEO Tips for BlogSpot Blogs. That tutorial includes valuable SEO tips and tricks you must follow if you want to stand out from other thousands of crappy BlogSpot blogs out there.
How can I make money with my Blogger contact form page?
Fascinating question, actually. You can make money with your Blogger blog by a few different ways. However, making money with your Blogger contact form page isn't as simple as monetizing your site through Google Adsense.
- 1Sell your own services. I recommend ThriveCart for online checkout pages.
- 2Sell your own products. Again, it isn't as simple as Google Adsense. You should customize your Blogger contact form page as according to the service or product you are going to sell.
Can I customize my Blogger contact form?
Over the years of this blog post, I have helped over 1,000's of BlogSpot bloggers to add blogger contact form to their blog static and post pages.
Do you have any question?
Please drop your comment below. I'd reply as soon as time allows me. 🙂
In meanwhile, check out these blog posts I have written before which I think you will be interested in reading.
- 1The Complete Guide to Making Money With Your BlogSpot Blog
- 2The Definitive Guide to BlogSpot SEO
- 3How to Find and Rank for Low Competitive Keywords
- 4How to find organic keyword rankings for any webpage in Google
- 5Search Engine Submission Tutorial for Blogger
- 6Custom Domain Name For Blogger – Become a ProBlogger
- 7How to add Facebook Comments Box to Blogger with Notifications Feature
- 8Browse More Articles related to BlogSpot
Wow... It's somewhat of a challenge to add contact form widget to your blog. Isn't it?
Would you find this article helpful? Then, why not share it with your friends? 🙂