how to make stylish contact us page or form in Blogger

Bangla Blogger Tutorial, how to make stylish contact us page or form in Blogger, stylish contact us page or form in Blogger, Freelancer Guideline, Part Time Job Training

আপনার 'CONTACT US' পৃষ্ঠাটি আপনার ওয়েবসাইটের ভিজিটরকে আপনার গ্রাহক হিসেবে পরিণত করার ক্ষেত্রে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে । যখন তাদের একটি প্রশ্ন থাকে এবং তারা সত্যিই আপনার প্রতিষ্ঠানের একজন ব্যক্তির সাথে কথা বলতে চায় তখন তারা সেখানে যায়। সর্বোপরি, যদি কেউ আপনার পণ্য এবং পরিষেবাগুলিতে সত্যিই আগ্রহী হয় তবে সে সম্পর্কে আপনার সাথে যোগাযোগ করতে সক্ষম না হয় তবে এটি আপনার কী উপকার করবে!
আপনার সম্ভাব্য গ্রাহক ছাড়াও, আপনার 'CONTACT US' পৃষ্ঠাটি বিনিয়োগকারীদের এবং বিজ্ঞাপনদাতাদের আপনার সাথে যোগাযোগ করতে দেয় এবং আমরা সবাই জানি যে এই উভয় সত্তা যে কোন ব্যবসার সাফল্যের জন্য কতটা গুরুত্বপূর্ণ হতে পারে।

কী একটি দুর্দান্ত 'CONTACT US' পৃষ্ঠা তৈরি করে?

আপনি জানেন, সেরা 'CONTACT US' পৃষ্ঠার প্রশ্নটি খুব বিষয়গত। আমরা বলতে চাচ্ছি যে আপনার জন্য যা অসাধারণ, তা অন্যদের জন্য খারাপ বা এমনকি কুৎসিতও হতে পারে।

আপনার ব্যক্তিগত স্বাদ এবং পছন্দগুলি নয়, ব্যবহারকারীর অভিজ্ঞতা বিবেচনা করা ভাল। দয়া করে মনে রাখবেন যে একটি ভাল 'CONTACT US' পৃষ্ঠায় নিম্নলিখিত বিষয়গুলি থাকা উচিত।

এটি হোম পেজ থেকে সহজেই অ্যাক্সেসযোগ্য হতে হবে। ওয়েবসাইটের একটি বিশিষ্ট (প্রত্যাশিত) স্থানে আপনার 'CONTACT US' পৃষ্ঠার লিঙ্কটি রাখা উচিত যাতে ব্যবহারকারীরা সহজেই এটি খুঁজে পেতে পারে।

এটা বলার অপেক্ষা রাখে না যে আপনার 'CONTACT US' পৃষ্ঠাটি পরিষ্কার হওয়া উচিত এবং নকশাটি আপনার ব্র্যান্ডের চাক্ষুষ পরিচয় ইত্যাদি প্রতিফলিত করা উচিত।

প্রকৃতপক্ষে, আপনার গ্রাহকদের আপনার সাথে যোগাযোগ করার সুযোগ দেওয়ার প্রচুর উপায় রয়েছে। কিন্তু এটা মনে রাখা খুবই গুরুত্বপূর্ণ যে আজকাল আপনার গ্রাহকরা তাদের ভার্চুয়াল অভিজ্ঞতা থেকে আগের চেয়ে অনেক বেশি আশা করেন। এজন্য আপনি ব্যবহারকারীদের সাথে যেভাবে যোগাযোগ করেন তা এত গুরুত্বপূর্ণ। যে কোন জায়গায়, যেকোনো সময় উপলব্ধ থাকার মাধ্যমে আপনাকে ক্রমাগত বিকশিত হতে হবে এবং তাদের সর্বোচ্চ প্রত্যাশা পূরণ করতে হবে। 

