5 Awesome Contact Us Page Design for Blogger – Copy HTML Code

Contact Us Page

Hello friends, welcome to Blogearns. This post is the second version of the Contact Us Page Generator post. In my previous post, I had prepared a tool to create a Contact Us page, where users can contact the site owner by knowing the site owner’s email id and WhatsApp number. But many of my users requested me to provide a contact us page in form format with input fields like Name, Email, and Message.

So in this post, I am going to provide you guys 5 different Contact Us page designs with HTML code. You just see all the designs of the Contact Us page and download the HTML code of that Contact Page. After you download a file, open that file in a text editor, copy the entire HTML code, and paste it into the code section of your Contact Us page. That’s it, your Contact Us page is ready to be published. Publish the Contact Us page and check functionality in the web browser. Enjoy receiving emails from your site visitors directly through your site.

Do you know why we need the contact us page?

The reason is quite simple, we often depend on third-party service providers, like QuickBooks alternatives it do, but now you should use the standard official contact form for the following reasons:

• Receive emails straight in your inbox: Once the user clicks on the send button after filling in the fields like name, email and message you will receive the user’s message directly to your inbox.
• Reliable: This is Blogger’s official contact form, therefore it’s a more secure and trustworthy method to get in touch than utilizing third-party services.
• Business Proposals: Your visitors can use the contact form to ask specific inquiries about a blog you’re writing or your company in general. If you’re offering a specific product or service, this may be an excellent method to get leads and possibly convert them.
• Feedback: Visitors can leave comments on your blog simply by filling out your contact form. Based on the opinion of visitors, you can decide what to write next or what areas to fix.

Advertisement

How to add a Contact Us Form to your Blog?

Adding Contact, Us Form to Blogger is very easy, you just need to follow the following few easy steps:

1. Log on to your Blogger account and select the blog you want to add contact us page.
2. Scroll down to the left menu and find option pages click on that and again click on the new page option available at the top left corner.
3. Give the title of this page i.e. Contact Us
4. For writing anything in blogger we have two options i.e. we can design or create our post and page in either compose view or HTML view.
5. Select the HTML view
6. Download your desired contact us page HTML code from the below links and open the file in the text editor. Copy the entire code and paste it into your blogger’s HTML view editor.
7. Publish the page and try it in your browser and start receiving your site visitors directly in your mailbox through your site contact form.

Contact Us Page Design

Here I am providing you the best 5 custom blogger’s contact form design. Check out each Contact Us page design one by one and download the HTML code of that contact us page’s design you like the most.

#1. Simple contact us page design

This is a very basic page with input fields Name, Email, and Message with a submit button. Download the Contact Us Page HTML code below and paste it into your Blogger’s Contact Us Page HTML code section.

#2. Rainbow Divider CSS Custom Contact Form

In this form, you will get the effect of the rainbow with CSS. It is a cool design but you can further customize this if you want. This form also contains standard input fields followed by Blogger like Name, Email, and Message. I am sure you will love to use this custom contact us form.

#3. Custom Contact Us Form With CSS Ribbon

This is a very trendy Contact Us page with special CSS effects. It will add beauty to your contact us page, if its color does not match your website’s contact page then you can customize the CSS to match the design and color of your website.

#4. Modern custom contact us page

This is a very standard Contact Us page with icons in the input fields. You will definitely love using this custom contact us form in your blog. This custom contact us form will surprise your visitors. I strongly recommend you to use this form for your site contact us page.

#5. Contact Us Form With Speech Bubble

This is one of the best Stylish Custom Us Page Designs. Many of our users use this contact page on their blogs and it really is a great look. I strongly recommend you to use this form as your second choice as it will fit any type of website design.

After you’ve added the code, go to the top right and click “Publish.” You may now see the Blogger contact form on your static website in real-time. You can send a test message to ensure that everything is working properly. The message should be in your inbox in a matter of seconds; simply check the email address associated with your Blogger account.

Recomendation: A web design invoice template provides a structured format for billing clients for your web design services. It streamlines the process by including essential elements like your business information, client details, a unique invoice number, and an itemized breakdown of services rendered. This breakdown should detail the specific tasks completed, hourly rates (if applicable), and any associated costs. The template should also clearly state the total amount due, payment terms, and your preferred payment methods. Having a professional invoice template ensures clarity, efficiency, and timely client payments.

Conclusion:

These five custom Contact Us pages are awesome in their own right, you can choose from the above five designs. I provided the HTML code of each and described the steps required to add a custom Contact Us page in Blogger. I hope this post will help us a lot to make our amazing and unique contact page. If you have any query regarding this then feel free to write us at karunasingh@blogearns.com