How To Create A Contact Us Page For Blogger Blogspot

0
Contact Us Page is very important page for your blogger blogspot. It helps ursers/visitors to contact blog author/admin and helps to create a community gradually. Moreover the search engine bots give preferences to some mandatory pages, yes the contact us page is one of them. Reportedly Google announced their Contact Form Widget to their free blogging platform Blogger Blogspot But the problem is you can add this widget to the sidebar of your blog but can’t use it as a contact us form page.

contact us page in blogger blogspot, contact form, contact us page, blogger

You can add contact us page in Blogger Blogspot. Want to know – how to create a contact us page in Blogger? It is very simple and no technical expertise is required at all. Just follow these steps given below.

Step1. Add Contact form Widget to Sidebar

To activate the contact form/us functionalities you must have (note: Must Have) to add a contact form widget. How To Add Contact Form Widget In Blogger Blogspot

1. Go to Blogger Dashboard > Select your blog > Layout > Sidebar > Add a Widget/Gadget.

2. A new window will appear then select the "Contact Form" widget.

3. Now simply check your website Sidebar you found a contact form. Now your blog visitors will be able to contact with you through the contact form and the messages will received in your Gmail Account.

Step2. Hiding Contact Form Widget From Blogger Sidebar

We need to hide the contact form widget from Blogger Sidebar using CSS code. You need to follow the steps to hide the contact form gadget from the blogspot sidebar.

1. Go to Theme > Click on the three vertical dots > Edit HTML.

2. Search for the ]]></b:skin>

3. Copy and Paste the following CSS code just above/before it.

div#ContactForm1{display: none !important;}

4. Now, click the floppy icon to Save Changes.
After completing all the steps. Your contact form will be present in the sidebar but will not be visible to the blog visitors.

Step3. How To Add Contact Us Page In Blogger Blogspot?

Now create a new page from blogger blogspot dashboard named contact us. To do this

1. Go to Blogger Dashboard > Pages.

2. Click on + NEW PAGE (Not a Post).

3. Add Page Title "Contact Us".

4. Click on "Do not Allow Comments".

5. Switch to HTML View and Paste the following code.
Code
<style>
.contact-form-name, 
.contact-form-email, 
.contact-form-email-message {
    max-width: 100%;
} 
input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
input[type=submit]:hover {
    background-color: #45a049;
}
.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
</style>

        <div style="padding: 30px;" class="form">
            <form name="contact-form">
                <p>Name</p>
                <input name="name" class="contact-form-name" id="ContactForm2_contact-form-name" type="text" size="30" value="">
                <p>Email</p>
                <input name="email" class="contact-form-email" id="ContactForm2_contact-form-email" type="text" size="30" value="">
                <p>Message</p>
                <textarea name="email-message" class="contact-form-email-message" id="ContactForm2_contact-form-email-message" rows="5" cols="25"></textarea>
                <p></p>
                <input class="contact-form-button contact-form-button-submit" id="ContactForm2_contact-form-submit" type="button" value="Send">
                <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>
Check the following screenshot:-
how to create contact us page for blogger, how to add contact us page in blogger, contact form, contact form widget

6. If the CSS style already added in your theme. Remove CSS from <style> to </style> from the above code snippet..

7. Now Click on Update to Publish Contact Us Page That's it! Your done...

It is a stylish contact us page for Blogger Blogspot. Open the page in your web browser and check page working correctly and users can send you messages.

Conclusion:
In this article, we understood How To Create A Contact Us Page For Blogger Blogspot. I hope you liked post. In case of any doubt feel free to ask in the comment section or contact us. Thank You!

You might also like: How To Add Contact Form Widget In Blogger Blogspot
How To Change Blogger Contact Form Email | Blogger Contact Email
How To Add Hreflang (Language) Tags In Blogger
Tags

Post a Comment

0 Comments
Post a Comment (0)
To Top