How to Create a Contact Page in My Blogger Website

  Hello blogging world, established in shimla's communication with you audience is paramount. A contact form service as a independent tool, visitor easily contact with you, provide valuable feedback, ask any questions or any potential collaborations. This article for integrating contact form into your blogger website using fromsubmit.co . Your blogger website and ensure a smooth flow of message from your readers. 

We will teach how to create a contact page in your blogger website. So enjoy this article for you blogger websites contact us page.

Add the form to your blogger website

1. Firstly, you can login your blogger account and go to websites dashboard.
2. Then navigate to the page where you want to add the contact form or click Create new page 
3. Then Editor, Switch to html.
4. Copy this html code and past it into blogger page section

.html

dubble click to copy

    <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.plplab.com/p/thank-you.html"
    />
    <button class="my-contact-form-btn" type="submit">Send</button>
  </form>
</div>

Replace this email admin@gmail.com with your email. And change this URL https//www.plplab.com/thank-you.html with your page URL. Below I told you have to create this page.

Copy this CSS and past in html editor 

.css

dubble click to copy

    
<Style>
.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);
}
</Style>
    

After all just publish this page.

Now create thank you! page

If you didn't get my point. Just follow those step.

1. Firstly create new page with the title" Thank You"
2. Copy this code and past in html editor.
3. Publish this page.

.html

dubble click to copy

<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>
    

Copy this CSS and pest it below the HTML

.css

dubble click to copy

 @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);
  }
}
    

Copy this page URL and pest it inside the previous HTML code which I give you . Didn't forget to change you homepage URL inside HTML code

Page test

Open your contact us page. Fill up the form and submit. You will get an activation email on your email address with you give inside your contact form. Just click active it on your mail. Now you contact from is ready to grave data.

What's the video if you get any problem