Contact Form for Blogger on Static Page with CSS only

We knew, Google released Contact Form for Blogger last week. And I received many requests to make a contact form for Blogger on Static page instead widget, because widget is on side bar and it’s not polite to contact or not friendly with visitors who usually contact us from a stand alone page.

Now, I have a workaround solution will help you display contact form for Blogger on static page with css only. I will release many tips to make contact form with js, jquery, but now, please enjoy with CSS first.

Step 1: Add contact form gadget

Access your blog Layout. Click on any Add a Gadget link. An Add a Gadget window will be shown, click on More Gadgets, and choose add Contact Form.

Add Contact form for Blogger by gadget
Add Contact form for Blogger by gadget
Add contact form for Blogger window
Add contact form for Blogger window

On Configure Contact Form Widget window, click Save button.

Then just save your contact form
Then just save your contact form

After added Contact form gadget, please drag and drop it below Blog Posts gadget, then click Save arrangement button.

Drag and Drop contact gadget under Blog Posts and Save arrangement
Drag and Drop contact gadget under Blog Posts and Save arrangement

Step 2: Hide contact form widget

Access your blog Template, and click Edit HTML. In HTML editor, find

]]></b:skin>

Then, insert before with the code

.widget.ContactForm {
display: none;
}
Open template editor and paste the code
Open template editor and paste the code

Step 3: Make contact page

Access Page, then create a blank page with a name mean “Contact” or any text you want.

Add Contact Page
Add Contact Page

In page editor, switch to HTML mode and paste the below code into content field

<style type="text/css">
.widget.ContactForm {
display: block;
}
.post-footer {
display: none;
}
#blog-pager {
display: none;
}
.blog-feeds {
display: none;
}
.widget.ContactForm .title {
display: none;
}
.widget.ContactForm * {
max-width: 100%;
}
</style>

Then Publish the page.

Add code to static page
Add code to static page
And Contact form for Blogger in action on static page
And Contact form for Blogger in action on static page

Now, you can access your new page and enjoy your contact form.

YOU WILL ALSO LIKE:

