How to Create Contact Page in Your Blogger Website ?

Contect Us Page

সর্বপ্রথমে আমাদের একটা Contect Us Page Create করতে হবে । Contect Us Page Create করার জন্য নিচের HTML Code এবং CSS Code ওই Page এর মধ্যে Past করতে হবে । প্রথমে HTML Code টি Past করুন । তারপর এর নিচে CSS Code টি Past করুন ।

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

yourmail@email.com এর জায়গায় । আপনার Email Address টি Input করুন ।যে Email এ আপনি Visitor এর Message পেতে চান ।

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

Thank You Page

এরপর আপনাকে Thank You নামে আর একটা Page Create করতে হবে । Thank You Page Create করার জন্য নিচের HTML Code এবং CSS Code ওই Page এর মধ্যে Past করতে হবে । প্রথমে HTML Code টি Past করুন । তারপর এর নিচে CSS Code টি Past করুন ।

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

Link to Contect Us Page and Thank You Page

এখন আপনাকে Thank You Page এর url টা Contact us Page এ Link করতে হবে । কিভাবে Link করব ।চলুন দেখে নিই । সর্বপ্রথমে Thank You Page এর url টি Copy করে নিন । AndThan Contect Us Page এ গিয়ে https://www.mofivai.com/p/thank-you.html এর জায়গায় Thank You Page এর url টি Past করুন ।

Contact us Form Activation

ব্যাস, আপনার কাজ শেষ ।এখন আপনাকে Contact us Form টাকে Activation করতে হবে ।এর জন্য Contact Us Form টিকে Open করুন । Data Fill করে Send এ ক্লিক করুন । আপনি Contact Us Form এ যে Email টা দিয়েছিলেন ।ওই Email এ Activation এর Link যাবে । আপনি Activation Form এ ক্লিক করে Contact Us Form টিকে Activation করুন ।

Email id Protect

আপনাকে আর একটা কাজ করতে হবে । আপনার Email Id টা Visitor যাতে দেখতে না পায় । এর জন্য আপনাকে ওই Email id টা Protect করতে হবে । এরজন্য আপনি আপনার Activation এর Email টি Open করুন । ওই Email এ একটা naked email Address এর Code পেয়ে যাবেন ।ওই Code টি আপনি Copy করুন । এবং Contact us Page এর মধ্যে থাকা আপনার email id ইর জায়গায় এই Copy করা Code টি Replace করুন ।

Go to Link