222

How to Add Blogger Contact Form to Specific Pages Without Coding Skills

blogger contact form

After a few days back, we’re discussing on the Blogger contact form. In 2013, Blogger acquainted new gadgets for users. In initial days 2013, they released Wikipedia search box gadget and then official contact form for blogger. After updating the Blogger template editor, many people joined to Blogger and most of existing users were engaging in Blogging on daily basis.

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 speedily (send message to email account of blog owner immediately), simple to work (no word confirmation) and littleness (can be used in whether fixed or fluid templates) etc.

A few weeks before, one of my friends on Facebook asked me that can I use Blogger contact form widget in a post page or stand-alone page (static page). So, this post is for you who intend to add a contact form in separate pages (add contact form to blogger page or posts). Let’s start embedding the official contact form widget into a stand-alone page in Blogger.

Add contact form widget to Blog

You should add the contact form widget so that showing it on a specific page. If you have already installed it, please ignore these steps and who haven’t added official blogger “Contact Us” widget can follow instructions in below.

1: Sign into 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.

Contact Form Page gadget

Install BlogSpot contact form Widget

4: If you want to change the title of the contact form widget, so change it as you need. Then click on “Save” button.

Hide contact form widget in Blogger

The next thing to do is hiding the official blogger contact form widget by showing in the sidebar. So, we have some methods to do it.

One method is removing the contact form HTML code. Although one day when you want to show it again in the sidebar, you might be confused by asking “How do I  add the removed contact form widget code to my blog?”. It is easy to add. But you have to do some works.

So, I will show how 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 Template and click on the Edit HTML button.Then paste below code just above of ]]></b:skin> code in the blogger template.

#ContactForm1
{
display: none ! important;
}

Add Contact form widget on a Static Page

Now we’re going to add the contact form widget to a stand-alone page. Follow below steps and make necessary customization in the after-mentioned steps.

Step 1: Click on ‘Pages’ tab on the left-hand side.
Step 2: Now click on New page >> Blank page.

Static-Page

Step 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.

Line-Breaks

Step 4: Now paste below contact US form html code for Blogger on the empty Edit HTML field.

<form name=”contact-form”>
<p></p>
Your Name:<br />
<input class=”contact-form-name” id=”ContactForm1_contact-form-name” name=”name” size=”30″ value=”” type=”text” />
<p></p>
Your Email:
<span style=”font-weight: bolder;color:red;”>*</span><br />
<input class=”contact-form-email” id=”ContactForm1_contact-form-email” name=”email” size=”30″ value=”” type=”text” />
<p></p>
Your Message: <span style=”font-weight: bolder;color:red;”>*</span><br />
<textarea class=”contact-form-email-message”  id=”ContactForm1_contact-form-email-message” name=”email-message” cols=”25″ rows=”5″></textarea>
<p></p>
<input class=”contact-form-button contact-form-button-submit” id=”ContactForm1_contact-form-submit” value=”Send” type=”button” />
<p></p>
<div style=”text-align: center; max-width: 222px; width: 100%”>
<p class=”contact-form-error-message” id=”ContactForm1_contact-form-error-message”></p>
<p class=”contact-form-success-message” id=”ContactForm1_contact-form-success-message”></p>
</div>
</form>

Customization
  • Change highlighted words with relevant your own words.(i.e: for Your Email,Type your Email address)
  • Replace Required message instead of red color star symbols(*)( i.e: (required) )
  • Change Send with wished text to be shown on Submit button.

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 Contact form. You’ll not be able to receive values/inputs for your fields, also your contact form will not work in static pages well.

Step 5: The most important step in this tutorial. It’s the save your template!

Troubleshooting : Blogger contact form Not working !

Some bloggers like mike complained that blogger contact form not working on their blogs. In some occasions ‘Send’ button does not work correctly and so message would not be sent. I have resolved the problem with embedded-Contact form on blogger post pages and stand alone pages. Please check out our demo page so that understanding blogger contact form works perfectly yet in blogger 🙂

Now let’s look at how to troubleshoot this problem easily without confusing your mind.

  • Go to Template page and back up your template.
  • After doing that, click on ‘Edit HTML’ button and find contact form widget code.You can do this easily by clicking on ‘Jump to Widget’ drop down button and choosing on ContactForm1 id. Now you will see a block of HTML code similar to below.

