Subscribe Youtube Channel Muxic 0.9 ♪ Contact Us Subscribe!

How to Create a Contact Page in Your Blogger site

Learn the simple steps to design a contact page on your Blogger site & enhance visitor engagement! Quick, easy tutorial for a professional touch.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Contact Page in Blogger

In the realm of blogging, it's critical to build a smooth relationship with your readers. An essential tool that lets visitors get in touch with you, offer insightful criticism, pose inquiries, and discuss possible joint ventures is a contact form. This post will guide you through the process of using FormSubmit.co, an easy-to-use and dependable platform that makes form submissions simpler, to integrate a contact form into your Blogger website. You can easily add a contact form to your Blogger website and guarantee that reader messages are sent through it by using FormSubmit.co.

Active Contact Us Form Source Code 

<div class="container">
  <form target="_blank" action="https://formsubmit.co/youremail@gmail.com" method="POST">
    <div class="form-group">
      <div class="form-row">
        <div class="col">
          <input type="text" name="name" class="form-control" placeholder="Full Name" required>
        </div>
        <div class="col">
          <input type="email" name="email" class="form-control" placeholder="Email Address" required>
        </div>
      </div>
    </div>
    <div class="form-group">
      <textarea placeholder="Your Message" class="form-control" name="message" rows="10" required></textarea>
    </div>
    <button type="submit" class="btn btn-lg btn-dark btn-block">Submit Form</button>
  </form>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

Step 1Open your blogger dashboard
Step 2: Log in to your Blogger account and go to your website's dashboard.
Step 3: Navigate to the page where you want to add the contact form or create a new page.
Step 4: In the Blogger editor, switch to the HTML mode.
Step 5: Copy the below HTML code and paste it into the HTML editor.
<div class="my-contact-form">
  <form
    action="https://formsubmit.co/abdullahdcurz@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.abdullahdcurz.blogspot.com/p/thank-you.html"
    />
    <button class="my-contact-form-btn" type="submit">Send</button>
  </form>
</div>

Replace this email address, abdullahdcurz@email.com, with your own. Additionally, replace this URL with the URL of your page at https://www.abdullahdcurz.blogspot.com/p/thank-you.html. I've provided instructions for creating this page below.

After that just publish this page.
.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.

Step 6: Now create a new page and give the title "Thank You".
Step 7: After that copy these below HTML and CSS and paste it inside code editor.
Step 8: Now, pubslish this page.
Step 9: Copy this page URL and paste it inside the previous HTML code which I give you erlier.
Page Testing!
<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>
<style>
@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);
  }
}
</style>

Dont Forget to change your homepage URL inside HTML code.

Open your contact form. Fill up that form and submit. You will get an activation email on your email which you have given inside your contact form. Just activate it. Hurray! Now your contact from is ready to grab data.

About the Author

Welcome to my Site! Hi, this is Mr.Abdullah. If you have any questions related to this blog you can find us here on Instagram @abdullahdcurz Or, you can mail us here: abdullahdcurz@mail.com. Thank you.

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.