How to create a Professional Contact Us page on Blogger

This article will discuss creating a Contact Us page for your Blogger blog with a one-click form. The tool provided here will create a Contact Us page with one click. You must copy the HTML code and paste it into the Contact Us page of your Blogger blog.

The blog must have a Contact Us page. It helps users contact the site administrator. There are several ways to create a Contact Us page for a Blogger blog. This post will help you prepare and add a Contact Us page to a Blogger blog with a ready-made, professional code. It’s easy to add HTML to a Contact Us page. There is a way to get a free contact form for Blogger on your blog’s sidebar. Let’s check out how to add a Contact Us page to your Blogger blog. This Blogger contact form works in all premium or free templates.

Create a Contact Us page on Blogger.

You can add a Contact Us page to your Blogger blog. It is effortless and does not require technical experience. Just follow the steps given below.

• Go to your Blogger blog control panel, select Blog, and then Click Layout
• Add the contact form Widget to your blog sidebar

Note: The contact form must be added to your blog for this contact form to work on the Contact Us page in your Blogger blog. If you do not add a contact form and select the Show Contact Form check box, the contact form will not work.

Hide the contact form in the blog sidebar.

We will hide the contact form in the sidebar of our Blogger blog using CSS code. You must follow the steps to hide the contact form widget from the blog sidebar.

Go to Appearance > Click the arrow next to Customize > Edit HTML
Find the following code: ]]></b:skin> Paste the following CSS code directly above it.

div#ContactForm1{display: none !important;}

Now, click on the Save icon to save the changes.

After completing all the steps mentioned in the third point, your contact form will be in the sidebar but not visible to the blog visitor.
Next, go to the Pages section. Click on the Create New Page icon. Paste the following HTML code (for the Contact Us page creation form in Blogger) and publish the page. It is an elegant contact form for Blogger. Check the demo for the contact form template Design 1.

<style>
.contact-form-widget {max-width: 500px;}
.page-contact-form input,.page-contact-form textarea {width: 100%;max-width: 100%;margin-bottom: 10px; padding: 20px;}
.page-contact-form input.contact-form-button.contact-form-button-submit {padding-top: 10px;
    padding-bottom: 35px; background: #ea6337; color: #fff;border: none;font-size: 20px;
    font-family: cairo;border-radius: 10px;}
.page-contact-form input.contact-form-button.contact-form-button-submit:hover {background: none;color: #000; border:1px solid #ea6337}
</style>
<div class="contact-form-widget page-contact-form">
<div class="form">
<form name="contact-form">
Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
Email Address: <span id="required">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Description: <span id="required">*</span><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br/>
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
</div>

Contact Forum Design 2 Here

<div class="hero">
<form>
<div class="input-group">
<input type="text" id="name" required>
<label for="name">Name</label>
</div>
<div class="input-group">
<input type="email" id="email" required>
<label for="email">Email Address</label>
</div>
<div class="input-group">
<textarea id="message"  rows="8" required></textarea>
<label for="message">Description</label>
</div>
<button type="submit">Send</button>
<style>
.hero{width: 100%; display: flex; justify-content: center; align-items: center; margin: 30px 0;}
form{width: 90%; max-width: 600px;}
.input-group{margin-bottom: 30px; position: relative;}
input, textarea{width: 100%; padding: 10px; outline: 0; border: 1px solid #ccc; color: #000; font-size: 15px;}
label{height: 100%; position: absolute; left: 0; top: 0; padding: 10px; color:#000; cursor: text; transition: 0.2s;}
button{padding: 10px 0; color: #fff; outline: none; background: tomato; border:1px solid tomato; width: 100%; cursor: pointer; text-transform:uppercase;}
button:hover{background: transparent; border: 1px solid tomato; color: #000;}
input:focus~label,
input:valid~label,
textarea:focus~label,
textarea:valid~label
{top: -35px; font-size: 14px;}
</style>

Open the page in your web browser and check if the page is working correctly, and users can send messages to you. Go to the Pages section and click the eye icon to view the Contact Us page.

In this article, we learned how to add a Contact Us page to a Blogger blog with one click using ready-made HTML code. I hope you liked this article. Feel free to ask in the comment section below if there is any issue. Thank you