<form name=’contact-form’>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class=’contact-form-name’ expr:id=’data:widget.instanceId + &quot;_contact-form-name&quot;’ name=’name’ size=’30’ type=’text’ value=”/>
<p/>
<data:contactFormEmailMsg/> <span style=’font-weight: bolder;’>*</span>
<br/>
<input class=’contact-form-email’ expr:id=’data:widget.instanceId + &quot;_contact-form-email&quot;’ name=’email’ size=’30’ type=’text’ value=”/>
<p/>
<data:contactFormMessageMsg/> <span style=’font-weight: bolder;’>*</span>
<br/>
<textarea class=’contact-form-email-message’ cols=’25’ expr:id=’data:widget.instanceId + &quot;_contact-form-email-message&quot;’ name=’email-message’ rows=’5’/>
<p/>
<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’/>
<p/>
<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>
</form>

  • Remove above code and Save your template.
  • You’re done!
 

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 question regarding Blogspot contact form, please use below comment form to share your questions and so I can answer them as fast as I can.

Question #1: Can I add custom fields to Blogger contact form page ?

Answer: 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 special codes known as data tags to transfer data. So you can’t handle those tags as you want.

Question #2: How do I change the permalink of Blogger contact page ?

Answer: If you have already added contact form to 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 added the name as contact me, your blog contact me page address would be, yourblog.blogspot.com/p/contact-me.html or www.yourblog.com/p/contact-me.html.

Question #3: Can I add Blogger contact form to a post page, instead of stationary page ?

Answer: Yes, of course. You can add contact form to blogger post page. There are no differences, despite blog post pages index fast, list in Archives section and have a published date.

Question #4: Why should I add a contact form to Blogger ?

Answer: Adding a blog contact page to your website will give a professional look and also make it easier people to contact you direct on your website.

Question #5: How do i include Blogger contact page in Google site links?

Answer: You can’t specify what pages should be listed on Google site links. But, you can demote existing site-links through Google webmaster tools account.

The best way to include your blog contact page in Google site links is that adding a horizontal menu bar to Blogger.

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

Answer: 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.

Related: How to find Competitors’ Organic keywords

Need Help… ?

I have discussed about Blogger contact form in my previous posts. This is another Blogger trick to add  a contact form widget in separate pages. If you encountered any problem, leave here a comment to know us. Also, if you want some helpful resources to increase your BlogSpot blog exposure and traffic, read below articles.

Would you like this tutorial? So make sure you spread your love from sharing this tutorial among your friends and relatives on social networks. They would be happy to learn how to add Blogger contact Form to specific pages just like YOU.

Chamal Rathnayaka
 

As the founder of Pitiya Internet Marketing blog, I make sure every content I share on this site is helpful and you get something out of them. To stay connected with me and receive latest blog posts, exclusive content, and offers, sign up for Pitiya newsletter.

Click Here to Leave a Comment Below 222 comments
Ohiren

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.

Reply
    Chamal Rathnayaka

    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.

    Reply
Ho Nguyen

Is there a way that we can add capcha to the form to prevent spam?

Reply
amar

hello friend i have a bloghttp://moneytricks999.blogspot.in/ . 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..

Reply
    Chamal Rathnayaka

    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.

    Reply
samir

Hi CHAMAL
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?
Thanks

Reply
Nancy A Jefferis

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?

Reply
Laurie

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

Reply
Anu Rao

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.

Reply
Glenn

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

Reply
Abir

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

Reply
Chakreshprasad

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.

Reply
Sophia

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?

Reply
tubeth

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 http://www.gritodemujer.org/p/contacto.html

Reply
Michelle

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!

Reply
João M

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.

Reply
    Chamal Rathnayaka

    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!

    Reply
Valiant

I'm having difficulties doing this. So I followed your instructions but i can not send email by clicking send button.
This is my blog http://buildpcgames.blogspot.com/p/contact-us.html
Please help me, thanks

Reply
    Chamal Rathnayaka

    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.

    Reply
    Valiant

    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 😀

    Reply
    Chamal Rathnayaka

    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.

    Reply
Sarah Correia

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…

http://hopexchange.blogspot.com/p/contact-me.html

Reply
    Chamal Rathnayaka

    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.

    Reply
Amy-Elize Brown

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?

Reply
Jossy

it didnt work on my blog what is problem?

Reply
Yan Birog

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! [www.yanbirog.com]

Reply
    Chamal Rathnayaka

    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. 🙂

    Reply
sanaullah sajid

Me add Contact Us page in blogger without link date plz help
my website: http://engineersoftpk.blogspot.com/

Reply
    Chamal Rathnayaka

    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?

    Reply
karthik

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..

Reply
    Chamal Rathnayaka

    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.

    Reply
Samuelson

Thank you Chamal. This was useful to me.

Reply
Sandra

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

Reply
Sandra

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 http://www.familygood.se

Kind regards

Sandra

Reply
    Chamal Rathnayaka

    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.

    Reply
Janathri Weeratunga

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….lifeasasrilankan.blogspot.com

Reply
    Chamal Rathnayaka

    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.

    Reply
Rahul Yadav

Great work, Thanks a lot mate!

Reply
Nikki Blaylock

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?

blog: youbetterbelieveitmusic.blogspot.com

