How to Add a Contact Form Widget in Blogger

Learn how to add a Contact Form widget in Blogger, place it on a Contact page, style the form, receive messages and fix common form issues.

A Contact Form widget in Blogger gives visitors a simple way to send you a message without displaying your email address publicly.

Blogger provides a built-in Contact Form gadget that can be added through the Layout section. You can place it in a sidebar or footer, or configure your template so the form appears only on a dedicated Contact page.

This guide explains how to add a Contact Form widget in Blogger, where contact messages are delivered, how to create a Contact Us page and what to check when the form does not work.

How to add a Contact Form widget in Blogger and create a Contact Us page

What Is the Blogger Contact Form Widget?

The Blogger Contact Form is a built-in gadget that normally contains fields for:

  • Name
  • Email
  • Message

Visitors can enter their details and submit the form directly from your Blogger website.

The standard Blogger widget is usually identified in the theme as:

ContactForm1

How to Add a Contact Form in Blogger

Follow these steps:

  1. Sign in to Blogger.
  2. Select the correct blog.
  3. Open Layout.
  4. Find the section where you want the form.
  5. Click Add a Gadget.
  6. Select Contact Form.
  7. Enter a widget title if required.
  8. Click Save.
  9. Save the Layout.

Open the published website and test the form afterward.

Where Should You Place the Contact Form?

You can place the Contact Form in any widget area supported by your Blogger template.

Common locations include:

  • Sidebar
  • Footer
  • Below the main content
  • A dedicated Contact page layout

For most professional websites, a dedicated Contact Us page provides a cleaner experience than displaying the complete form on every page.

How to Create a Contact Us Page in Blogger

First create a normal Blogger static page:

Blogger → Pages → New Page

Use a title such as:

Contact Us

You can add introductory text such as:

Have a question or need help? Use the contact form below and we'll get back to you as soon as possible.

Publish the page and note its URL.

A Blogger page may look like:

https://www.example.com/p/contact-us.html

How to Show the Contact Form Only on the Contact Page

Adding the Contact Form gadget through Layout can make it appear wherever that widget section is displayed.

If you want it only on your Contact page, you can use a Blogger visibility condition.

First back up your theme, then go to:

Blogger → Theme → Edit HTML

Find:

ContactForm1

The opening widget may look similar to:

<b:widget id='ContactForm1'
          locked='false'
          title='Contact Form'
          type='ContactForm'
          visible='true'>

Add a condition for your Contact page:

<b:widget
  cond='data:view.url == "https://www.example.com/p/contact-us.html"'
  id='ContactForm1'
  locked='false'
  title='Contact Form'
  type='ContactForm'
  visible='true'>

Replace the example URL with the exact URL of your Contact page.

For more visibility rules, see our Blogger widget visibility guide.

Where Are Blogger Contact Form Messages Sent?

Blogger Contact Form submissions are sent to the email addresses associated with the blog's administrators.

This means that if your blog has multiple Admin accounts, more than one administrator may receive Contact Form messages.

Blogger does not provide a normal Contact Form setting where you simply type a completely unrelated recipient email address.

How to Receive Contact Messages on Another Google Account

If you want another Google Account to receive Blogger Contact Form submissions, that account generally needs to be an administrator of the blog.

The Blogger permission workflow is:

Settings → Permissions
→ Invite more authors
→ Accept invitation
→ Change Author to Admin

However, remember that Admin access gives that account extensive permissions over your Blogger site.

Only grant administrator access to an account you trust.

See our guide to Blogger Author and Admin permissions.

Can You Change the Contact Form Fields?

The standard Blogger Contact Form is limited compared with a full custom form service.

If you need fields such as:

  • Phone number
  • Subject
  • Dropdown menu
  • Order number
  • File upload
  • Checkboxes

the built-in Blogger Contact Form may not be the right solution.

For more advanced forms, you can consider an embedded Google Form or another trusted form provider.

How to Style the Blogger Contact Form

The appearance of the Contact Form is controlled by your Blogger theme CSS.

You can add styling such as:

.ContactForm{
  max-width:500px;
  margin:0 auto;
}

.ContactForm input,
.ContactForm textarea{
  box-sizing:border-box;
  width:100%;
}

You may also adjust:

  • Input padding
  • Border color
  • Border radius
  • Button design
  • Spacing
  • Form width

Keep the styling consistent with the rest of your Blogger template.

Keep the Contact Form Mobile Responsive

A contact form should fit comfortably on phones.

A useful CSS rule is:

.ContactForm input,
.ContactForm textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

This helps prevent form fields from extending beyond the available screen width.

For broader mobile issues, see our Blogger mobile responsive guide.

Why Am I Not Receiving Contact Form Messages?

