Blogger has one built-in contact form: the Contact Form gadget. It only goes in a sidebar or another gadget area, and you can’t add it to a page. You can, however, paste a copy of its HTML into a page. The gadget’s own script then sends that copy, so you get a contact page that uses Blogger’s form, with no third-party form service and no extra script. It takes three steps.
Step 1: Add the Contact Form gadget
In the Blogger dashboard, open Layout, click Add a Gadget in any sidebar section, pick Contact Form and click Save.
Leave Show this widget switched on. It looks like the easy way to hide the sidebar form, but it isn’t: with the switch off, Blogger leaves the gadget and its script out of every page. I tried it, and the page form then just reloaded the page with the message in the address bar, and nothing was sent. Hide the gadget with CSS instead.
Step 2: Hide the gadget from the sidebar
Open Theme, click the arrow next to Customize and choose Edit HTML. Find ]]></b:skin> (press Ctrl+F or Cmd+F inside the editor), paste this just above it and save:
#ContactForm1 {
display: none !important;
}Code language: CSS (css)On Contempo you can skip the theme HTML: Theme → Customize → Advanced → Add CSS takes the same rule.
ContactForm1 is the gadget’s ID. To check yours, open your blog, view the page source and search for widget ContactForm. If the ID is different, use it here and in the form code below.
Step 3: Put the form on a page
Open Pages and click New page. Give it a title such as “Contact”, then switch the editor from Compose view to HTML view (the pencil menu at the top left of the toolbar). Paste this code and click Publish:
<form name='contact-form'>
<p></p>
Name<br />
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' value='' type='text' />
<p></p>
Email
<span style='font-weight: bolder;'>*</span><br />
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' value='' type='text' />
<p></p>
Message<span style='font-weight: bolder;'>*</span><br />
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' 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>Code language: HTML, XML (xml)That’s the gadget’s own markup, copied from a live Blogger blog in October 2026. Name is optional. A visitor who leaves the email empty or invalid, or sends an empty message, sees “A valid email address is required.” or “Message field cannot be empty.” under the button. After a successful send, the form clears and “Your message has been sent.” shows for three seconds. Blogger emails each message to you.
The emails come from [email protected] with the subject “[your blog title] New message received”, and the visitor’s name, email address and message are in the body. There is no Reply-To header, so pressing Reply in your mail app writes to Blogger’s no-reply address. Copy the visitor’s address from the message instead.
Why the button has type=”button”
The 2021 version of this post, and many copies of it around the web, used type='submit' on the Send button. Valid messages still get through with that, but the error checks break. The gadget’s script checks the fields when the button is clicked and never cancels the normal form submit. So with an empty or invalid email, the browser reloads the page instead of showing the error, and whatever the visitor typed ends up in the address bar. Blogger’s own gadget uses type='button', which has no default action, and so does the code above.
How it works, and when it doesn’t
The gadget’s script doesn’t look for a particular form. It looks up the fields by ID (ContactForm1_contact-form-name, ContactForm1_contact-form-email and so on), and when two elements on a page share an ID, the browser returns the first one. In Contempo the page content comes before the sidebar in the HTML, so the script finds the copy on your page and attaches to it. That gives three things to check if your contact page doesn’t send:
- The gadget is missing or switched off. Without it there is no script, and the form does nothing useful.
- The IDs don’t match. Every
ContactForm1_ID in the page code has to match the gadget’s ID. - Your theme puts the sidebar first. Then the script attaches to the hidden sidebar form, and the Send button on your page does nothing. Check the page source: the form inside your page has to come before
widget ContactForm.
Style the form
The fields keep the gadget’s class names, so you can style the page copy without touching the sidebar. This makes the fields wider and easier to tap. Add it the same way as the CSS in step 2:
.post-body .contact-form-name,
.post-body .contact-form-email,
.post-body .contact-form-email-message {
width: 100%;
max-width: 480px;
box-sizing: border-box;
padding: 8px;
}
.post-body .contact-form-button-submit {
padding: 8px 20px;
cursor: pointer;
}Code language: CSS (css)While you are in Layout, you can also add a recent posts list with thumbnails.
Thanks
hey i want to add differnt buttens in my blogs like contact us, categories, tools…. but dont know how to.. so can you plz plz plz help me..
You can do it from Widget and Template section of your Blogger.
I can’t hide the contact widget I got some letters on the top header when I paste the code :(
Try to do it again. I guess there was just a minor error on this article, which possibly led to that error :)
Why hide the widget? Does the contact form on a page not work if you don’t have the widget added on a sidebar? Why not just DON’T add the widget to the sidebar. I don’t understand.
I never tried it but I guess adding code without the widget wouldn’t work. Please correct me if I’m wrong :)
where is messege send? i do not find it anywhere,
The admin of that blog will receive the message on its inbox.
Hi,
First time I’m using blogger platform and finally I reached your site where I got how to add contact form in blogspot.
Thank’s for sharing
Everything worked and the page is there. But I tested it and I am not receiving emails.
Please help!
Give me the link to your contact page…
send button is not working?
ı m not recieve mails
I tried the same code on a test blog and it’s perfectly working.
thanks !
i tried using the widget but , send button is not working…don’t know where query is going..chek that form in the website link.
(link removed)
Used it and it worked. That check email associated with your Blogger for the message.
yes..got the query after 4 hours..don’t know what the issue is..I have added a Mobile field in the form, but its data is not coming in the form..can you please check this also..thanks
You can’t use any extra fields.
Hi,
Can your remove my previous comment. I have redirected blog to a website, so its giving problem. I would be thankful if you can remove my previous comment given as :
“annu
ON AUGUST 28, 2014 01:57:45
i tried using the widget but, send button is not working…don’t know where query is going..chek that form in the website link.
(link removed)”
and this one also because link has got repeated again.
I have edited both of comments and removed links from them :)
thanks :)
helo i am M.ameer sir i am not anderstand pleas contact me and mobile coll pleas my sell +92xxxxxxxxxx
Sorry, but don’t put your phone number in the comments section. If you want help then you can explain your problem here. If you want to hire someone to do this job for you, then visit this page: http://www.trickspanda.com/hire/
Hello
send button not working here pls suggest me how can i fix it.
page Link:- http://websitemethod.blogspot.in/p/contact-us.html
Try to remove replace code of entire page with the code of that form.
how would I receive the messages sent to me with this contact form?
Site admins will receive all the messages on their Gmail associated with that Blogger blog.
Thanks so much for sharing! Worked perfectly!
nice little ninja trick there. i like these sneaky work-arounds.
fyi, you can safely delete the classes from the inputs so they don’t inherit the css from blogger. beats overriding all of their styles.
i have not figured out how to keep the javscript from changing the send button.
oh, and be sure to add label tags and change the email field input type to email.
yahooOoOoOo!!! It worked, thanks bro for such tutorial. gonna book mark your site ;) :*
it works…thanks!
I Tryd, and i have a contact form now, but it’s not working. I’m clicking on the send button, but it does nothing. I’m looking in my gmail inbox but also there, nothing. Help? Thanks …
It works, Thanks!
Thanks!!!
It works fine on everything just that when I received email , the subject, country doesn’t show in email ..may I know why is it happened ?
Sorry but you can’t add any additional fields to that form. Blogger doesn’t allow that.
Hi. Will this work in a Dynamic View template? Thanks!
Yes, it should work :)
hi.
not working in my blog :( can you please check my blog >> http://utajiri.blogspot.com
thanks!
Have you added the widgets to the website first?
yes i did. when send button is pressed nothing happens.
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
It has nothing to do with the custom domains. It’s working fine on bwidgets.com :)
Hi,
This has worked fine for emails sent from computers but I’ve tried sending an email using my contact form page from 2 smart phones and it has not worked.
Should the contact form be able to work on mobile devices as well as computers?
I’m using the default mobile format.
My contact form page is http://amandalillywhite.blogspot.co.uk/p/blog-page.html
Thanks
Amanda
Hi,
An update on my earlier message.
I switched from default mobile format to desktop template on mobile devices and the contact form page now works on my smart phone.
I’d be interested to know if it possible to fix the contact form so that it works in default mobile format but I am grateful for your information about to get it on a page and will send a donation.
Amanda
Hey Amanda,
First of all, thanks for the donation :)
Second, it appears to me that Blogger doesn’t load JS we need to trigger the contact form, so that’s why it doesn’t work on mobile devices. Using a responsive theme will solve this issue :)
Greetings from England.
I’ve followed your instructions exactly. All looks the way you describe. But no messages are arriving – it’s been over a day since I sent a couple of test messages via my contact page.
Yes, I have the contact widget hidden.
Yes I have a custom domain.
Any help appreciated.
Can you try to see if the widget is working with adding it to the page?
Hi, Contact form worked very well until a add a photo in my page. Now I deleted the page and create a new only with your html code and it dosn’t work too… I don’t understand
Hi Frederico,
Please visit the HTML editor and clear everything out, and try again :)
Happy Holidays :)
Hi,
I’m not receiving emails from the contact form. My admin email is setup to gmail. I’ve tested it multiple times and nothing sends.
http://www.morethanjustaprettyface.us/p/blog-page_1.html
Please post the code in the HTML mode and publish the page without even toggling to the Visual Editor :)
Bro,
I Got What I Want Without any problem thanks a lot
Hi thanks for your tutorial but i tested it and the message didn’t send to my email?
worked. but i dont recieve any mails, what am i doing wrong?
See this video
Here you can learn How to embed contact form in static page . By seeing this video you can do it very easily
…
https://youtu.be/msVyu1yAXj0
it’so nice and easy Just copy and past
Hello i need your help
you save my life
This worked perfectly. Thank you so much!
The easiest way to add a contact us page to blogger is use a form backend service like https://fabform.io
I have thought of using a form backend service. I played around with several of them, but haven’t decided on which one I like best. Why fabform and not some other solution?
the form is nice but it doesn’t send any email, please help
How To Add Blogger Contact Form (HTML Code) Into A Page
i tired this but i would not receive any message in my gmail when my client try to contact me
help help me out
Email send perfectly. Thank you!