Thank You

Reply
    Chamal Rathnayaka

    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.

    Reply
Raja Barua

It's too simple. It's work
Thanks

Reply
ABHIJIT RABHA

HI ADMIN SUBMIT BUTTON DON'T SHOW THE "SUBMIT TEXT".. PLZ HELP ME..!

Reply
lynn zodumo Boxoza

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!!!! http://zoelynnsmode.blogspot.com/

Reply
    Chamal Rathnayaka

    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.

    Reply
Aastik

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

Reply
stelios

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
stelios

Reply
    Chamal Rathnayaka

    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 Jotform.com 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.

    Reply
Chamal Rathnayaka

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

Reply
Dark Gamers

this awesome,,, tanks guys…

Reply
Anonymous

Hi,

Thank you for nice tutorial. I implemented without any problem. But 'Send' button is right aligned and I tried to fixed it Googled it, no luck. Can you please look into it if possible.

http://melinarai.blogspot.com/p/contact.html

Hum

Reply
    Chamal Rathnayaka

    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

    </div>

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

    Reply
    Anonymous

    Thank you Chamal. But it didn't work.

    Reply
    Chamal Rathnayaka

    Then try this code:

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

    Let me know whether that code works for your blog.

    Reply
Saqib Ali

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

Reply
    Chamal Rathnayaka

    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.

    Reply
Anonymous

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

Reply
MK

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 http://www.yogamasha.com
Would greatly appreciate any help!
Kind regards, Masha

Reply
    Chamal Rathnayaka

    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.

    Thanks.

    Reply
Shamsudeen S

Thank you Chamal

Reply
    Chamal Rathnayaka

    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!

    Reply
?Title

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.

Reply
    Chamal Rathnayaka

    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.

    Reply
rich banks

Hi,

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

Reply
    Chamal Rathnayaka

    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.

    Reply
Mahesh Pathak

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

Reply
Jean

This was very helpful, thank you. 🙂

Reply
Simply Me

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

Reply
    Chamal Rathnayaka

    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.

    Reply
Mouse Ears Mama

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!

Reply
    Chamal Rathnayaka

    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!

    Reply
Adinda

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.

Reply
    Chamal Rathnayaka

    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.

    Reply
    Adinda

    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 😀

    Reply
    Chamal Rathnayaka

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

    Reply
Benoit E

Thanks great tips!

Reply
Anonymous

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

Reply
    Chamal Rathnayaka

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

    Reply
    Anonymous

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

    Name
    Email
    Subject
    Message

    Reply
    Chamal Rathnayaka

    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.

    Reply
Pakistan

Here is my blog contact us page … i which i have used your code.. but its different some thing is wrong with my contact us form can you please tell me whats the mistakes..? http://pkliveinfo.blogspot.com/p/contact-us.html

Reply
    Chamal Rathnayaka

    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.

    Reply
Anonymous

Hi Chamal,

I've installed the widget, it looks nice and seems to work, but stil don't receive any email while testing.

http://keerzijde.blogspot.nl/

Thanks in advance,
Cees

Reply
Mona

It’s a very good article. Thank you so much.

Reply
    Chamal Rathnayaka

    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!

    Reply
Zen Huzaini

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)

Reply
M. M. Butler Photography

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 http://www.mmbutlerphotography.com/p/contact_24.html
Thank you 🙂

Reply
Lalit Raghuvanshi

Hello admin..I have implemented Contact us form on my page http://www.webcodeexpert.com/p/contact-us.html 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.

Reply
    Chamal Rathnayaka

    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.

    Reply
    Lalit Raghuvanshi

    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?

    Reply
    Chamal Rathnayaka

    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 ?

    Reply
Frederico Santos

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

Reply
    Chamal Rathnayaka

    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!

    Reply
Frederico Santos

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?

