How to Create a Contact Page in Blogger or Blogspot

A contact page is an important page in Blogger or Blogspot, which may help in establishing a professional online presence and communicating with your audience. Be it a personal blog or a business website, a contact page plays the role of a bridge between you and your visitors, through which they can get in touch with you for inquiries, feedback, or collaboration opportunities. In this post, we will show you how to create a contact page in Blogger or Blogspot, its benefits, and how to optimize it for better engagement.

(toc)

Why a Contact Page is Important

• Professional Appearance: Adds credibility to your blog.
• Audience Engagement: Encourages direct interaction with visitors.
• Opportunities for Collaboration: Attracts business inquiries and partnerships.
• Feedback Collection: Helps improve your content based on reader input.

Step-by-Step Guide to Create a Contact Page

Log in to Your Blogger Dashboard: 

• Go to www.blogger.com and log in. 
• Select the blog in which you want to create your contact page. 

Create a New Page: 

• In the left sidebar, click on Pages; 
• click the New Page button. 

Add a Title for Your Page: 

• Use something like Contact Us or Get in Touch. 

Method 01 (blogger default):

• Blogger does not have any in-built contact page except contact widget. But you can use the widget code to the contact page which is perfect for basic contact us page.
• Add the "Contact Form" widget in the sidebar and save it. 

• Visit the website and get the code of the widget by "Inspect Element"

• Grab the code by right click "Edit as HTML"

<div class="form">

<form name="contact-form">

<p></p>

Name

<br>

<input class="contact-form-name" id="ContactForm2_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="ContactForm2_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="ContactForm2_contact-form-email-message" name="email-message" rows="5"></textarea>

<p></p>

<input class="contact-form-button contact-form-button-submit" id="ContactForm2_contact-form-submit" type="button" value="Send">

<p></p>

<div style="text-align: center; max-width: 222px; width: 100%">

<p class="contact-form-error-message" id="ContactForm2_contact-form-error-message"></p>

<p class="contact-form-success-message" id="ContactForm2_contact-form-success-message"></p>

</div>

</form>

</div>

• Copy the code as yours and paste into the contact page by enabling HTML View
• Last of all hide the form from sidebar by adding "display: none" using HTML/JavaScript widget 
• Here is the code:

<style>

#ContactForm2{display: none;}

</style>

Method 02 (FormSpree):

• Signup and grab your ID and just copy this below code and place it into the page editor: 

<form action="https://formspree.io/f/yourID" method="POST">

    <label>Your Name:</label><br>

    <input type="text" name="name" required><br>

    <label>Your Email:</label><br>

    <input type="email" name="_replyto" required><br>

    <label>Your Message:</label><br>

    <textarea name="message" required></textarea><br>

    <button type="submit">Send</button>

</form>

Replace "yourID" with your ID and customize the design.

Method 03 (ElasticMail):

You'll get sample contact form in the bottom of the page of my PortFolio

ElasticMail is complete free upto 1000 contacts. You can also use it as SMTP server and 100 emails per day for free. Here is sample code:

<form onsubmit="sendMail(); reset(); return false">

                    <div class="form-group mb-3">

                        <label for="name">Name</label>

                        <input type="text" class="form-control" id="name" name="name" required>

                    </div>

                    <div class="form-group mb-3">

                        <label for="email">Email</label>

                        <input type="email" class="form-control" id="email" name="email" required>

                    </div>

                    <div class="form-group mb-3">

                        <label for="message">Message</label>

                        <textarea class="form-control" id="message" name="message" rows="3" required></textarea>

                    </div>

                    <button type="submit" class="btn btn-custom">Submit</button>

                </form>

Use Blogger's editor to style the page.

Add a background, font styles, or a simple thank-you note.

Publish the Page

• Once satisfied, click Publish.
• The page is now live, and you can link it to your navigation menu.

Benefits of a Contact Page

Improved User Experience

• Visitors can contact you directly without needing to search for your details.

Spam Control

• Using a form, instead of showing your e-mail, reduces spam. 

Lead Generation

• This encourages inquiries from would-be collaborators or advertisers. 

Feedback Opportunities

• A surefire way to get feedback for the betterment of your blog. 

Optimizing Your Contact Page 

Add a Map or Location (Optional)

• If you happen to have a physical address, embed a Google Map.
• This builds trust and adds authenticity. 

SEO Optimization

• Use keywords like Blogger Contact Page, Create Blogspot Contact Form, and Contact Form for Blogspot.
• Ensure meta tags and descriptions include these keywords.

Mobile Responsiveness

• Ensure the page is tested on mobile devices for usability.

Thank-You Page Redirection

• After submission, users should be taken to a thank-you page or shown a confirmation message.

Common Mistakes to Avoid

Not Testing the Form

• Always send a test message to verify it works.

Overcomplicated Forms

• Keep the form simple for more conversions.

Lack of Privacy Policy Link

• Include a link to your privacy policy to assure users that their data is secure.

Conclusion

Creating a contact page on Blogger or Blogspot is an easy and efficient method of upgrading your blog with increased functionality and interactivity. With a contact page, you are able to display professionalism, receive valuable feedback, and even open up avenues for opportunities. Follow these steps to design and optimize your contact page, and watch your interactions grow!