If the form says the message was sent but you do not receive an email, check:

  • Your Inbox
  • Spam or Junk
  • Other Gmail inbox categories
  • Whether you are an Admin of the blog
  • Whether the built-in Contact Form widget is being used
  • Whether browser privacy settings are interfering with the form

Do not repeatedly submit dozens of test messages in a short period because anti-abuse systems may affect repeated form testing.

Why Does the Form Say "Message Sent" but No Email Arrives?

First allow some time for delivery and check Spam.

Also test using:

  • A normal name
  • A valid email address
  • A genuine short message

If you use a heavily modified third-party Blogger theme, confirm that the original Contact Form widget markup and scripts have not been removed or broken.

Why Is the Contact Form Not Showing?

Check:

  • The widget is present in Blogger Layout.
  • The widget is enabled.
  • Your visibility condition matches the correct page.
  • The theme is not hiding ContactForm1 with CSS.
  • You are testing the correct URL.

If you recently added a page-only condition, temporarily remove the condition to determine whether the form itself works.

Why Is Add a Gadget Missing?

Your theme may not allow gadgets in the position where you want the Contact Form.

A Blogger section can use:

showaddelement='no'

or a restricted:

maxwidgets

value.

Try another supported Layout section or modify the theme structure if necessary.

See our Blogger widgets and gadgets guide for the fundamentals.

Blogger Contact Form vs Google Forms

Feature Blogger Contact Form Google Forms
Basic name/email/message Yes Yes
Custom fields Limited Yes
Dropdowns Not standard Yes
Multiple questions Limited Yes
Simple Blogger integration Excellent Requires embed

Use Blogger's built-in Contact Form when you only need a simple contact message.

Use a more advanced form service when you need additional fields or workflow features.

Don't Publish Your Personal Email Unnecessarily

A contact form allows visitors to reach you without displaying your email address directly in the page content.

This can reduce casual scraping of the address and provides a cleaner contact experience.

You can still display a business email separately if direct email contact is important for your website.

Blogger Contact Form Checklist

  1. Open Blogger → Layout.
  2. Add the Contact Form gadget.
  3. Save the Layout.
  4. Create a Contact Us page if desired.
  5. Use a page condition if the form should appear only there.
  6. Make the form mobile responsive.
  7. Test with a genuine message.
  8. Check Admin email inboxes.
  9. Check Spam if the message is missing.
  10. Use Google Forms or another service if you need advanced fields.

Questions About the Blogger Contact Form

How do I add a Contact Form in Blogger?

Go to Blogger → Layout, click Add a Gadget in a supported widget area, select Contact Form and save the layout.

Where do Blogger Contact Form messages go?

The built-in Blogger Contact Form sends submitted messages to the email accounts associated with the blog administrators.

Can I put the Blogger Contact Form on a separate page?

Yes. Create a Contact page and use a Blogger template visibility condition so the Contact Form widget appears only on that page.

Can I add extra fields to the Blogger Contact Form?

The standard gadget has limited fields. For custom dropdowns, phone numbers, checkboxes or other advanced fields, use a service such as Google Forms or another trusted form provider.

Why am I not receiving Blogger Contact Form emails?

Check your Spam folder, confirm that your account is a blog Admin, make sure the form widget is working correctly and test again with a normal valid message.

Can Blogger Contact Form messages be sent to only one Admin?

Blogger's built-in form does not provide a normal recipient selector for sending messages to only one administrator. If you need more control over recipients, use another form service.

Final Recommendation

Use Blogger's built-in Contact Form when you need a simple and lightweight way for visitors to send you a message.

For a professional website, create a dedicated Contact page and restrict the Contact Form widget to that page rather than showing it throughout the entire blog.

Keep the fields simple, test the form after installation and check the Admin inboxes and Spam folder to confirm that messages are arriving.

If you need advanced fields, custom recipients or more sophisticated form workflows, use a dedicated form service instead of heavily modifying Blogger's basic Contact Form gadget.

Nikz Naveed is the founder and lead developer of BloggerTheme9, creating professional Blogger templates and custom websites since 2013. With more than a decade of hands-on experience in front-end web development, he specializes in building responsive, fast-loading and SEO-friendly websites for businesses, creators, publishers and online stores. His work covers Blogger template development, custom business websites, e-commerce stores, landing pages, UI/UX design, HTML, CSS, JavaScript, jQuery, XML, SEO, website performance optimization, hosting and DNS management. Through BloggerTheme9, Nikz has developed dozens of premium and free Blogger templates across business, magazine, portfolio, real estate, e-commerce and other niches, along with many custom-designed Blogger websites for clients. He also works on broader custom website projects through Craft-Site, helping businesses create professional, mobile-friendly websites focused on usability, credibility and growth.
Keep browsing

Related Blogging Articles