COMMENTS

  • comment-avatar
  • comment-avatar

    I was searching for it 🙂 Thanks !

  • comment-avatar
  • comment-avatar

    Thank you for the tip

  • comment-avatar

    Thanks man! you just saved me from stress.. #muchlove.

  • comment-avatar

    Thanks! This is great!

  • comment-avatar

    Nice tip ! Its great ! thanks !

  • comment-avatar

    thanks you for this trick!

  • comment-avatar

    Helpful but the "contact me" form is showing up at the bottom of the page for me. Any ideas why?

  • comment-avatar

    Just share me the URL. I will take a look.

  • comment-avatar

    Hi! Such a great tip and easy instructions – thanks so much. One problem though … when someone submits through the form on my page, the bottom box changes to "sending …" but never successfully sends and no email reaches me. Any ideas? Really appreciate the help.

  • comment-avatar

    Please make sure you checked spam box and the email only send to admin email. Can you share me your contact page URL?

  • comment-avatar

    Hi. I double checked and no message to my Spam. Also, the status bar at the bottom never updates to say whether the send was successful or unsuccessful. The url is here …. http://blog.theweddingcompany.ie/p/get-in-touch_26.html Really appreciate your help.

  • comment-avatar

    Hi. I just sent a message via your contact form. Please check if you can see it.

  • comment-avatar

    It arrived! How strange! Thanks so much for your help. Did you get a success message at the bottom of the page when you sent it?
    I wonder if it's because I'm logged in as the administrator that I can't send one? At least it's working. Thanks so much.

  • comment-avatar

    I replied your questions directly in our email stream. Your site is really cool.

  • comment-avatar

    Hi
    I just followed your instructions but the contact widget still appears at the bottom of my page (where I placed the widget in the first place).

    I did add the code in my Edit HTML but the contact form does not appear in my static page.

    Any thoughts?

  • comment-avatar
  • comment-avatar
  • comment-avatar

    You put the wrong place for contact form. The contact form widget must be placed under Blog widget in Layout. Please check step 1.

  • comment-avatar

    ok.Thank you!

  • comment-avatar

    Another thing Tien. Which is the mail address in which I will receive my messages? Can I change it?

  • comment-avatar

    Blogger will send contact to email of blog admin. We can not change that. But you can add more admin to your blog to extend the list of emails which will receive contact messages.

  • comment-avatar

    Hi Tien,

    The contact form shows up fine on a page tab, however, it didn't disappear from my main page – any idea why?

    Thanks a lot for your help. My blog: http://wildheartsandgreentea.blogspot.com

  • comment-avatar

    But I see your site is showing it at this time.

  • comment-avatar

    Though the widget still appears at the bottom of my site despite completing Step 2; it's supposed to be hidden, right?

  • comment-avatar

    I see in your template has CSS error:

    .Image img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    .widget.ContactForm {
    display: none;
    }

    When the right code must be:

    .Image img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    .widget.ContactForm {
    display: none;
    }

    You must edit template HTML and modify the code.

  • comment-avatar

    Great, it worked. Thank you very much for taking the time to help! I appreciate it.

  • comment-avatar

    Friend, this is a perfect tutorial. My blog http://blogmerit.blogspot.com has a new look now. Thanks a lot.

  • comment-avatar
  • comment-avatar

    I don't have .post-footer so where i put

  • comment-avatar

    Please read the tutorial again clearly, you don't need post-footer, that css is for hiding post-footer only in case you have one.

  • comment-avatar

    Thanks so much! This has been very helpful! I've been searching everywhere for a form. (:

  • comment-avatar

    Thanks for this post- easy to undeerstand and totally practical! however I can't seem to hide mine at the bottom of my blog post either- i think it is because the template I use has a post footer… so while the widget is in the correct place as per your screenshot from the layout page- something else in the existing template means it is not quite in the right place- but can't figure it out… http://thedspencery.blogspot.com.au x

  • comment-avatar

    Did you follow the step 2 in this tutorial?

    About the style of contact, it's depended on personal blog style.

  • comment-avatar

    I looked into your css code and see it had wrong css (error). Please edit template and find:

    #main-wrapper {

    Then change it to

    } #main-wrapper {

  • comment-avatar

    I cant for the life of me find the "]]>" HTML code to hide the widget. Help much appreciated!

    http://hollyemeryphotography.blogspot.com.au/

  • comment-avatar

    Ah-Ha! I knew it was going to be something small I'd missed, I'd scoured the HTML and couldn't see anything that would affect it.

    Thank you!

  • comment-avatar

    When I tested my form, I never received the email.

  • comment-avatar

    Email will send to admin of blog only, please make sure you check with that email address. If you want to add another email which will receive contacts, please add that email as admin of your blog.

  • comment-avatar

    Thanks! It was sent to my other email address. It works great!!!

  • comment-avatar

    Hi. the contact form still shows up at the bottom of the page and I cant figure out why. It is not the same issue as the other two that have already asked. Any idea? http://www.shonmoore.com. Thanks.

  • comment-avatar

    Your CSS has error now. Please edit template code and find:

    margin-bottom: 1px;
    }
    background:url("http://www.shonmoore.com/images/border_bg.gif&quot😉 repeat-x bottom left;

    Just remove the } symbol.

  • comment-avatar

    Rock on worked perfectly!!! thank you!

  • comment-avatar

    Hey bro, Having the same issues too. The contact form is still showing at the bottom of the page.. Can't figure out why 🙁

    http://www.iammagnus.com

  • comment-avatar

    I can not see the code of step 2 in your site code.

  • comment-avatar

    thanks, sir, i am very happy to get ur great article. it works excellent

  • comment-avatar

    I'm sorry I see that many others have the same problem but I've tried checking out all the ones that have had the problem and searching for it in my HTML but nothing works.It still on the bottom of my home screen.Please help my blog is http://realmusicpassion.blogspot.com/

  • comment-avatar

    Dear. I don't see the code of step 2 in your site source code.

  • comment-avatar

    Actually it did not work I don't know why although I used all instructions.

  • comment-avatar

    Hi. Can you tell me more detail about your problem? Thanks.

  • comment-avatar

    Hello!
    I need your help, could you tell me where is the problem?
    The Contact form appears under the title. It looks weird.
    Here is the url. Blog is in Slovak language.
    http://tonypalus.blogspot.sk/p/kontakt_20.html
    Thank you!

  • comment-avatar

    Hi. This tutorial only show you how to display contact form in your page, about customize your contact form, you must do it by yourself.

  • comment-avatar

    Thanks!!! it worked………… ^^

  • comment-avatar

    please help! Contact form shows under every page in my blog!

  • comment-avatar

    I want to try your method, but I can't pass through step 1, because I can't drag and drop the Contact form gadget below "Blog Posts". Only on the "add a gadget" below. So the form shows on the slide below, but anyways even there or the sidebar, when I press send it says it is successfull but I don't receive the question in my email… What should I do?

    The page is http://testedosdr.blogspot.com.br/p/q.html

  • comment-avatar

    Hi. I think your template has a bad admin layout so you can not drag widget to a place you want. Try a better template, or at least official templates of Blogger.

    About email for contact form, default is email of site admin. Please check the admin email to make sure it is your email that you want to receive contact. If the email is right, but you still can not receive contacts, just check in spam box of the email.

    Good luck.

  • comment-avatar

    Followed the tutorial, It work like a charm, dont forget to check your spam or Social category mail, you guys may need to drag the mail to main inbox. Thanks Tien Nguyen for your support and the greate tutorial 🙂

  • comment-avatar

    Nice tric thanks a lot…

  • comment-avatar

    Tip hay, xin phép bạn cho mình leech về blog của mình nhé, sẽ ghi rõ nguồn , tôn trọng bản quyền tác giả. Blog http://placeearn.com/

  • comment-avatar

    Cảm ơn bạn đã ủng hộ cho tác giả Việt Nam.

  • comment-avatar

    Hi
    I added a contact form to my blog. it works perfect. but when I reply to messages I received I found that my email address is shown in the From field of the email. Is there any way to hide my email address when I reply to emails and just shown my blog name ???

    Thanks

  • comment-avatar

    Hi. No way man. When you reply an email, the receiver will know your email, even you input your email to field or not. This is basic email feature, not related with Blogger.

  • comment-avatar

    Hi Tien, great post – thanks for the advice! I did this on my blog (http://therarewelshbit.blogspot.com) and the contact form shows up on my Contact page as it should do, however, the advert appears above it and I would prefer for it to appear below. Please can you let me know if there's any way to achieve this? Thank you

  • comment-avatar

    Can not. Because we placed the contact form under Blog widget so it must show under your ads.

    Workaround: hide your ads in contact page by CSS

  • comment-avatar

    Thanks a lot for your help!

  • comment-avatar

    Thanks, this works great!

  • comment-avatar

    Hi,
    Why is your contact form so much bigger, how do I make it wider?
    Oh and when I try to send an email it takes really long.. how can I fix that?
    Thanks

  • comment-avatar

    Dear. Show me your URL, I will take a look.

  • comment-avatar

    Hi,
    My blog is : holistic-hs.blogspot.ca/
    I've created a new contact form using contact123 because the one that blogger provides does not work. It is the form of a HTML widget, but have unable to get the same results using the method above. I have manage to get the form on my contact page but, on all my other pages there is a white space where the widget use to be. How do I get rid of that?
    Thanks

  • comment-avatar

    Dear. You can submit ticket for Contact123 for helps. Thanks.

  • comment-avatar

    hello, i have hide the contact form and added in the html into one of the pages. but it doesn't appear 🙁 http://misstamchiakfoodtour.blogspot.sg/p/contact.html

  • comment-avatar

    Dear. Please place contact form under Blog widget in main section. You are placing it in col2 section.

  • comment-avatar
  • comment-avatar

    Hello. Very usefull..
    I have one doubt,
    i have 4 admins in my blog, i want to change reception email address..how can i do it?

  • comment-avatar

    Blogger will send contact to all admin emails and we have no permission to change that feature.

  • comment-avatar
  • comment-avatar
  • comment-avatar

    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

  • comment-avatar

    Please make sure you check your admin email carefully (may be in spam box or other tabs). Custom domain can not affect contact form.

  • comment-avatar

    i check all junk and spam box…if i test with from normal blog(name.blogspot.in) its working fine and message received in in box..but i try with custom domain blog (techhacker.co.in) its showing message hasbeen sent.but i am not receiving any message..i removed custom domain and try with the same template and same contact form this time it works perfect and i received test message….so the problem with custom domain maybe..please check it http://www.techhacker.co.in

  • comment-avatar

    I don't see any contact form on your site.

  • comment-avatar

    please check it…..if you have free time please help me on this issue..can i contact you in google chat?

  • comment-avatar

    Hi! I have hidden the contact form, placed in under blog post widget, and added the HTML code to one of my pages, but it's still not appearing. Did I somehow do it wrong?

  • comment-avatar

    Show me your URL, I will take a look.

  • comment-avatar

    hey man I follow your step then I click send ,it's still "sending" and I dont have email that sending to me.
    Thank Tien.

  • comment-avatar

    Please make sure that your browser or internet provider allow contact emails send by Blogger.

    Show me your Url, I will sent a contact for testing.

  • comment-avatar
  • comment-avatar

    Hey Tien,I got it thank you so much ,I use firefox its work man.
    Thank..

  • comment-avatar

    thankxxxxxxxxxxxxxxxxxxxxx

  • comment-avatar

    Hey Tien, Possible to help me with my blog?
    http://ebuyslipper.blogspot.com/

  • comment-avatar

    nice tutorial….
    it work and help me… my blog http://www.topsoftware7.blogspot.com

  • comment-avatar
  • comment-avatar
  • comment-avatar

    Contact form not working with custom domain , its showing message has been sent.but i am not receiving any message my site is: http://www.homepages.co.vu/
    any ideas ??

  • comment-avatar

    Dear. Maybe you did not check other tab in Gmail dashboard.

  • comment-avatar
  • comment-avatar

    I see it worked now.

  • comment-avatar

    Hi Nguyen,
    I did all the step that you advice but the contact form still not appear in my static page. My page is http://goo.gl/HuQH7P

    Kindly please advice.
    Thanks

  • comment-avatar

    Hi Tien, I had your shot mag template and I'm happy thank you. Today, I don't understand why the contact form not work anymore. Email button confirm message sent but I no receive any email. Can I help me to resolve? thank you one more time

  • comment-avatar

    Forget Tien all is in order thank you

  • comment-avatar

    Hi Tien,
    I have done all the steps and I am facing a problem on my website. The contact form is working perfectly with aalookachaloo.blogspot.com but on custom page http://www.aalookachaloo.com, the send button is working good but i am not getting any message in my inbox. Please help me out Man urgently.

  • comment-avatar
  • comment-avatar

    I just made a contact, reply me if you get a message.

  • comment-avatar

    Very nice tutorial. really help full. It is working in my site 🙂

  • comment-avatar

    Dude, Before this im using ganunews.blogspot.com before i changed to custom domain. (www.ganunews.com) was working perfectly. Now, not working at all.

    Any idea bro.

  • comment-avatar

    Dear. I see it working well now. But your template is ERROR "TEMPLATE ERROR: LHS of numeric is null before 33 in data:blog.url == http://www.ganunews.com&quot;

  • comment-avatar

    Hi Tien, great tutorial. I'm having problems with receiving the email when I test my form out. I've sent several messages from different browsers (safari & chrome), I've checked all email folders including spam and I'm still not receiving anything. Is there anything else I can try? Thanks, Elise 🙂

  • comment-avatar
  • comment-avatar

    Hi Elise. Can you share me your URL, I will send a contact to test. Thanks.

  • comment-avatar

    i want my contact form to show between a text how do i solved the problem…cos it showing beneath
    url http://scholarshipni.blogspot.com/p/contact-us-3.html

  • comment-avatar

    Hi. You must follow this tut: http://bloggercando.blogspot.com/2014/05/contact-form-for-blogger-static-page.html

    In step 3, when add shortcode, just add between your content.

  • comment-avatar

    you send me a code for contact page ….

  • comment-avatar
  • comment-avatar
  • comment-avatar
  • comment-avatar

    It's working but mine is showing under my disqus comments widget. Help? Thanks! contact me form page

  • comment-avatar
  • comment-avatar

    hello Tien Nguyen, Thank you for explaining step by step with images.It was easier to understand.Though I was getting some error while I was trying to edit the template file and at the same there was another tab in which I opened the static contact page.I tried to preview and it said The page is temporarily unavailable or modified by another page.But eventually it worked after few trials.

    So thanks for the help 🙂

  • comment-avatar
  • comment-avatar

    Maybe blogger is going through some issues. We can't recieve messages sent through the contact form from past few days. Before, it wasl working well. Do you know anything about this?

  • comment-avatar

    Blogger has a bug with contact form on custom domains. With custom domains, admins can not send email to themselves.

  • comment-avatar
  • comment-avatar

    The contact form does hidden after I insert the code in step 2, however, it doesn't want to show up in separated contact page.

    Any ideas why? My URL is http://paintedcateye.blogspot.com

    Thank you for the help. I really appreciate it.

  • comment-avatar

    Hi. of course, step 2 is for hiding contact form, step 3 will show. Did you paste the code of step 3 into your page HTML?

  • comment-avatar

    Yes, I already did. It still doesn't want to show up somehow 🙁

  • comment-avatar

    It's displaying at the end of your site. Did you move it to under the Blog widget?

  • comment-avatar
  • comment-avatar

    After searching and wasting my time on google Finally I found a place where I got Exactly what I am Searching.Only thing I edit in it is form's width.Really nice post

  • comment-avatar

    Hey i just followed and did what is written but the contact form was not reflected in the UI …Please help mbagrabbers.blogpot.com

  • comment-avatar

    Awesome, just as i want. Thank you. Im fan of your templates and tips 😀

  • comment-avatar

    Thank you so much for sharing this. am really trying for this before.

  • comment-avatar

    Still, after searching any possibility to make my ContactForm working well in everywhere, including some explanation in this comment on your post, I haven't get any answer to 'receive the message that sent from my ContactForm'.
    It says 'Messages was sent successfully', but my email hasn't received any messages. Can you show me the way to fix my problem here?

    Blog: http://metro-translation.blogspot.com/p/kontak.html

  • comment-avatar

    If you tested many times, the system will check it as spam and it will not send email if it's from your IP (even success message). You must wait until the Blogger unlock spam status.

  • comment-avatar

    hmm… so how I can test whether my contact form is working or not then?

  • comment-avatar

    Ask your friends for help. I also just made a contact, please check. did you check in social or promotion tab of Gmail?

  • comment-avatar

    …the hell is this >_<
    I know there's some tab in Gmail, but I've never check on Social tab, and from the very first my sent message has found in this place >_<
    I feel shame toward asking you this kind of question :shy:
    anyway thank you very much for helping me solve this problem ^_^

  • comment-avatar
  • comment-avatar

    thank man
    I need this one
    thanks again

  • comment-avatar

    Thanks It was Helpful…..Do check if it is alright http://www.knowledgeworld.net

  • comment-avatar

    Thank you for sharing this useful tips Tien Nguyen. I'm using this Contact Form on http://www.luckyjaya.com

  • comment-avatar

    Thank you for the tip. It works well on my laptop.. but not on iPhone where the contact form does not show (none of the widgets show and videos don't play either.. if you can help… thnak you very much in advance.. Sophie

  • comment-avatar

    HI Sophie. What's related with videos here? Please make sure your template is working well with mobile devices or not.

  • comment-avatar

    Thanks for the quick reply, It is working but it does not show the embedded contact form in the contact page. It shows on computers only (including Mac): http://nonameyet-33.blogspot.fr/p/contact.html
    Thanks for your help

  • comment-avatar

    not show contact form on my blog why ?>????????

  • comment-avatar

    You did not move the contact form to below of Blog Spot widget in Step 1.

  • comment-avatar

    Dear Tien, could you figure out the problem?, thanks
    Sophie

  • comment-avatar

    Hi. You are using default template of Blogger which will not support Contact form for mobile. Please use other template which is responsive.

  • comment-avatar

    You can check mobile version here on desktop also: http://nonameyet-33.blogspot.fr/p/contact.html?m=1

    Contact form not show, cause is from your template.

  • comment-avatar

    Thank you very much, I understand your reply, however where exactly can I find templates that are compatible with showing contact form on mobile? Sorry for the hassle.. hopefully it's the last one … Cheers Sophie

  • comment-avatar

    You must find a template width RESPONSIVE feature by Google or try one of our template: http://www.sneeit.com/search/label/Blogger+Templates

    After installed new template, follow below tips to enable mobile template
    http://www.sneeit.com/2000/10/how-to-enable-responsive-feature-for.html

    Finally, repeat this article steps again.

  • comment-avatar

    hey thanks for your post.bt my contact form shows at the bottom .and no mail reaches to me.any idea??

    my blog url is http://www.androidworldz.in

  • comment-avatar

    I see it worked now, right? Blogger will send email to the admin email of Blog, please check it (also other tabs of that email).

  • comment-avatar

    Thanks it was helpful ;))

  • comment-avatar

    NOT working on mobileview

  • comment-avatar

    You must enable desktop template for your mobile (make sure your template is responsive)

  • comment-avatar
  • comment-avatar

    Thanks for the tutorial. i got the contact button in menu bar, but on clicking contact form is not seen. please help
    my blog URL http://www.indianvegfoodblog.blogspot.in

  • comment-avatar

    Hi. I did not test with dynamic ajax template (because those templates are not friendly with SEO).

  • comment-avatar
  • comment-avatar
  • comment-avatar
  • comment-avatar

    Hey I just added a custom contact form using HTML and CSS only…. But it's not functioning (nothing happens on clicking the send button), is there any way to make it function?
    U can see it in link below-
    URL: http://techasera.blogspot.in/p/contact-us_22.html

  • comment-avatar

    Hi. Thanks for the tutorial. My contact page showed up super fine, but it keeps showing on my home page, can you help me in finding the error? Your help is much needed.

    URL : http://sweetreemalaysia.blogspot.com/

  • comment-avatar

    Your theme is bad when insert script in skin / style tags of template. Please remove that script.

  • comment-avatar

    thank you so much for your help. God Bless. ^^

  • comment-avatar

    Thanks you for Your tutorial. Like this bro

  • comment-avatar
  • comment-avatar

    Tien,

    Great template! I have tried many times to insert Contact Form widget on a static page without success. http://www.trincafe.com/p/blog-page.html

  • comment-avatar
  • comment-avatar

    Tien, i have added the contact form in my blogger but i have not received the mail from the blogger. pl help us to resolve http://nifty50bse30.blogspot.in/p/blog-page_69.html

  • comment-avatar

    Hello. I just sent a message, please double check your inbox and also in social and promotion tab of your gmail.

    Message will be sent to ADMIN EMAIL (Blogger mail).

  • comment-avatar

    Hey Tien,

    Thank you for your prompt action on my request. I have received your mail through the blogger. When i implemented the code, i have received the mails in my "Social Tab"..but i focused only primary inbox. later i gone through your tips and found the mails received my "Social" tabs.

    Thank you again

    Regards
    Lingam147

  • comment-avatar

    I am happy when hear that. Good luck with the site.

  • comment-avatar

    Tien, as a good designer what is your tips to improve my blogger.

  • comment-avatar

    Hello. Nothing is better than content. But design is also import. So please choose a premium template for better result.

    You can also browse here: http://www.sneeit.com/search/label/Blogger+Templates

  • Leave a Reply