How to Add Blogger Contact Form to Specific Pages

January 21, 2021


Last Modified: January 21, 2021 2:06 PM


​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? 


Add Blogger contact form to pages - Pin this image

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.

  • Pitiya Contact Plugin is used by 100's of other bloggers. (See number of comments this post have! πŸ™‚ )
  • Customization options β€”You can easily customize content, colors etc., even you don't know very much about HTML or CSS. If you're an advanced user, you can edit CSS to customize the widget further.
  • 8 Beautiful Theme Styles for you to select.
  • check
    Two ways to display contact form β€” Sliding widget and standalone contact page. Yes, You can use both at once!
  • check
    Receive messages directly to your Google email account instantly. 
  • check
    99.99% uptime guarantee! Source code is hosted on Amazon web servers. You can rest assured that your contact form widget will work 24*7*365.
  • check
    Fully independent from JQuery and No single image is used! β€” Being a blogger myself since 2012, I know how important the website loading speed is. That's why I didn't use JQuery and ANY single image to create this plugin. I use Cloudfront to load the script and so you can assure it will load blast fast in anywhere your reader is accessing your site.
  • check
    (New) Tabs widget! β€” Now you can show a beautiful tabs widget inside your contact form widget. And add custom content too. ex: social follow us widget, email sign up widgets and more! It's easier to customize content.
  • check
    (New) Skype Chat Widget for Blogger β€” Do you want a faster way to help your customers? and want to close more sales? I just integrated Skype Live Chat widget, so you can chat with your readers in real-time.
  • check
    (New) Hide Sliding widget in special pages β€” Hide Contact form widget in special pages you'd like. 
  • check
    Lifetime FREE updates β€” I regularly update source code to increase performance and add features to make the plugin more powerful and give you more options. You will get updates for free! Just make sure to sign up for updates notifications to receive alerts at the middle of this page.
  • check
    100% free to install β€” Pitiya Contact Plugin can be installed at free of charge at the moment. Once I rolled out necessary updates, new paid plan will be introduced. 
  • check
    Free support! β€” Pitiya Contact Plugin is working seamlessly on every platform and website we tested out. If you need any help, we are here to help!

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.


Edit Theme HTML β€”

  • 3
    Next, find below code on your Blogger theme. Use keyboard shortcut CTRL + F (PC), Command + F (Mac) to find this code on your blog.
  • 4
    Paste below code just above of </body> tag only once.
var ShowSlidingWidget = 1; // Show = 1, Hide = 0
var ThemeStyle = 4; // Enter Theme Style code. More codes here:
var HideInThesePages = ["", "",""];
var tabs = 1;
var SkypeIconColor = "#3ebf07"; // ex: purple, #3ebf07
var SkypeID = "YOUR_SKYPE_ID";
var TabMessageContent = "Please fill out the form below to send your message.";
var TabEmailContent = "Please send us message at";
var TabSocialContent = "Please DM your message us @ExampleTwitterHandle";
var TabChatContent = "Please click the icon below to start a live chat.";
var TabOneTitle = "Message";
var TabTwoTitle = "Email";
var TabThreeTitle = "Social";
var TabFourTitle = "Chat";
var MyContactPageURL = ""; // Your Contact page full URL
<script src=''/>

See how I added above code to my Blogger template.


Find Ending Body Tag β€” (Click on image to enlarge)

  • 5
    Now 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.

Find Widget Sections in Blogger β€” (Click on image to enlarge)

  • 6
    Next copy the entire HTML code below.
<b:widget id='ContactForm1' locked='false' mobile='yes' title='Contact Form' type='ContactForm' version='1'>
<b:includable id='main'>
<div id='pitiyabcfslider' style='position:fixed; bottom:55% !important; right:-343px;z-index:999;'>
<div id='pitiyasidebar' onclick='open_panel()'><span id='button-open'>Contact Us</span></div>
<div id='pitiyabcfheader'>
<h2 id='boxtitle'>Contact Us</h2>
<div id='descriptionbox'>Please fill out the form below to contact us.</div>
<hr id='bcfhr'/>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<span id='labelbcf'><data:contactFormNameMsg/></span>
<input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
<span id='labelbcf'><data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span></span>
<input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
<span id='labelbcf'><data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span></span>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
<div id='bcf'/>
  • 7
    Paste it just below of any of "<b:section-contents" codes you find.

Paste Contact form HTML to Blogger theme β€” (Click on image to enlarge)

  • 8
    Last step, save your changes! Click on that beautiful orange button. πŸ™‚

Save your Blogger theme after making changes

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.

[convertful id="7849"]

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.

  • 1
    Click on β€˜Pages’ tab on the left-hand side.
  • 2
    Now click on New page >> Blank page.

Create a new page in Blogger

  • 3
    Switch 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.
  • 4
    Now paste contact us form HTML code for Blogger on the empty "Edit HTML" field.
[convertful id=”7904″]

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.

  • 5
    The 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.