একটি নিয়ম হিসাবে, সেরা যোগাযোগ পৃষ্ঠাগুলি নির্দিষ্ট ফাংশন সম্পাদন করে:

  • তারা ব্যাখ্যা করে যে কেন একজন দর্শনার্থী আপনার সাথে যোগাযোগ করবে এবং আপনার দর্শকদের সমস্যা সমাধানে আপনি কিভাবে সাহায্য করতে পারেন তা বর্ণনা করুন।
  • তারা একটি ইমেল এবং ফোন নম্বর অন্তর্ভুক্ত করে যাতে দর্শনার্থীরা দ্রুত প্রয়োজনীয় তথ্য খুঁজে পেতে পারে।
  • তাদের মধ্যে একটি সংক্ষিপ্ত ফর্ম রয়েছে যার ব্যবহার করে যা আপনাকে বুঝতে সাহায্য করবে কে আপনার সাথে যোগাযোগ করছে।
  • তারা আপনার ওয়েবসাইটে মানুষকে রাখার জন্য একটি কল-টু-অ্যাকশন অন্তর্ভুক্ত করে এবং যদি তারা একটি সাধারণ ফর্ম পূরণ করতে না চায় তবে তাদের অন্য বিকল্প প্রদান করে।
  • তারা প্রধান কোম্পানির ধারণা প্রদর্শন করে। সাম্প্রতিক ব্লগ পোস্টের একটি তালিকা বা কোম্পানীর নিবন্ধগুলো প্রেসে অন্তর্ভুক্ত করে এটি করা যেতে পারে।
  • টুইটার, ফেসবুক, ইনস্টাগ্রাম এবং লিঙ্কডইনের মতো আপনার সক্রিয় কর্পোরেট সোশ্যাল মিডিয়া অ্যাকাউন্টগুলির সাথে তারা যুক্ত আছেন যাতে দর্শকদের আপনার ব্যবসার সাথে জড়িত থাকার উপায় দেওয়া যায়।
  • তারা ব্যবহারকারীকে একটি ধন্যবাদ পৃষ্ঠায় পুননির্দেশিত করে যা ব্যাখ্যা করে যে আপনি কখন এবং কিভাবে তাদের সাথে যোগাযোগ করবেন।
উপরোক্ত সকল বিষয় মাথায় রেখে আমাদের এই FREELANCER GUIDELINE ওয়েবসাইট টির কনটাক্ট পেজ তৈরি করা হয়েছে। মূলত এটি  তৈরি করা হয়েছে HTML এবং CSS এর মাধ্যমে । নিচে এর সোর্স কোডটি এবং এই কোডটি কিভাবে কাস্টোমাইজ করে নিবেন তা নিয়ে একটি পরিপূর্ণ ভিডিও  দেওয়া হলো। 

CSS Code

