Adding a custom HTML “Contact Us” page to your Blogger site is a great way to personalize your blog and give your readers an easy way to reach out to you. If you already have the HTML code for your Contact Us page, here’s a step-by-step guide on how to upload it to Blogger.

---

Step 1: Sign In to Your Blogger Account

1. Open Blogger in your browser.
2. Log in using your Google account credentials.
3. Select the blog where you want to add the Contact Us page.

---

Step 2: Create a New Page

1. On the Blogger dashboard, click on “Pages” from the left-hand menu.
2. Click the “+ New Page” button to create a new page.
3. Name the page “Contact Us” or any title you prefer.

---

Step 3: Add Your HTML Code

1. In the page editor, switch from the “Compose” view to the “HTML” view by clicking the HTML button on the editor toolbar.
2. Paste your Contact Us page HTML code into the editor.
3. Once pasted, click “Publish” to save the page.

---

Step 4: Test Your Contact Us Page

1. Open your blog and navigate to the “Contact Us” page to ensure the design and functionality are working as expected.
2. If there are issues with layout or styling, revisit the HTML code and make any necessary adjustments.

---

Step 5: Add the Page to Your Navigation Menu

To make your “Contact Us” page easily accessible:

1. Go to the “Layout” section in your Blogger dashboard.
2. Locate your navigation menu gadget (usually called “Pages” or “Menu”).
3. Click “Edit” on the gadget.
4. Select the checkbox next to your new “Contact Us” page.
5. Click “Save” and then “Save Arrangement” at the top.

---

Pro Tip: Optimize Your Contact Form

• Add Styling: Ensure your contact page matches the overall theme of your blog by including inline CSS or linking to your CSS file within the HTML.
• Test the Form: If your form uses a backend script to process submissions, test it thoroughly to ensure it works.
• Add Captcha: To prevent spam, integrate a Captcha like Google reCAPTCHA in your form.

---

Conclusion

Uploading a custom HTML Contact Us page to Blogger is simple and allows you to create a professional-looking contact page. By following these steps, your subscribers and readers will have an easy way to get in touch with you.

If you found this guide helpful, don’t forget to share it with your fellow bloggers! Let me know in the comments if you have any questions or need further assistance.

Contact Us Page Code

<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="text" 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>