5 Awesome Contact Us Page Design For Blogger - Copy HTML Code

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 5 Awesome Contact Us Page Design For Blogger - Copy HTML Code

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 ie. Contact Us
  4. For writing anything in blogger we have two options ie 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

Contact Us Page Design-1

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.

Download Your HTML Code Click Here

#2. Rainbow Divider CSS Custom Contact Form

Contact Us Page Design-2

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.

Download Your HTML Code Click Here

#3. Custom Contact Us Form With CSS Ribbon

Contact Us Page Design-3

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.

Download Your HTML Code Click Here

#4. Modern custom contact us page

Contact Us Page Design-4

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.

Download Your HTML Code Click Here

#5. Contact Us Form With Speech Bubble

Contact Us Page Design-5

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.

Download Your HTML Code Click Here

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.


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

Karuna Singh

Greetings to everyone. I am Karuna Singh, I am a writer and blogger since 2018. I have written 250+ articles and generated targeted traffic. Through this blog blogEarns, I want to help many fellow bloggers at every stage of their blogging journey and create a passive income stream from their blog.


Thank you for your valuable comments. We like to hear from you.

  1. i did use your 1st contact us page
    but email not coming in my emaild id

    1. Hello @Mr. Hunter
      This is not possible, we publish every post after 100% testing. After receiving your comment we checked it once again and it is working well. Check it out here Contact Us Form 1. If it is not working on your blog it could be because of two reasons – either you are using multiple contact forms or there are some glitches in your theme.

  2. how to work send button ?? how it link my email address cant understand? reply not coming on email id.

  3. Thanks So Much Karuna Singh Your Code is 100% Working...

  4. Good work thankyou

  5. This comment has been removed by the author.

  6. 2. Rainbow Divider CSS Custom Contact Form . Is main Email kaha add kare

  7. The Form no 5 is well worked but the design is little manipulated when I use in my page

  8. I like your work Miss Karuna, The form no 2 is quite impressive. I want extra field in this form (lik indian state drop down list). How to do that. Please

Post a Comment
Previous Post Next Post