How to Create a Contact Us Page in Your Blogger Website

Hello everyone, welcome toBlogWithPervaiz! In this article, we’re going to talk about how to create a proper contact page in Blogger.

In the world of blogging, staying connected with your audience is extremely important. A contact form isn’t just a feature—it’s a bridge that allows your readers to reach out, share feedback, ask questions, or even discuss collaboration opportunities. Having an easy and reliable way for people to contact you helps build trust and keeps your blog more interactive and engaging.

Today, I’ll walk you through how to add a contact form to your Blogger site using FormSubmit.co. It’s a simple, user-friendly platform that lets you collect messages directly in your email without needing any complicated setup. With FormSubmit.co, you can quickly integrate a clean, functional contact form into your Blogger page and make communication with your audience smooth and effortless.

Add the form to your Blogger website

1. Log in to your Blogger account and go to your website's dashboard.
2. Navigate to the page where you want to add the contact form or create a new page.
3. In the Blogger editor, switch to the HTML mode.
4. Copy the below HTML code and paste it into the HTML editor.

<div class="my-contact-form">
  <form
    action="https://formsubmit.co/youremail@email.com"
    method="POST"
    id="contact-form"
  >
    <div>
      <label class="my-contact-form-label" for="name">Name:</label>
      <input class="my-contact-form-input" type="text" id="name" name="name" required />
    </div>
    <div>
      <label class="my-contact-form-label" for="email">Email:</label>
      <input class="my-contact-form-input" type="email" id="email" name="email" required />
    </div>
    <div>
      <label class="my-contact-form-label" for="message">Message:</label>
      <textarea class="my-contact-form-input" id="message" name="message" required></textarea>
    </div>
    <input type="hidden" name="_captcha" value="false" />
    <input type="hidden" name="_template" value="table" />
    <input
      type="hidden"
      name="_next"
      value="https://www.example.com/p/thank-you.html"
    />
    <button class="my-contact-form-btn" type="submit">Send</button>
  </form>
</div>

Please repalce this email youremail@email.com with your email. And https://www.example.com/p/thank-you.html change this url with your page url. Below I have told you how to create this page.

Copy this CSS and Paste it below the HTML

Copy the provided CSS code, then paste it below the HTML code . After confirming the insertion, save your changes and publish the page so the styles take effect across the live contact us page immediately.

.my-contact-form{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.my-contact-form form{
  	width: 100%
}
.my-contact-form-label{
    display: block;
    font-weight: 600;
    font-size: 16px;
    color: #07074d;
    margin: 12px 0;
}
.my-contact-form-input{
    width: 100%;
    padding: 12px 0px !important;
    text-indent: 10px !important;
    border-radius: 6px !important;
    border: 1px solid #e0e0e0 !important;
    background: white !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    color: #6b7280 !important;
    outline: none !important;
    resize: none !important;
}
.my-contact-form-input:focus{
  border-color: #6a64f1 !important;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05) !important;
}
.my-contact-form-btn {
    text-align: center;
    font-size: 16px;
    border-radius: 6px;
    padding: 14px 32px;
    border: none;
    font-weight: 600;
    background-color: #6a64f1;
    color: white;
    width: 100%;
    cursor: pointer;
  	margin-top: 12px;
}
.my-contact-form-btn:hover {
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}

Now create a Thank You! Page

I know you did not get my point. Just follow these step.

1. Now create a new page and give the title "Thank You".
2. After that copy these below HTML and CSS and paste it inside code editor.
3. Now, pubslish this page.
4. Copy this page URL and paste it inside the previous HTML code which I give you erlier.

<div class="content">
  <div class="wrapper-1">
    <div class="wrapper-2">
      <h2 class="thank-you">Thank you !</h2>
      <p>Thanks for email us.<br> We will reply you very soon.</p>
      <a class="button" href="YOUR BLOG URL HERE">Go To Home</a>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
  .pTtl{
  	display:none;
  }
    .wrapper-1{
    width:100%;
    height:100vh;
    display: flex;
  flex-direction: column;
      border-radius: 15px;
  }
  .wrapper-2{
    padding :30px;
    text-align:center;
  }
  .thank-you{
      font-family: 'Kaushan Script', cursive !important;
    font-size:4em;
    letter-spacing:3px;
    color:#5892FF ;
    margin:0 !important;
    margin-bottom:20px;
  }
  @media (min-width:600px){
    .content{
    max-width:1000px;
    margin:0 auto;
  }
    .wrapper-1{
    height: initial;
    max-width:620px;
    margin:0 auto;
    margin-top:50px;
    box-shadow: 4px 8px 40px 8px rgba(88, 146, 255, 0.2);
  }
}