Create a Contact Us Page in Blogger | Easy Custom Form Guide 2025

Learn how to create a professional Contact Us page in Blogger with a custom form and widget. Follow our easy 2025 step-by-step guide for beginners.
Create a Contact Us Page in Blogger with a Custom Form

An essential part of any blog or website is the Contact Us page. This page allows visitors to reach out with questions, suggestions, partnership requests, or different messages. For those using Blogger, creating an easy-to-use and professional Contact Us page can significantly boost engagement and communication from readers.

Create a Contact Us Page in Blogger | Easy Custom Form Guide 2025


 The importance of having contact us page on blogger blog

Shields your email from spam bots. By utilizing a form,your email address remain hidden from automated programs that hunt fro spam targets.

Establishes trust and reliability. When you provide an Official way for visitors to contact you. They feel more assured about reaching out.

Enhance the user experience. Reader find it simple to give feedback, report problems, or ask questions.

Contact form in Blogger

In blogger you can add a Contact form widget  to your sidebar or footer through Layout setting. While this option is fast, the widget is visible on all pages and lack a polished appearance. For more unique Contact Us page, you can create a separate dedicated page featuring a custom contact form.

Step 1: Setup a Unique Contact Us Page with a Form

Use HTML code provided below to create a sleek, static contact form. This form will gather important information including name, email, and message from your visitors.

The following code will help you to create a well designed statics contact form. To ensure the form work correctly, continue following guide.

 


<h2>We'll happy to help you, fill form given below to contact with us.</h2>
<p>We'll like to hear from you. It feels good when you send message to us. If any issue related to broken link of any document or book. We updated link of books/newspaper that are already on internet .. If any issue related to books copyright then please mail us on Email admin@iascgl.com</p>
<div style="text-align: center;">
    <p>Thanks And Regards iascgl.com Team admin@iascgl.com Delhi India</p>
</div>
<div style="text-align: center;color: green;">
    You can reach us by filling this form
</div>
<div class="contact-form-widget">
    <div class="form">
        <form name="contact-form">
            <p></p>
            Name
            <br />
            <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
            <p></p>
            Email
            <span style="font-weight: bolder;">*</span>
            <br />
            <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="email" value="" />
            <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" type="button" value="Send" />
            <p></p>
            <div style="max-width: 222px; text-align: center; 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>
    </div>
</div>
  

Instruction For Use

In your blogger dashboard start by making a new page. Then, switch to HTML mode and insert this code before hitting publish. This action will establish a set layout for your form. Following this, you will need to include various features in the form, as detailed bellow.

Step 2: Add the Contact Form Widget for Better Usability

Blogger provides a contact form widget in the backend to make sure forms are working as they should. Following recent updates for improves session security, using this widget has become essential for the contact form to operate.

Here's how you can add it.

Go to blogger layout and select Layout.

TML code for custom Contact Us form in Blogger
Then


Adding Contact Form widget in Blogger dashboard layout

Save the changes to your layout.

Note. This widget will automatically show up on every page by default.

 Display the Contact form Exclusively on the Contact us Page



CSS code to hide contact form except on Contact Us page


if you want to conceal the contact form from every page apart from your Contact us page:

Navigate to theme > Customize >Advanced > Add CSS or, modify  Edit HTML directly.

Insert the following CSS code to prior to the tag:  </head>


<style>
#ContactForm1{display:none;}
</style>
  

This CSS hides the widget everywhere except on your Contact page, where it becomes visible.


External resources you might find helpful:

Official Blogger Contact Form Help

Google Rich Results Test Tool

Google FAQ Schema Guide

Need support or want to collaborate? Use the form below — we usually reply within 24 hours! 

If you didn’t find what you’re looking for, visit our Help Center or send us a message directly.

About the author

Laraib Hassan
I am Laraib Hassan a student of learning of Finance , Economics etc.