ব্লগার ওয়েবসাইটে Contact Form যুক্ত করবেন যেভাবে

হ্যালো ব্লগারস! ব্লগার ওয়েবসাইটে Contact Form যুক্ত করার আজকের টিউটোরিয়ালে স্বাগত জানাচ্ছি।

সবচেয়ে জনপ্রিয় CMS (Content Management System) প্ল্যাটফর্মগুলোর মধ্যে Blogger অন্যতম। এর মূল কারণ এটি বিনামূল্যে ব্যবহার করা যায়।

আপনারা যারা ব্লগারে ওয়েবসাইট নিয়ে কাজ করেন তাদের জন্য এই টিউটোরিয়াল খুবই উপকারী হবে।

এখানে যে যোগাযোগ ফর্ম তৈরি করা শেখাবো সেটার মাধ্যমে ওয়েবসাইটের পাঠকরা আপনার সাথে হোয়াটসঅ্যাপে যোগাযোগ করতে পারবে।

Contact Form for Blogger Website

কোনো ব্লগে একটা যোগাযোগ পেইজ থাকা খুব গুরুত্বপূর্ণ। কোনো পরামর্শ, অভিযোগ কিংবা বিজ্ঞাপন বিষয়ে ব্লগের অ্যাডমিনের সাথে যোগাযোগের প্রয়োজন হতে পারে।

এই যোগাযোগ ফর্মের কিছু বৈশিষ্ট্য নিচে উল্লেখ করলাম-

  • দেখতে দারুণ সুন্দর, মিনিমাল ও স্টাইলিশ।
  • মোবাইল, ট্যাবলেট, ডেস্কটপসহ যেকোনো ডিভাইসের জন্য উপযোগী।
  • প্রয়োজন অনুযায়ী সহজেই কাস্টমাইজ করা যায়।
  • খুবই ছোট জাভাস্ক্রিপ্ট কোড ব্যবহার করা হয়েছে, ফলে ওয়েবসাইটের স্পিড খুব বেশি কমবে না।
  • এটি সম্পূর্ণ বিনামূল্যে ব্যবহার করা যায়।

এছাড়া ওয়েবসাইটে একটি যোগাযোগ ফর্ম থাকার অন্যান্য সুবিধা তো পাবেনই। ডেমো দেখতে নিচের বাটনে ক্লিক করুন।

ডেমো দেখুন

ব্লগারে যোগাযোগ ফর্ম যুক্ত করার নিয়ম

Blogger Website-এ সঠিকভাবে যোগাযোগ ফর্ম তৈরি করতে নিচের ধাপগুলি অনুসরণ করুন। সম্পূর্ণ মনযোগ দিয়ে খেয়াল করুন। কোথাও ভুল হলে ফর্মটি সঠিকভাবে কাজ করবে না।

ধাপ-১: একটি পেইজ তৈরি করুন

ব্লগার ড্যাশবোর্ডে লগিন করে Page মেনু থেকে একটি নতুন পেইজ তৈরি করুন। অথবা বর্তমান কোনো পেইজে ফর্মটি যুক্ত করতে চাইলে সেটি ওপেন করুন।

এরপরে পেইজ এডিটর অপশন থেকে Switch to HTML অপশনে ক্লিক করুন।

ধাপ-২: HTML কোড লিখুন

নিচের HTML কোড কপি করুন এবং পেইজের যে অংশে Contact Form বসাতে চান সেখানে পেস্ট করুন।

<div class="form-container">

    <form id="whatsappForm">
        <div class="form-group">
            <label>Name:</label>
            <input id="name" name="name" required="" type="text" />
        </div>
        <div class="form-group">
            <label>Email:</label>
            <input id="email" name="email" required="" type="email" />
        </div>
      <div class="form-group">
    <label>Selection Type:</label>
    <select id="queryType" name="queryType">
        <option value="Service">Option-1</option>
        <option value="Collaboration">Option-2</option>
        <option value="Feedback">Option-3</option>
        <option value="Other">Option-4</option>
    </select>
</div>
        <div class="form-group">
            <label>Message:</label>
            <textarea id="message" name="message" required=""></textarea>
        </div>
        <button type="submit">Submit</button>
    </form>
</div>

ধাপ-৩: CSS কোড লিখুন

এবার ফর্মটিকে একটি সুন্দর ডিজাইন দিতে নিচের CSS কোড কপি করুন এবং তারপরে HTML কোডের <style>...</style> অংশের মধ্যে পেস্ট করুন।

.form-container {
    background: #f4f4f4;
    padding: 20px;
    border-radius: 6px;
    width: 100%;}
.form-group {
    margin-bottom: 20px;}
label {
    display: block;
    margin-bottom: 5px;}
input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;}
button {
    background: #00A884;
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 4px;
    cursor: pointer;}