Reply
    Chamal Rathnayaka

    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.

    Reply
    Frederico Santos

    Thank you so much my website is fredericosantos.com. 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.

    Reply
    Chamal Rathnayaka

    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.

    Reply
    Frederico Santos

    I follow your step and create a new static page, it doesn't works ;((

    Reply
    Chamal Rathnayaka

    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.

    Reply
    Frederico Santos

    I deleted as written and it still doesn't work

    Reply
    Chamal Rathnayaka

    Did you check spam box to find emails from no-reply@blogger.com ? If Blogger contact form page works well, you should receive messages. Check your email and find if you have filtered messages from no-reply@blogger.com.

    Reply
    Frederico Santos

    (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

    Reply
    Chamal Rathnayaka

    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.

    Reply
Justin Owens

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 missionestonia.blogspot.com. I put the contact widget on the "Join our Support Team" page. Please help!

Reply
    Chamal Rathnayaka

    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.

    Reply
    Justin Owens

    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.

    Reply
    Justin Owens

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

    Reply
    Chamal Rathnayaka

    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.

    Reply
    Justin Owens

    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.

    Reply
    Chamal Rathnayaka

    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!

    Reply
Te Addict

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: http://teaddict.com

Contact form located here, at the bottom of the page:
http://www.teaddict.com/p/blog-page_3.html

Reply
    Chamal Rathnayaka

    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.

    Reply
    Te Addict

    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…

    Reply
rahul wadhawan

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

Reply
    Chamal Rathnayaka

    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 no-reply@blogger.com. If you still have above problem, please reply here with your BlogSpot domain.

    Reply
Suzette Barnett

Hi, I just used your html contact form and it's up but the formatting of the text is off. When I manually fix it, the first two boxes disappear. I used other contact forms code and the same thing happens. Any suggestions? Thank you! http://trysomethingfun.blogspot.com/p/photo-restoration.html#.VHTlkfTF_UH

Reply
    Chamal Rathnayaka

    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.

    Reply
Info Vaporizers

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

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

Reply
Best Android Browsers

useful article. thx alot

Reply
Admin

i follow your steps..its working on normal blog like testblog.blogspot.com..
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

Reply
DASARI KETHAN SRINIVAS

HI I HAVE FOLLOWED YOUR STEPS I GOT THE CONTACT FORM BUT SEND BUTTON IS NOT WORKING WHEN I TRIED TO SEARCH FOR ContactForm1 IN JUMP TO WIDGETS IT IS NOT SHOWING IN THE CODE. I THINK THE CODE IS MISSING FOR ContactForm1 WHAT SHOULD I DO??

Reply
Sara Fearon

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?

Reply
suraj kumar

can we add popular post as a page using above code pls reply

Reply
Piotr Lavka

Hey, thank you for the great Tutorial.
All works fine on my blog Berlin du bist wunderbar
Now I have a widget, that I can put on my Static Page.

Reply
Spook SEO

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.

Reply
Masud Rana

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.

Reply
MovieBay Wyatt

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

Reply
CuriousPoppy

I did this on my blog and when I click on the page, it just goes to the homepage..

Reply
Kylee Luckeroth

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!

Reply
    Chamal Rathnayaka

    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.

    Reply
Rolana Moyaah

This doesn't seem to work for me. When i type that code into my template it still shows up at the top in my sidebar. Is there anyway you can help me out please, I would really appreciate it. My website contact page is http://www.ohsewfashion.com/p/contact.html. Many thanks

Reply
Indiya Gudluck

mine is working fine thanks man……………..www.cloudig.blogspot.com

Reply
Chamal Rathnayaka

@Fauzan Muntahal, @seohear.com

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.

Reply
seohear.com

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

http://www.seohear.com

Reply
Krishna Kumar Shrestha

Great information about Contact form. I applied this and working properly. Thank you so much for your effort in providing this code to us. Make Money Online Offline At Home

Reply
    Chamal Rathnayaka

    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.

    Reply
Cuma Indo

Thank you so much !

Reply
Prince Nigar

Google adsense deal with you, can you tell me your vister per day,
Princenigar@gmail.com

Reply
SEO Magic Wand

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.

Reply
Amit Kumar

thanks bro for sharing this helpful post.
it helped me a lot.

Reply
Mahendra

Hi Author,

Thanks for sharing this tutorial.

Reply
JacyK

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.

Reply
Hasan Shamim

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

Reply
wordpress cms website design India

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.

Reply
mike

thank you so much my friend, i did it this time…bwhaahah i made a shortcut that is why 🙂

Reply
mike

my friend, my page won't work, the output is okay then when i clicked submit button nothing happens 🙁 please help

Reply
Modi Deep

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

Reply
Modi Deep

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?

Reply
    Chamal Rathnayaka

    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,

    https://www.pitiya.com/2013/06/create-contact-form-using-google-docs.html

    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.

    Reply
Modi Deep

How can i get the mail on my email as someone get to contact me.?
Please:
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

Reply
    Konstantin Viglatzis

    please answer to his question.I need to know too

    Reply
    Chamal Rathnayaka

    @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.

    Reply
    Jessica Smith

    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

    Reply
    Chamal Rathnayaka

    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.

    Reply
    Falling Leaves Kung Fu

    I'm having the same issue. Sent mails from the contact form never arrive in my Gmail inbox

    Reply
Anonymous

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

Thanks!

Reply
Gurkha ph

thanks..done with my blog. thank you my blog looks professional now.

Reply
    John Maduka

    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

    Reply
    Chamal Rathnayaka

    John, Glad Contact form works perfectly on your blog. Let me know if you have anything to asked from me.

    Reply

Leave a Reply:

Generate Little-known, High Traffic Keywords Without Struggling

Steal my step-by-step blueprint.