var ShowSlidingWidget = 1; // Show = 1, Hide = 0
var ThemeStyle = 4; // Enter Theme Style code. More codes here:
var HideInThesePages = ["", "",""];
var tabs = 1;
var SkypeIconColor = "#3ebf07"; // ex: purple, #3ebf07
var SkypeID = "YOUR_SKYPE_ID";
var TabMessageContent = "Please fill out the form below to send your message.";
var TabEmailContent = "Please send us message at";
var TabSocialContent = "Please DM your message us @ExampleTwitterHandle";
var TabChatContent = "Please click the icon below to start a live chat.";
var TabOneTitle = "Message";
var TabTwoTitle = "Email";
var TabThreeTitle = "Social";
var TabFourTitle = "Chat";
var MyContactPageURL = ""; // Your Contact page full URL
<script src=''/>
  • 1
    ShowSlidingWidget β€” This variable tells the plugin to whether it should be displayed or not.  It uses numeric values to set conditions. Show = 1, Hide = 0.
  • 2
    ThemeStyle β€” 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.
  • 3
    HideInThesePages β€” You might want to hide contact form widget in specific pages. Enter the full web page URLs separated by commas. 
var HideInThesePages = ["https://example.blogspot.comcom/post1-hide.html", "https://example.blogspot.comcom/post2-hide.html","https://example.blogspot.comcom/post3-hide.html"];

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.

  • 1
    tabs β€” 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.
  • 2
    SkypeIconColor β€” 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.
  • 3
    SkypeID β€” Enter your Skype ID. Online chat conversations will be sent to the Skype account you specify here.
  • 4
    TabMessageContent, 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.

 var TabMessageContent = "<h3>Message</h3><br/>Please fill out the form below to send your message.";
var TabEmailContent = "<h3>Email</h3><p>Send your message to us directly through <a href=''></a></p>";
var TabSocialContent = "<h3>Social</h3> <p>We are on social media!</p><div> Send your message to us on <a href=''>Facebook Messenger</a> or on social networks below. <br/> </div><ul> <li><span id='slinks'><a href=''>Facebook</a></span></li><li><span id='slinks'><a href=''>Twitter</a></span></li><li><span id='slinks'><a href=''>LinkedIn</a></span></li><li><span id='slinks'><a href=''>Pinterest</a></span></li></ul>";
var TabChatContent = "<h3>Online Chat</h3> <p>Please click the Skype icon below to start a live chat. If we are not online, we'll respond ASAP. <br/><br/>We respond within few hours. :-)</p><p><i>P.S: Our working hours are 9:00am-5:00pm SLST Monday &#8212; Friday</i></p>";
  • 1
    TabOneTitle, 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.
  • 2
    MyContactPageURL β€” 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.
In Case if You Missed... Double check EVERYTHING is correct.

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 ?

How do I change the permalink of Blogger contact page?

Can I add Blogger contact form to a post page, instead of a stationary page?

Why should I add a contact form to Blogger?

How do I include Blogger contact page in Google site links?

What’s the SEO effect of Blogger contact form page? Does it decrease my search traffic?

How can I make money with my Blogger contact form page?

Can I customize my Blogger contact form?

Need Help…?

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.

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? πŸ™‚


About the author 

Chamal Rathnayaka

