How to Create a Contact Us Page in Blogger: Step-by-Step
Complete Blogger Tutorial: Set up a standalone Contact Us page that sends visitor messages straight to your Gmail inbox.
- 1. Why a Contact Us Page Is Essential for Bloggers & Google AdSense
- 2. Method 1 vs. Method 2: Which Contact Form Should You Choose?
- 3. Method 1: Add Native Blogger Contact Form to a Page (With Copy-Paste HTML Code)
- 4. Method 2: Create a 100% Spam-Free Contact Page Using Google Forms
- 5. How to Configure Page SEO Settings & Link It in Your Navigation Menu
- 6. Troubleshooting: Why Blogger Contact Form Messages Are Not Arriving
- 7. Frequently Asked Questions (FAQs)
- 8. Conclusion & Official Disclaimer
1. Why a Contact Us Page Is Essential for Bloggers & Google AdSense
Whether you publish tech tutorials, cyber cafe tools, or product reviews, visitors often want to ask questions, report broken links, or request business collaborations. Having a dedicated Contact Us page delivers five major benefits:
✅ Core Benefits for Your Blog
- Fast Google AdSense Approval: As explained in our Complete Google AdSense Guide, human reviewers check your header and footer for a working Contact page to verify publisher authenticity (E-E-A-T).
- Protects Your Primary Email from Spam Bots: Instead of exposing your raw Gmail address to automated web scrapers, a contact form lets users message you safely.
- Attracts Brand Sponsorships & Affiliates: Brands looking to sponsor posts or partner on affiliate campaigns use your Contact page to reach out.
📐 Where It Fits in Your Blog Layout
- Top Header / Pages Bar: Place a direct link to Contact Us in your top navigation bar so mobile and desktop visitors can find it in one click.
- Main Page Body: Embed the responsive form + a short note stating your typical response window (e.g., 24–48 business hours).
- Footer Legal Links: Always link About Us, Contact Us, Privacy Policy, and Disclaimer together in your site footer.
2. Method 1 vs. Method 2: Which Contact Form Should You Choose?
You can create a Blogger Contact Us page using either Blogger’s built-in Contact Form script or an embedded Google Form. Compare both options below:
| Feature | Method 1: Native Blogger HTML Contact Form | Method 2: Embedded Google Forms |
|---|---|---|
| Visual Look & Speed | 100% Native & Fast: Matches your blog’s font and loads instantly without external iframes. | Loads inside a scrollable Google Forms container. |
| Where Messages Go | Sent directly as an email to your Blogger Admin Gmail Inbox. | Saved neatly inside Google Forms Responses + Google Sheets (with optional email alerts). |
| Custom Fields Support | Fixed 3 fields (Name, Email *, Message *). | Unlimited custom fields (Dropdowns, Phone Number, Subject, File Upload). |
| Best Suited For | Standard blogs & fast Google AdSense compliance. | Service portals, cyber cafes & lead generation forms. |
3. Method 1: Add Native Blogger Contact Form to a Page (With Copy-Paste HTML Code)
Follow these exact 4 steps to place a clean, responsive Contact Us form inside a standalone Blogger Page:
- Step 1 — Enable & Hide the Sidebar Contact Gadget (Important): Log in to your Blogger Dashboard → Layout → click Add a Gadget in the Sidebar → select Contact Form and click Save. (Note: Adding the gadget in Layout loads Blogger’s backend mail script so your custom Page form can send emails seamlessly!)
- Step 2 — Create a New Page: In the left menu, click Pages → + New Page and set the Page Title to Contact Us.
- Step 3 — Paste the Responsive HTML Code: Click the pencil icon at the top-left of the editor, switch to HTML View (`<>`), and paste the ready-made code below:
<style>
.custom-contact-box { max-width:600px; margin:20px auto; padding:24px; background:#f8fafc; border:1px solid #cbd5e1; border-radius:12px; font-family:'Segoe UI',Arial,sans-serif; }
.custom-contact-box label { display:block; font-weight:700; margin:12px 0 6px; color:#0f172a; font-size:14.5px; }
.custom-contact-box input[type="text"], .custom-contact-box textarea { width:100%; padding:11px 14px; border:1px solid #94a3b8; border-radius:8px; font-size:15px; box-sizing:border-box; background:#fff; }
.custom-contact-box input[type="button"] { background:#0284c7; color:#fff; border:none; padding:12px 24px; border-radius:8px; font-size:15px; font-weight:700; cursor:pointer; margin-top:14px; width:100%; }
.custom-contact-box input[type="button"]:hover { background:#0369a1; }
</style>
<p>Have a question, feedback, or business inquiry? Fill out the form below and we will get back to you within 24–48 business hours:</p>
<div class="custom-contact-box">
<form name="contact-form">
<label for="ContactForm1_contact-form-name">Your Name:</label>
<input id="ContactForm1_contact-form-name" name="name" type="text" placeholder="Enter your full name" value="" />
<label for="ContactForm1_contact-form-email">Your Email Address *:</label>
<input id="ContactForm1_contact-form-email" name="email" type="text" placeholder="Enter your active email address" value="" />
<label for="ContactForm1_contact-form-email-message">Your Message *:</label>
<textarea id="ContactForm1_contact-form-email-message" name="email-message" rows="5" placeholder="Write your question or message here..."></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
<div style="margin-top:10px; text-align:center;">
<div id="ContactForm1_contact-form-error-message"></div>
<div id="ContactForm1_contact-form-success-message"></div>
</div>
</form>
</div>
4. Method 2: Create a 100% Spam-Free Contact Page Using Google Forms
If you want extra fields (such as a Subject Dropdown, WhatsApp Number, or Screenshot Attachment) or if your Blogger theme does not use the standard Contact widget, Google Forms is the most reliable alternative:
- Create Your Form: Visit forms.google.com, click on the Contact Information template (or Blank Form), and add 3 essential fields: Full Name (Short answer), Email Address (Short answer - Required), and Message / Query (Paragraph - Required).
- Turn On Email Notifications for New Responses: Switch to the Responses tab at the top of Google Forms → click the 3-dot menu icon (⋮) → tick "Get email notifications for new responses" so Google alerts you every time someone fills out your form.
- Copy the HTML Embed Code: Click the Send button (top-right corner) → select the `< >` (Embed HTML) tab → set width to `100%` (or `640px`) and click Copy.
- Paste into Blogger Page: Go to Blogger Dashboard → Pages → New Page, title it Contact Us, switch to HTML View, paste the `iframe` code, and click Publish!
5. How to Configure Page SEO Settings & Link It in Your Navigation Menu
Before publishing your Contact Us page, configure the right-hand Page Settings sidebar inside Blogger so Google crawlers can index it properly:
- Reader Comments → Do Not Allow (Hide existing): Disable comments on legal and static pages (About, Contact, Privacy Policy, Disclaimer) so your Contact page looks like a clean official portal rather than a discussion thread.
- Custom Robots Tags → Default (Allow Indexing): Never tick `noindex` on your Contact Us page—let Google’s AdSense review bot crawl and verify the page freely.
- Add a 150-Character Search Description: Write a clear summary such as: "Contact the editorial team at Singh Tech Hub for technical questions, feedback, or business inquiries."
- Add to Top Menu & Footer: Open your published Contact Us page, copy its URL (e.g., `/p/contact-us.html`), go to Blogger → Layout → Pages / LinkList Gadget, and add the link so it is visible on every page of your website!
6. Troubleshooting: Why Blogger Contact Form Messages Are Not Arriving
If you tested your Blogger Contact Form and the message did not arrive in your inbox, check these three common causes:
| Problem | Why It Happens | Quick Solution |
|---|---|---|
| "Send" Button Does Nothing When Clicked | The official Blogger Contact Form widget is missing from Layout, so Blogger’s JavaScript file is not active. | Go to Layout → Sidebar → Add a Gadget → Contact Form and save it. |
| Form Says "Message Sent", But No Email in Inbox | Emails from `noreply@blogger.com` sometimes land in the Gmail Spam or Promotions/Updates tab. | Search `noreply@blogger.com` in your Gmail, open the message, and click "Not Spam". |
| Receiving to an Old Email ID | Blogger sends Contact Form messages to the email address linked to your Blogger User Profile. | Go to Blogger Settings → General → User Profile and verify your active primary Gmail address. |
7. Frequently Asked Questions (FAQs)
Q1. Why do I need a Contact Us page in Blogger?
A Contact Us page allows visitors and advertisers to communicate with you directly. It establishes transparency, improves user experience, and is a core requirement when applying for Google AdSense approval.
Q2. Is creating a Contact Us page in Blogger completely free?
Yes! Both methods shared in this guide—the native Blogger Contact Form HTML code and Google Forms—are 100% free and do not require any paid third-party subscriptions.
Q3. Do I need advanced coding skills to add the Contact Form?
No coding knowledge is required. Simply click the "Copy HTML Code" button in Method 1 above, paste it into the HTML View of a new Blogger Page, and click Publish.
Q4. Should I disable comments on my Contact Us page?
Yes, disabling reader comments under Page Settings → Options → Do not allow keeps your Contact Us page clean, professional, and free from public comment spam.
8. Conclusion & Official Community Links
Setting up a responsive, user-friendly Contact Us page in Blogger takes less than 5 minutes, yet it plays a massive role in building long-term reader trust and passing Google AdSense quality reviews. Choose Method 1 for a fast native look or Method 2 for a customizable Google Form, test the form once after publishing, and link it clearly in your site’s header and footer!
📺 Subscribe to Singh Tech (ST) for More Blogging & Tech Tutorials!
Don’t forget to share this guide with fellow bloggers! For practical video walkthroughs, subscribe to our official YouTube channel:
▶ Subscribe Singh Tech (ST) on YouTube