button:hover {
    background: #BDBDBD;}
select {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,');
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    cursor: pointer;}
select:focus {
    outline: none;
    border-color: #9ecaed; 
    box-shadow: 0 0 10px #9ecaed;}
  

ধাপ-৪: Javascript কোড লিখুন

ফর্মটি সঠিকভাবে কাজ করাতে নিচের জাভাস্ক্রিপ্ট প্রয়োজন হবে। সেজন্য নিচের কোডটি কপি করে CSS কোডের পর <script>...</script> পেস্ট করুন।

  document.getElementById('whatsappForm').addEventListener('submit', function(event) {

    event.preventDefault();

    const name = document.getElementById('name').value;

    const email = document.getElementById('email').value;

    const queryType = document.getElementById('queryType').value;

    const message = document.getElementById('message').value;

    const whatsappNumber = "YOUR_WHATSAPP_NUMBER"; // Replace with your WhatsApp number

    const text = `*Name:* ${name}%0A*Email:* ${email}%0A*Query Type:* ${queryType}%0A%0A*Message:* ${message}`;

    const whatsappUrl = `https://wa.me/${whatsappNumber}?text=${text}`;

    window.open(whatsappUrl, '_blank');

});

এবার Save করে পেইজটি ভিজিট করলে দেখতে পাবেন একটি কন্ট্যাক্ট ফর্ম তৈরি হয়েছে। তবে সঠিক নাম্বারে মেসেজ পাঠানোর জন্য 8801400000000 এভাবে ১৩ ডিজিটের মোবাইল নাম্বার লিখুন (+) চিহ্ন ছাড়া এবং মাঝখানে কোনো স্পেস ছাড়া।

যেভাবে ফর্মটি কাস্টমাইজ করবেন

এই ফর্মটি ব্যবহার করে আপনি শুধু ওয়েবসাইটের ভিজিটরদের থেকে মেসেজ গ্রহণ করতে পারবেন তা নয়। এটি ব্যবহার করে আরো অনেক কিছু করা যেতে পারে।

সেজন্য ফর্মটিকে নিজের প্রয়োজন ও সুবিধা অনুযায়ী কাস্টমাইজ করে নিতে হবে।

উপরের ফর্মে শুধু ৩টি ফিল্ড (Name, Email, Message) রয়েছে। আপনি চাইলে ইচ্ছেমতো আরো ফিল্ড যুক্ত করতে পারেন।

ধাপ-১: প্রথমে নিচের কোডটি কপি করতে হবে। এরপরে পূর্বের HTML কোডের মধ্যে প্রয়োজন অনুযায়ী যেকোনো <div class="form-group"> ট্যাগের আগে বসাতে হবে এবং Unique_Field_Name লেখার পরিবর্তে একটি ইউনিক ফিল্ডের নাম লিখতে হবে।

<div class="form-group">
            <label>Field Name:</label>
            <input id="Unique_Field_Name" name="Unique_Field_Name" required="" type="text" />
        </div>

যেমন: আপনি যদি Email ফিল্ডের পূর্বে Mobile নামে নতুন একটি ফিল্ড যুক্ত করতে চান তাহলে <div class="form-group"> <label>Email:</label> লেখার পূর্বে উপরের কোডটি বসাবেন। এরপরে Unique_Field_Name স্থানে mobile লিখবেন।

ধাপ-২: এভাবে চাহিদা অনুযায়ী একাধিক ফিল্ড যুক্ত করতে পারবেন। তবে এটাকে সঠিকভাবে ইন্টিগ্রেট করার জন্য জাভাস্ক্রিপ্ট কোডেও কিছু পরিবর্তন করতে হবে।

const message = document.getElementById(' Unique_Field_Name').value;

উপরের কোডটি কপি করুন এবং পূর্বের জাভাস্ক্রিপ্ট কোডে যেখানে একই ধরনের লেখা আছে ঠিক তার নিচে পেস্ট করুন।

এরপরে Unique_Field_Name এর স্থানে কিছুক্ষণ আগে লেখা ফিল্ডের নাম হুবহু লিখতে হবে। উদাহরণসরূপ mobile শব্দটি নিয়েছিলাম।

ধাপ-৩: সর্বশেষে জাভাস্ক্রিপ্ট কোডের মধ্যে নিচের অংশটি খুঁজে বের করুন।

const text = `*Name:* ${name}%0A*Email:* ${email}%0A*Query Type:* ${queryType}%0A%0A*Message:* ${message}`;

তারপরে *Name:* ${Unique_Field_Name}%0A লেখাটি উপরের মার্ক করা অংশের পরে বসিয়ে দিন। এবার পেইজটি Save বা Update করুন।

একই পদ্ধতি পুনরায় অনুসরণ করে ইচ্ছেমতো ফিল্ড যুলত করতে পারবেন। এছাড়াও ফর্মের কালারসহ অন্যান্য ডিজাইন CSS কোড পরিবর্তন করে কাস্টমাইজ করতে পারবেন।

সারাংশ - Conclusion

আপনারা যারা গুগল ব্লগার ব্যবহার করেন আশা করছি তাদের জন্য এই লেখাটি কাজে আসবে।

ব্লগার ওয়েবসাইটের জন্য যোগাযোগ ফর্ম তৈরি করতে কোনো অসুবিধা হলে বা Error দেখা দিলে কমেন্টে জানাতে পারেন। আপনার সমস্যার যথাযথ সমাধান দেওয়ার চেষ্টা করবো।

পূর্ববর্তী আর্টিকেল
কোনো কমেন্ট নেই
কমেন্ট লিখুন
comment url
নোটিফিকেশন
আমাদের ওয়েবসাইটের জন্য গেস্ট পোস্ট আহবান করা হচ্ছে। আপনি যদি গেস্ট পোস্ট করে ব্যাকলিংক নিতে আগ্রহী হোন তাহলে যোগাযোগ করুন।
বন্ধ করুন