A blogger, Growth Hacker, and Internet Marketer since 2012. Chamal Rathnayaka is the founder of this very site and he's sharing his experience and knowledge on Internet marketing through Pitiya blog. Send him a message on


    • Wao. . Thanks bro. for saving me from a huge lots of stress.

      it worked fine on my blog . . you can check it out on your spare space.

      Thanks again for having a wonderful design on a Blogger blog

  • Anonymous says:

    Can you show how to change the size of the form and make it bigger? Cause it appears really small on my blog.


  • How can i get the mail on my email as someone get to contact me.?
    Show me where to place my email address so that as soon as someone comments I get the news on my gmail a/c

    Priority: urgent

    • @Konstantin Viglatzis,

      Already i have answered to his question. Look at below answer.

      It's so easy to check the messages that your readers sent. Just check the Gmail account that is associated with your current Blogger account. All messages sent via Blogger contact form will be sent to your Gmail.

      Check the Social tab of Gmail to find the Messages.

    • Hi, thanks for this post. It's exactly what I've been looking for.
      I've installed the comment form on my page without any problems.
      However, I sent a 'test' message from myself to myself and the message has not appeared in my gmail inbox – primary or social. I don't think it's working.
      Please help

    • Hi Jessica,

      If you followed above steps correctly and installed the contact form for blog, you'd receive the comment messages to your Gmail inbox.

      In your case, please use another email you have (ex: hotmail or any other) and comment on blog contact form.

      Then you should receive the messages within a few seconds. If you don't receive messages, reply me here. I will help you set up contact form on Blogger properly.

  • and yes how you change the Logo of administrator in Blogger?
    I mean I am admin and when i comment the I get one pencil shape icon in circle which denoted admin comment while In your it's text written as Admin

    How to do this?

    • Hello Modi Deep,First i'm happy,Becuase you're on PBT.

      You can check the contacted messages immediately by checking the Inbox (Gmail which is associated with your current blogger account).
      No,you don't need to change the Email address,because all messages are sent directly to your Email account.Other thing,you can not change the Email address to another one. Because Blogger contact form is a built-in widget not third party one.If you want to change the Email address you can use Google Docs for creating a contact form,

      For your second question,the answer is in your blog template.I mean as your template and its design comment form appearances could be vary.I will post some tutorials on customizing blogger comment box.

  • ok,
    then when you are going to upload your article on this?
    (Change Admin Logo in Comments)
    or can you please give me external link that refers to this article

  • my friend, my page won't work, the output is okay then when i clicked submit button nothing happens πŸ™ please help

  • thank you so much my friend, i did it this time…bwhaahah i made a shortcut that is why πŸ™‚

  • wordpress cms website design India says:

    Here lots of people have different queries about blogger contact and you answer it very well. I have also one query can you please tell me how to add plugins and smilies in our blogger. Can you please send me some coding related to this i am waiting for reply. regards you in advance.

  • Hasan Shamim says:

    Worked like charm……… Thanks your for your short but effective writing…

  • HI! Can someone help me understand where the "hide" code goes in the template HTML? I dont have the line of code "]]>" That he uses in the example.

  • Hi Author,

    Thanks for sharing this tutorial.

  • Hi Thanks for the code. Now the contact form in static page is working fine. Now I'm not getting where to check those inquiries which are received through the contact form.

    • Hi Krishna Kumar Shrestha, Happy to know that Blogger contact form is working on your blog's standalone pages well. Hope you'll see in my next blog post.

  • Hello Dear, I would like to thanks you to share like this post. Excellent website, posted nice article as well as informative post and helpful for other people who want's to gather knowledge about of website and search engine optimization. I really liked your website. Please keep writing posting to help others. You can also check my website which is all about Search Engine Optimization. seohear blog about SEO Tips, SEO Tools, On-page – Off-page optimization, Blogging Tips, Indexing, Directory Submission, Keyword Analysis, Social Bookmarking

  • @Fauzan Muntahal,

    Glad you're stopping here to comment. You might noticed that Blogger official contact form is loading fast rather than other third party contact forms. That's why we should use blogger contact form to our static pages,since they increases the contact subscriptions. I hope you all would stop at Pro Blog Tricks in our next posts.

  • Thank you for this post, it was very helpful. I wonder though if there is a way to add more fields (phone number, etc) to the contact form? I tried to just copy and past the code and add in new fields which worked on the blog it's self but the information in the new fields did not come through in the email.

    Thank you!

    • Hi Kylee, First thank you for asking such a question. You might know that most blogging platforms work on different data types. That's why we can not use Blogger template to a Tumblr blog. They use different codes. Blogger official contact form is another officially released widget by Blogger development team. By using Blogger contact form, you can receive the messages directly to your inbox. However if you added further fields for contact form, you would not receive those in-puts(data). This is because many bloggers use Blogger contact form only for contacting purposes. If you want to add more fields like you mentioned, you can use any third party contact form. In these days,for my blog i use jotform contact forms.

      Thank Kylee for commenting here.

  • Hey I followed ur tut but my contact form is not working, I put it in another html page like the tutorials..any help?

  • Price is definitely a purpose of cost.A solution drops price as it's value is improved (over-priced artwork perform excepted).Set against that charge are everything that you do as a affordable website design.Customers can allocate price to things such as pace,connection,style,friendliness,closeness and additional factors.

  • When I am searching how to add the content form widget on blogger I find out your blog. Your blog has the valuable and helpful material. This blog solves my problems, and I could be solve the problems all of the peoples who want to add the content page in their blog.

  • Hi I followed your steps for two of my websites and it worked fine but on the third even after following the trouble shooting the send button is not working. Any more suggestions?


  • i follow your steps..its working on normal blog like
    but not working with custom domain..i was tested on 2 custom domains but no result..i was tested on to blogger blogs, it was working fine…y contact form not working with custom domain? please help me

    • Contact form in static page on your blog is working fine. I tested it by adding a comment. Check your main box to see whether you receive an message. If you have any problem, please reply it here, i will help you.

      Thank you,

  • Hi, i just want to thank you for this great tips..

    That contact form works perfectly on my blog, thanks again…

    • Hi Suzette,

      I found your blog includes blogger contact form widget + blogger contact page. You might probably know that blogging platforms such as BlogSpot and Tumblr use specific data tags to collect data. By overusing data codes, you'd not be able to do what you supposed.

      So, you might hide Blogger contact form (read tutorial again, I have explained how to do it) and add the blog contact page HTML code to a static page.

      Do let me know your progress. I will help you add BlogSpot contact form on your blog.

      Thank you.

  • i am not able to receive messages! i am sending even from another id!…and yes i did checked the spam folder too!

    • Rahul, did you receive a success message when composing messages through Blogger contact form ? If you received, makes sure you don't have similar codes on the page (ex: data tags used for contact form).

      If you didn't see the success message, please revert and check again that you have followed above steps correctly. Right after making necessary changes and setting up contact form for blog, check again sending messages.

      Make sure you don't filter out emails coming from If you still have above problem, please reply here with your BlogSpot domain.

  • Hello guys!
    I have a problem with receiving emails using blogger contact form. I've already tried your troubleshooting advice (removing some code from HTML template). But this doesn't help, at list for me. Any advices?
    Looking forward to hearing from you.

    My address:

    Contact form located here, at the bottom of the page:

    • Hello Te Addict,

      I checked your Blogspot contact page and noticed that you didn't add blogger contact form HTML code to the static page. If you don't add contact form HTML code, you won't be able to see the contact form for Blogger live.

      So, please follow above tutorial again and add the HTML contact form code to a static page. Then check your blog to see whether it works perfectly. If not, please reply here, i will help you set up contact us form for Blogger and receive notifications.

    • Thanks for reply!

      Actually i add this form and hide it as you described above. In static page i also have the code you pointed above. I consider that my problem is happening due to custom DNS name…

    • Yeah, for now, contact form works correctly, but only in desktop version of the site. Mobile version doesn't work. It seems to be a glitch.

    • Glad it works correctly on desktop version. Is your Blogger template a responsive template? Our Blogger contact form to page demo works perfectly on mobile devices.

  • I added the contact widget and then hid it from the sidebar. Everything is live on the blog, but when I enter the information into the contact boxes and hit "send email" I get the error message, "Message could not be sent. Please try again later." I don't know what I did wrong. My blog address is I put the contact widget on the "Join our Support Team" page. Please help!

    • Hi Justin,

      I checked your blog and found that you have implemented another custom code for Blogger contact form. When i test sending a message, contact form informed that the message was sent successfully. Please check your email inbox and check that there is an email notification.

      You have added custom codes.If your existing method doesn't work, please follow above steps and try sending messages. If the problem still exists, please reply here, so i can help you set up Blogger contact me form on your website.

    • I saw the email and tried again to submit the form but got the same error message. I have been using Chrome so I tried on Firefox and IE. Those browsers also have the error. I got the code from a website to customize the blogger contact form but most of it is just style and a few display name changes. I removed the style and still get the error message. Thanks for your help.

    • I have since used your steps above with your code and still get the error with and without the CSS style code.

    • It works on my web browser (Google Chrome) without any error. Try removing cache and cookies. Today, i checked your Blogger contact us page again and found that you start using Google Docs. Google docs contact form has customization availability. Also you can receive messages to a custom email account.

      If you want add BlogSpot contact form to a page, please let me know. I will help you.

      Thank you.

    • I could never get the Blogger contact form to work so I found a way to use the Google Docs form. I could specify it to meet my needs better. Thanks for your help.

    • You can receive messages to your email address by changing a few settings in Google Docs. I'm sorry that Blogger contact form couldn't work properly on your blog. Thanks Justin for commenting here. Have a nice day!

  • Hi few weeks I install contact form and your html code in page and all works fine thank you. The problem now that today message are sent but no received in my email. I do not understand what happen and I'm very afraid to try to delete html code in my template code as you written. Can I help me?

    • Hi,

      If Blogger contact form worked well, now it should be. Did you change anything in your blog template or reinstall Blogger contact form widget ?

      So far, the demo page works so fine and i receive lots of comment notifications to my email. Yes, i will help you set up BlogSpot contact form page. Please provide me your website address.

    • Thank you so much my website is The only thing I change was this line in
      meta content='IE=IE7; IE=IE8; IE=IE9; IE=IE10; IE=edge; chrome=1' http-equiv='X-UA-Compatible'/>
      and contact form was working fine. Yesturday to resolve problem. I try to delete contact form and re install but no succes.

    • I examined your blog source code and found that Blogger contact form HTML code, featured image code and other codes are cluttered. Also i found that there are two similar set of codes for blogger contact form error message and blogger contact form success message. One is inside the form element and other is outside of the form element (<form> …. </form>)

      There are a few errors as i mentioned. You shouldn't add two similar codes and importantly shouldn't include extra elements within form element. I suggest you to create a new static page and follow above steps respectively, include BlogSpot contact form code and hide the Blogger contact widget.

      Let me know what's happening on your blog. I will happily help you add Blogger contact form to a page.

    • Follow steps in Troubleshooting : Blogger contact form Not working ! section. Delete existing Blogger contact form widget HTML code and try sending messages. You should receive email notifications. Let me know what happens.

    • (h) few hours after after follow the steps in troubleshooting I received my first email. I think it's necessary to wait before testing. All is in order now thank you very much You're very helpful

    • Yes Frederico, some changes take a few hours to work. Glad i could help you. When examining your website, I found that your blog isn't optimized for search engines. ex: No alternative texts, enough content etc. Read my previous SEO guides to optimize BlogSpot blog for search engines.

      Thanks Frederico for kind of words.

  • Yes I just read your guide it is very helpful. I'm always afraid to alterate template. I wanna to change meta code for description, I hope do not make mistakes… Thanks a lot for your help in my matter

    • You don't have to do any big thing to optimize your blog for search engines. Your blog is a photo-blog. So you could make use of Pinterest to drive more traffic and optimize images for search engines. Also by adding a few text around the images, you can increase blog traffic.

      Meta description doesn't do any special thing at web ranking. Yes, it can be used to get user's attention. But, as far as you follow basic SEO strategies, you can increase traffic to website steadily.

      Thanks Frederico for your comment!

  • Hello admin..I have implemented Contact us form on my page by following all the steps as mentioned in this article. I have also set #ContactForm1{ display: none ! important;} to hide existing blogger's contact us form and pasted your form code mentioned in step 4.. I also commented out the form section as you suggested in the trouble shooting section. But still i am unable to receive any mail. Submit button can't send email . Even validation is not running.

    • Hello Lalit,

      I checked your blog and found that there are few errors. Your blog have broken external CSS links which automatically request the file after a few seconds. And because you have implemented display ads (ex; Chitka), email validation might not work. First remove other irrelevant JavaScript files and make sure your blog template source code is clear and doesn't have any script which block posting information from your blog.

      Then follow above instructions again and install Blogger contact form widget, hide contact form and add contact form HTML code to a page whichever you like.

      If you have any problem, reply it here. I will help you set up Blogger contact form page on your blog.

    • Thanks Chamal for having a look at my website.But how can i find which external css links are causing requests again and again after few seconds? I am too worried about this issue..Does it cause any harm to my website performance or in any other way?

    • Yes, of course. auto-requesting CSS and especially JavaScript files could harm your website. Now Google can read JavaScript and CSS codes and find what they are all about. I found a few external broken links. One CSS file is hosted in Google drive. There are a few more.

      My suggestion is first backup template (better backing up blog) and reinstall Blogger template. Then start adding Blogger contact form to a page.

      Other thing is by adding lots more elements on your blog, your blog's SEO performance become weak; it doesn't help in anyway increasing website traffic. Just annoy readers and search engine bots. So, for the betterment of your blog, think twice before adding any external widget except from Blogger.

      I think this was helpful. Thanks Lalit for your reply. Is there anyway i can help you with ?

  • Hello! I have tried implementing you contact code and no messages seem to reach my inbox (primary,social, promotion and/or spam ). I have followed all of your steps; install contact code widget, hide contact code widget, added html static contact page, and followed your trouble shooting to remove embedded contact code. I would like it to work as it seem to for others. My contact page is
    Thank you πŸ™‚

  • Hi, I have tried the steps to solve contactform which is not working .. but it's still not working, even when i used another contactform (getform)

    • Hi Mona,

      Adding contact form to blogger is not difficult if you followed above instructions correctly. Glad you followed above steps and found the Blogspot contact form article is good. Look forward to hearing more from you Mona.

      Thanks for your appreciative comment!

    • You haven't installed the contact form blogger. Without adding contact form widget to your blog, this contact us form won't work properly. First install the contact form widget on Blogger (in Layout section of Blogger dashboard) and then follow above instructions respectively to learn how to add contact form in blogger.

      Please let me know the problem still exists. I will help you create a contact us form for your blog.

  • Anonymous says:

    How can I add a 'Subject' box after the 'Name' box for this contact form? Thank you

    • There is a specific way to approach getting contacts to subscribe to your email list. However, i recommend you to use Jotform for this.

    • Anonymous says:

      No sorry I want the contact form to look like this:


    • Currently, as i know, we can't add a subject box to Blogger contact form. Use Blogger contact form as a simple contact to your blog. Jotform has powerful website contact forms which have versatile features and tools.

  • Chamal, thank you for all the help you give to your readers! I added a contact form and successfully sent a test message from a hotmail adress. I'm the biggest HTML noob, so this already feels like an accomplishment. I haven't recieved anything yet, but I'll be patient and check my e-mail again tomorrow. Haven't tried the troubleshooting part yet, btw.

    • Adinda, thanks for kind of words. I always try to help out people to solve their problems. Make sure you installed contact form widget on Blogger, and sent a message to your email. It should be arrived within a few seconds. My contact forms work perfectly. I receive messages as soon as people hit the submit button. Revert back and check that you didn't miss any step above.

      Let me know if the problem still exists.

    • YES! A few hours later the test messages came in. I think it just had a slow start, because now I get messages immediately. Thank you for this tutorial, you are my hero πŸ˜€

    • Adinda, Glad messages come into your email immediately. Thanks for your comment. Let me know if you want to know anything else from me.

  • I got it to work- however, I had to enter the code in a different area than your post described. Entering it just above ]]></b:skin was only applying that action to the mobile version of my blog. I also had to enter it in the Widget section of the Template Style code, hope that makes sense. And thanks for the tutorial!

    • Did you enter Blogger contact form HTML code just above of ]]></b:skin>? I still wondering how HTML codes works in Head section. Never mind! Blogger contact form works perfectly on your blog, right? I am glad for that πŸ™‚ Let me know if you want to know anything from me. Thanks for comment!

    • Muhammad, Thanks for sharing your HTML tutorial. Check out your Blog design, especially mobile version. Some elements overlap.

  • hello when i went to edit HTML there was no contactform1 option in jump to widget. I have to contact box but same problem as mike the send button isn't working

    • Make sure you installed Blogger contact form widget and hide it from your blog. If the problem still exists follow the Blogger Contact form not working: troubleshooting step. If Blogger contact form not sending messages, please reply me here.

    • Hi Jean,

      Glad this post helped you add a contact from to your blog. If you want to know anything, please reply here. Thanks for your comment!

  • Excellent .. I could successfully add contact form to my blog … thank you very much …

    • Hi Mahesh,

      Glad you'd add Blogger contact form to Blogger blog. Let me know if you have anything to ask.

      Thanks for sharing your comment.

  • Hi,

    where do you link your email to in the code? To recieve the contents of the form. Thanks for your help

    • Hi,

      We use Blogger data tags to fetch certain data such as destination email. You don't need specific codes to specify your Blogger email address. Hope this helps. Let me know if you have anything to ask.

  • Hey, I tried doing that troubleshoot thing and from I am having problems with is that the contact form that you have us put in the pages, works but only when the actually Blogger widget code is present and when I go to delete it like you say the code you gave us for the pages stops working. I don't if its because my blog is different but I was wondering if you could help me with that.

    • You can hide Blogger contact form widget from your blog. So, anyone couldn't see the Blogger contact form widget. Let me know how it works out for you.

    • Shamsudeen, I think you were able to add contact form to Blogger page successfully. Let me know if i can help you any other way. Thanks for commenting here!

  • Hi Chamal,

    Thank you for the valuable post and detailed description! 3 days after inserting the form into my blog, I'm still not receiving any of the messages in my inbox, ie. it's not working…
    I've gone through every step described by you, also read through the comment thread. I've even tried to change the DNS setting on the custom domain, however this was too complicated, as I wasn't able to find where to change those settings on the domain site….
    The blog/website is
    Would greatly appreciate any help!
    Kind regards, Masha

    • Hi MK,

      Where has your domain name registered? Is it on Godaddy? Then, it's easy to change the DNS settings. First, make sure you have installed the HTML code correctly and try your blogger template in a few browsers.

      You can learn how to change the DNS settings as your domain register on reading threads on forums (ex: Google Blogger help forum), reading articles (recommend domain register blog entries) and also watching a YouTube video. Don't get it too complicated, else it will be frustrated. First check out whether your blogger template and blog domain doesn't change the process of Blogger contact form. Then everything will be fine.

      Let me know if the problem is still exits.


  • Anonymous says:

    In my blog "msg is not send from contact us for"…how it is resolved…

  • Hi Chamal,
    Can you tell me How can I change the email address in contact form?

    and also tell me is there possible to use yahoo or outlook email addresses in bloggers

    • There is only one way i know to change the email address in Blogger contact form. You can add another email add a admin or moderator. So comment notifications would be arrived to that email as soon as someone commented on your blog.

      I didn't try out adding a Yahoo or Outlook/Hotmail email address. But, try this trick and let me know how it works out for you.

    • Hi,

      Find this code in your Blogger contact form page.

      <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />

      and add this code between the code above.

      <div style="text-align:left;">

      Above code for send button


      Hope this code works. Let me know if you have anything to know from me…

    • Anonymous says:

      Thank you Chamal. But it didn't work.

    • Hope you added Blogger contact form successfully to your blog. Let me know if you have anything else to know from me. Thanks for commenting…!

  • This trick works great on my blog. I advice anybody who add the blogger contact form to first test it to see if the message is delivering.

    Thanks Chamal Priyadarshana

  • Hi Chamal! Thanx this interesting post. I was wondering if i can delete a field in this contact form eg the message field. All I wanna do is when posting a new post at the end of the post to embed a name and an email field so people interested in an offer could just send me their email addresses. When am deleting fields the form is not working ..i guess the reason are those google data tags….
    If so how could i embed in every post a simple email field for receiving emails possibly a secured one avoiding spams??
    thank you for your time

    • Hi stelios,

      Sorry for my late reply. Yes, you right. It's because Blogger data tags. But, there are a few very good email optin and contact form generators. I use Jotform for my personal and business affairs. It's free and it offers very good features and tools. You can create a custom form creating an account at and embed it on your blog (below each blog post, as you mentioned).

      Then create a notifier to receive messages direct to your email account you want. Make use of conditional tags, so you can organic messages/notifications efficiently.

      Hope this helped. Thanks for commenting.

  • Niecely explained. I will implement it on my blogger blog. It is working.

  • Hi Chamal, I've recently started a blog. I've added the XTML code to a static contact page. The problem I'm experiencing is that the send button is not working. I've tried sending a message with different email addresses but to no avail. PLEASE HELP!!!!

    • Hi Lynn,

      The problem is you didn't install the Blogger contact form widget. Else it won't work properly on your blog. As BlogSpot use special codes known as data tags to send and receive information, your template should have been added those tags. Else Blogger contact form send button will be not working. Let me know if you still can't receive messages.

  • Hey so I followed your instructions and my contact page isn't showing up on the home page. Could you assist me on where I went wrong and how to correct my mistakes?


    Thank You

    • Hi Nikki,

      There is more specific way to approach for adding Blogger contact form to homepage. This tutorial is about how to add Blogger contact form to blog static and post pages. AND i couldn't find the contact page of your blog. Let me know how i can help you to solve this issue.

      Thank you Nikki.

  • hey um I did what u said…contact form comes but it doesn't work…After I got the Cotact form I went and deleted the widget. However when I went to Templates the Contact Form id thing is not there neh…could u help me out I am new to this…pls help my blog is…

    • Hi Janathri,

      You must first install the Blogger contact form widget from the Layout section. Drop it anywhere on your blog layout section. Next you have to hide that contact form. You did it well. And next thing is adding the HTML code of Blogger contact form to a specific page such as standalone.

      Why did you delete the widget? It includes the data tags which will send the information people send through the contact form.

      Check your blog again and follow above steps. I am sure you will be able to install the contact form to your blog. Please let me know if you still have the problem.

  • Hello! Very clear instructions! I created a separate page an included the contact form. I do not receiveany messages though. I get the confirmation "the messages has been sent" but never receive the e-mail. Now I have removed all the code and the separate page and added the widget again just to see if it works before startingto change it. It still not work. Could it has something to do with my template? This is my blog

    Kind regards


    • Hello Sandra, first thing is i couldn't find the blog contact form page on your site, The second thing is you have already added the contact form widget to your blog. If you haven't created the contact form page, you can test the contact form widget yourself. If everything work fine, you can add a static page and install the HTML code. Then hide the contact form (if you want).

      Let me know if the problem still exists. I will help you set up the contact form widget.

  • Now it is working. A misspelles email in my blogger profile. I will now try your page! Sandra

    • Glad it works on your blog Sandra! Hope comment form on your page will also work fine. Let me know if you want any help from me.

  • Hi Chamal..

    Can we able to add & redirect a thanks.html page after completing a form field & click submit button on contact form ??

    Thanks in Advance..

    • Hi Karthik,

      As i mentioned above, Blogger uses data tags to collect data from users. It works dynamically. Therefore, Unfortunately, we couldn't redirect people after sending the message through Blogspot contact form.

      There are lots of services which provide online contact forms for Blogger. You can use one of them and customize the thank you page.

    • Hi Sanaullah,

      Sorry for the delay in my reply. I checked your blog today and couldn't the HTML of Blogger contact form.

      Did you follow the instructions as described?

  • Hi Chamal! this is really helpful! i have a problem though, i want to have two contact form widgets on my blog. One i will use on a static "Contact Form" page, and the other i want to keep at the sidebar as an "Ask Me" widget. i really like the interface of this contact form in that it doesn't redirect you to another page after submitting a message (plus i don't want to use a 3rd party form). so i'm wondering if that's possible at all? I couldn't add a second contact form because it's marked as "already added" in the widget selection page, so there's that. hehe any chances of this working out for me? XD thank you soooo much! []

    • Yes, you can use contact form on both two places. I didn't try it yet. But, you can don't hide the contact form widget and show two forms in your blog.

      If you have any problem, just reply to this comment.

      Thanks. πŸ™‚

  • Hello, thank you for the tutorial! However, I have pasted the code in and saved my template multiple times, but the widget is still showing up in my sidebar. I have even deleted and then re-installed the widget and then edited the template again, but it is STILL there! Any suggestions?

    The contact form on the static page works fine, but I just can't get rid of the one in the sidebar! I'm using the Ethereal design, if that makes any difference?

    • Hello Amy,

      Go to your Blogger template edit section and find ]]></b:skin> code in your template. Just above of it, just replace this simple CSS code. This code hide your blog contact form widget.

      display: none ! important;

      Let me know how this code works out for you.

    • Hiya, I have used this code already and the contact form widget is still showing up. Any suggestions?

    • Amy, you have placed the CSS script in another code. Here's the entire code:

      #header-inner img {
      margin: auto;
      display: none ! important;

      It should not be placed like that. Instead, fix the code by adding this one to your blog:

      #header-inner img {
      margin: auto;

      display: none !important;

      Now, everything should be working fine. Let me know how it works out for you. πŸ™‚

  • I'm having difficulties doing this. I installed the contact form on a static page, so i now have it. But when I tried to send a message to myself, it wont do anything at all.

    Because I installed the contact form by applying the code to a static page (not by downloading the contact form), how can I fix this since I don't have the widget code that you are stating I must have in order to remove the code that will fix this? I'm so confused… you can check my page out and see for yourself…

    • Sarah, I tested the contact form by sending a message. It showed that message has been sent successfully. Please check your mail inbox and let me know if my message has been received to you.

    • chamal priyadarshana says:

      Here are a few suggestions for you.

      Uninstall Blogger contact form widget and install it again. Remove CSS code to show the contact form widget. Check whether contact form widget works by sending a test message.

      Notify me if the problem still exists.

      Thank you.

    • I have done the instructions that you give. The problem still exists. Maybe you can check my blog and try to send message. The form is in sidebar and the button is did not working. Thanks for your fast replay πŸ˜€

    • chamal priyadarshana says:

      Yes, I too checked the contact widget. Message wasn't sent. I suggest you to change the template and test sending a message. Let me know how it works.

  • Clean and simple instructions.
    One question: the form is 100% width. I reduced the width to 80% successfully, but the form is aligned left. After a couple of tries, I was unable to align the whole form center of the page. Is it possible?
    Thank you very much for a great tutorial.

    • chamal priyadarshana says:

      Yes, It is possible. Add <div style="test-align:center;"> and </div> tags between the Blogger contact form HTML code.

      Let me know how it works out for you.

      Thanks Joao for your kind of works!

  • Hi! Thank you so much for this tutorial! I am having a problem, though. I did everything you said to do, but my contact box still isn’t working. Do you know what I’m did wrong, or how I can fix it? Thank you so much!

      • I got it! Thank you so much for testing it out; I really appreciate it, and thanks again for the tutorial.

  • Hi, It is a very useful post. I did everything but still no use. I get no email, and on my static page when I try to write a name and email to taste the form, they won’t show..I kept both, static and side contact forms…can you help me, please? here is the page

  • Hello. I just added this to my blog and it all went well except the send button. It just appears as text and not a button. What should I do?

  • Hi,

    This is nice post. I did everything as mentioned in steps. Only problem is “I actually don’t receive mails on my email address”. Please help in this.

  • at last, i found it here. realy great admin. it is very essential for build a contact us page.

  • Thankfulness to my father who shared with me on the topic of this webpage, this webpage is in fact remarkable.

  • Hi,

    I was looking for a quick set-up steps for contact form in Blogger platform, couldn’t find many articles on that. Thanks for the article! Helped me set-up mine in Blogger πŸ™‚

    Also. good thinking on adding FAQ section for the post.

  • Just what I was looking for and explained in an easy to understand way. Thank you so much!

  • Ok. I know this will be a dumb question, but…

    I added the HTML code on just one post where I want it to appear. I see the boxes and can type in them. But how does the “Send” button link to my email address? I don’t have any other Contact Me field anywhere on my blog and I can’t find any widget to add it in Blogger. So what makes the Send button actually send?

    • All responses will be sent to the email address that is associated with your blog. Check your Gmail inbox for contact messages from your blog.

    Thanks for your help,
    I have a problem,
    I added the contact form widget, when i entered the code to hide it, it is not working,
    and the contact form still existing.
    Any help pls?

  • hello friend i have a blog . and i have contact form but if i want a url that i place on my header and click on particular heading and open a contact form .is it possibile if yes give me solution on mail.
    and i really like your website and want how can i add subscription option as your page have. pls help me..

    • Yes, Amar you can add a link to contact page on Blogger. Go to template customization (HTML) and find the header section. There you can insert the link for contact form.

      I use Plugins to display subscription boxes.

    • Hi,

      It’s a good question. I will check out and update the post if there’s a way to add capcha to Blogger contact form.

  • Hi,i placed the code above to hide the contact form on my blog but how can i restore it back?
    I already deleted the code but it’s still not showing.kindly help.

    • If you deleted the code, contact form widget should be appear. Clear browser cache and see whether contact form doesn’t show up. If the problem still exists, please let us know.

  • Babu Rajan s says:

    I have added your code and it is working; but I want to collect the phone number and capcha in the contact form

    • Unfortunately, there isn’t a way to collect phone numbers through Blogger contact form directly. You can use a third party app for that.

  • Chamal, thanks for write and suggest awesome contact form for blogger. I hope, it’s the best!

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}


    Host our proven sales funnel and send traffic and link your payment processor!

    Enter to win Free UDIMI $50 Gift Card

    Plus, DFY Sales Funnel (value: $497) and eBooks on Internet marketing.

    I started Pitiya without any money. So, isn't $50 enough for you? Click the button below to learn more & join.

    __CONFIG_colors_palette__{"active_palette":0,"config":{"colors":{"1d30b":{"name":"Main Accent","parent":-1},"3d2c0":{"name":"Main Accent Low Opacity","parent":"1d30b","lock":{"saturation":1,"lightness":1}}},"gradients":[]},"palettes":[{"name":"Default Palette","value":{"colors":{"1d30b":{"val":"rgb(19, 114, 211)","hsl":{"h":210,"s":0.83,"l":0.45}},"3d2c0":{"val":"rgba(19, 114, 211, 0.2)","hsl_parent_dependency":{"h":210,"s":0.83,"l":0.45}}},"gradients":[]},"original":{"colors":{"1d30b":{"val":"rgb(19, 114, 211)","hsl":{"h":210,"s":0.83,"l":0.45}},"3d2c0":{"val":"rgba(19, 114, 211, 0.2)","hsl_parent_dependency":{"h":210,"s":0.83,"l":0.45}}},"gradients":[]}}]}__CONFIG_colors_palette__
    Enter to win $50 Gift card Now!