<style> 
  .tb-contact-form-widget{
    background:radial-gradient(rgba(8, 85, 252, 0.05),#dfe6e9);;
    background-repeat: repeat;
    background-position: 100% 100%;
    color:#000;
    padding:25px;
  font-size:15px;} 
  .srbtn{
    display:inline-block;} 
  .cform-button, .btn-reset{
    background-color:rgba(44, 62, 80,1.0);
    padding:5px 30px;
  border-radius:10px;
    color:#ffffff;
  } 
  .cform-button:hover {
    background-color: #2980b9;
    color: #fff;} 
  .btn-reset:hover {
    background-color: red;
    color: #fff;} 
  .tb-contact-form-widget h3{
    text-align:center;
    margin:20px 0 0 0;
    padding:10px 0;
    border-top: 1px dotted #000;} 
  .c-form-name, .c-form-email {
    width: 100%; 
    max-width: 100%; 
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #CCC;
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff; 
    -webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF; 
    box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;} 
  .c-form-email-message { 
    width: 100%; 
    max-width: 100%; 
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #CCC;
    border-radius: 5px;
    box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff; 
    -webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;} 
  .c-form-name, .c-form-email, .c-form-email-message input:focus{
    background-color: #FFF;
    box-shadow: 0 0 0 1px #E8C291 inset;
    border-color: #E8C291;outline: none; 
    -moz-box-shadow: 0 0 0 1px #e8c291 inset; 
    -webkit-box-shadow: 0 0 0 1px #E8C291 inset;} 
  .b-social-buttons{
    list-style-type:none;
    text-align:left;} 
  .b-social-buttons li{
    display:inline-block;
    } 
  .btn-lg{
    border-radius:10%;
  border:1px solid #ddd;
    background:linear-gradient(to right, #ff105f, #ffad06);
    color:#fff;
    text-decoration:none;
  font-size:15px;
    margin-right:10px;
  padding:2px 5px 2px 5px;}
  #ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{
    width:100%;
    margin-top:15px;}
  .network-name{
    padding-right:10px;
  color:#ff5722;}

  #-name{
    margin-left:5px;}
  .form-a{
    float: right;
    width:50%;
  }
  .con-info p{
    text-align:justify;
  }
  .c-info{
    float:left;
    width:50%;
  }
  .c-info h1{
    font-size:25px;
  }
  .c-info p{
    font-size:15px;
    text-align:justify;
    padding-right:10px;
  }
  .c-info ul li{
    list-style-type:none;
  }
  .c-info li i{
    font-size:15px;
    background:#2c3e50;
    color:#fff;
    border-radius:10%;
    padding:5px;
    margin-bottom:5px;
  }
  @media screen and (max-width:629px) {
    .c-info{
      width:100%;
    }
  }
    @media screen and (max-width:629px) {
    .form-a{
      width:100%;
      margin-top:10px;
    }
  }
</style>

 

HTML CODE 


<div class="con-info">
  <p>এই যোগাযোগ পেজটি এই সাইট সম্পর্কিত সাধারণ প্রশ্ন, প্রযুক্তিগত সমস্যার প্রতিবেদন এবং বিজ্ঞাপন সম্পর্কিত অনুসন্ধানের জন্য। আপনার যদি এই সাইট সম্পর্কিত কোন পরামর্শ, মতামত, প্রশ্ন বা পরামর্শ থাকে তাহলে দয়া করে আমাদের লিখুন। আমরা আমাদের সকল পাঠকদের মূল্য দিই এবং তাদের পাঠানো প্রতিটি ইমেইলে রিপ্লে দেওয়ার চেষ্টা করি। যদি আপনি একটি বিনামূল্যে ফ্রিল্যান্সিং সাপোর্ট চান তাহলে এই ফর্মটি ব্যবহার করবেন। আর আপনি যদি নতুন ‍ফ্রিল্যান্সারদের জন্যে এই সাইটে লিখতে চান তবে এই ফর্মটি ব্যবহার করবেন না বরং আমাদের <b><a href="/p/submit-guide.html" target="_blank">সাবমিট গাইড</a></b> এই বাটনটি ব্যবহার করবেন। ওখানে একটি টিউটোরিয়াল পাবলিশ করার সকল নির্দেশিকা দেওয়া আছে। এছাড়াও আপনি ‍যদি কোনো প্রকার পেইড সাপোর্ট বা সার্ভিস পেতে চান তাহলেও এই ফর্মটি ব্যবহার করবেন। ধন্যবাদ।
<div class="c-info">
  <h1>Important Notice</h1>
  <p>আমরা ফ্রিল্যান্সিং গাইডলাইন এবং খণ্ডকালীন চাকরির প্রশিক্ষণ সম্পর্কে অতিথি পোস্ট জমা নিয়ে থাকি এবং সেগুলো এই ওয়েবসাইটে পাবলিশ করে থাকি। আপনার ব্লগ বা নিবন্ধনটি আমাদের জন্য মূল্যবান। আপনার যদি এই বিষয়ে আগ্রহ থাকে তাহলে <a href="/p/guest-post-policy.html" target="_blank"><b>অতিথি পোষ্ট পলাইসি</b></a> পরে আপনার ব্লগ বা নিবন্ধনটি <a href="/p/submit-guide.html" target="_blank"><b>সাবমিট করুন</b></a> ধন্যবাদ।</p>
        <h1>Contact Info</h1>
        <p><b> ওয়েব ডেভেলপমেন্ট এবং ডিজিটাল মেকেটিং </b> সম্পর্কে কোন প্রশ্নের উত্তর বা সার্ভিস পেতে নির্দ্বিধায় আমার সাথে যোগাযোগ করুন।</p>
  <li><i class="far fa-clock"></i>    SUN to SAT, Bangladesh (GMT+6)</li>
            <li><i class="fas fa-map-marker-alt"></i>    Shibalaya, Manikganj - Bangladesh</li>
            <li><i class="far fa-envelope"></i>  contact.mdrajumolla@gmail.com</li>
  <li><i class="fab fa-whatsapp"></i>    +880 1794606140</li>
    </div>
  <div class="c-form-tittle"><h1>Contact Form</h1></div>
<div class="form-a">
<div class="tb-contact-form-widget">
  <form name="contact-form"> 
    <div class="form-name">
      <span>
        <i class="fa fa-pencil-square-o"></i> Your Name* </span><br />
      <input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
</div> 
    
<div class="form-email">
  <span>
    <i class="fa fa-envelope-o"></i> E-mail Address* </span><br />
  <input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
</div>
<div style="clear: both;">
</div>
<div class="form-message"> 
  <span>
    <i class="fa fa-keyboard-o"></i> Message*</span><br /> 
  <textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="7"></textarea>
<div class="srbtn">
  <input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
  <input class="btn-reset" type="reset" value="Clear" />
</div>
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> 
</div> 
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> 
</div>
</div>
  </form>
</div>
</div>

how to customize contact us page source code in Blogger

Post a Comment

Previous Post Next Post