এইচটিএমএল ওয়েব ডিজাইন

কিভা‌বে HTML ও PHP দিয়ে Contact Us পেজ তৈরি করবেন

কিভা‌বে HTML ও PHP দিয়ে Contact Us পেজ তৈরি করবেন

আমাদের এইচটিএমএল যোগাযোগ ফর্ম কোড টিউটোরিয়াল অনুসরণ করে এইচটিএমএল, পিএইচপি এবং সিএসএস দিয়ে একটি সাধারণ যোগাযোগ ফর্ম তৈরি করতে পারবেন। তবে, আপনি যদি কোনও মুহূর্তে আপনার যোগাযোগ পৃষ্ঠা তৈরি করতে চান, তবে আমার যোগাযোগ ফর্ম এর এইচটিএমএল, পিএইচপি এবং সিএসএস কোড ব্যবহার করুন।

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

প্রথম ধাপঃ আপনার সাইট contact.html নামে একটি HTML ফাইল তৈরি করুন এবং নিচে দেওয়া HTML কোড দিয়ে সেইভ করে নিন। আথবা, যে HTML ফাইল বা পেইজ এ যোগাযোগের ফর্ম তৈরি করবেন সেখানে, নিচে দেওয়া HTML কোড দিয়ে সেইভ করে নিন।

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="contact-form.css" rel="stylesheet">
    <title>যোগাযোগ করুন</title>
</head>
<body>
<div class="container">
  <form action="contact-us.php">
    <label for="name">আপনার নামঃ</label>
    <input type="text" id="name" name="name" placeholder="আপনার নাম লিখুন">
    <label for="email">আপনার ইমেলঃ</label>
    <input type="text" id="email" name="email" placeholder="আপনার ইমেল লিখুন">
    <label for="message">বার্তাঃ</label>
    <textarea id="message" name="message" placeholder="বার্তা লিখুন" style="height:200px"></textarea>
    <input type="submit" value="Submit">
  </form>
</div>
</body>
</html>

দ্বিতীয় ধাপঃ এবার contact-form.css নামে CSS ফাইল তৈরি করুন এবং নিচে দেওয়া CSS কোড দিয়ে সেইভ করে নিন। আথবা, HTML যোগাযোগের পেইজে <style></style> ব্যবহার করে এই style ট্যগ এর মধ্যে নিচে দেওয়া CSS কোড দিয়ে সেইভ করে নিন।

/* টাইপ = "পাঠ্য" সহ স্টাইল ইনপুট, উপাদান এবং পাঠ্য নির্বাচন */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* নির্দিষ্ট পটভূমির রঙ ইত্যাদি সহ জমা দেওয়ার বোতামটি স্টাইল */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* জমা বোতামের উপর দিয়ে মাউসটি সরানোর সময় একটি সবুজ রঙ এ পরিনত */
input[type=submit]:hover {
  background-color: #45a049;
}

/* ফর্মটির চারপাশে একটি পটভূমি রঙ এবং কিছু প্যাড যুক্ত */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

তৃতীয় ধাপঃ এবার contact-us.php নামে একটি PHP ফাইল তৈরি করুন এবং নিচে দেওয়া PHP কোড দিয়ে সেইভ করে নিন। আথবা, যদি আপনার কোন ওয়েব হোস্টিং না থাকে তবে বিনামূল্যে ওয়েব হোস্টিং পরিষেবা নিয়ে একটি PHP ফাইল তৈরি করুন এবং নিচে দেওয়া PHP কোড দিয়ে সেইভ করে নিতে পারেন।

<?php
if (isset($_POST['email'])) {

    // প্রয়োজনীয় হিসাবে নীচে ২ লাইন সম্পাদনা করুন
    $email_to = "[email protected]";
    $email_subject = "New form submissions";

    function problem($error)
    {
        echo "আমরা অত্যন্ত দুঃখিত, তবে আপনার জমা দেওয়া ফর্মটির সাথে ত্রুটি (গুলি) পাওয়া গেছে। ";
        echo "এই ত্রুটিগুলি নীচে উপস্থিত হলো।<br><br>";
        echo $error . "<br><br>";
        echo "দয়া করে ফিরে যান এবং এই ত্রুটিগুলি ঠিক করুন।<br><br>";
        die();
    }

    // বৈধতা প্রত্যাশিত ডেটা বিদ্যমান
    if (
        !isset($_POST['name']) ||
        !isset($_POST['email']) ||
        !isset($_POST['message'])
    ) {
        problem('আমরা দুঃখিত, তবে আপনি যে ফর্মটি জমা দিয়েছিলেন তাতে সমস্যা আছে বলে মনে হচ্ছে।');
    }

    $name = $_POST['name']; // required
    $email = $_POST['email']; // required
    $message = $_POST['message']; // required

    $error_message = "";
    $email_exp = '/^[A-Za-z0-9._%-][email protected][A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

    if (!preg_match($email_exp, $email)) {
        $error_message .= 'আপনার প্রবেশ করা ইমেল ঠিকানাটি বৈধ বলে মনে হচ্ছে না।<br>';
    }

    $string_exp = "/^[A-Za-z .'-]+$/";

    if (!preg_match($string_exp, $name)) {
        $error_message .= 'আপনি যে নামটি প্রবেশ করেছেন তা বৈধ বলে মনে হয় না।<br>';
    }

    if (strlen($message) < 2) {
        $error_message .= 'আপনার প্রবেশ করা বার্তাটি বৈধ বলে মনে হচ্ছে না।<br>';
    }

    if (strlen($error_message) > 0) {
        problem($error_message);
    }

    $email_message = "নীচে ফর্ম বিবরণ।\n\n";

    function clean_string($string)
    {
        $bad = array("content-type", "bcc:", "to:", "cc:", "href");
        return str_replace($bad, "", $string);
    }

    $email_message .= "Name: " . clean_string($name) . "\n";
    $email_message .= "Email: " . clean_string($email) . "\n";
    $email_message .= "Message: " . clean_string($message) . "\n";

    // create email headers
    $headers = 'From: ' . $email . "\r\n" .
        'Reply-To: ' . $email . "\r\n" .
        'X-Mailer: PHP/' . phpversion();
    @mail($email_to, $email_subject, $email_message, $headers);
?>

    <!-- আপনার সাফল্যের বার্তাটি নীচে অন্তর্ভুক্ত করুন -->

    আমাদের সাথে যোগাযোগ করার জন্য আপনাকে ধন্যবাদ। আমরা খুব শীঘ্রই আপনার সাথে যোগাযোগ করব।

<?php
}
?>

উপরোক্ত PHP কোডের আপনার ইমেল আর ইমেল এর বিষয় ঠিক করে নিবেন। যেমনঃ

    // প্রয়োজনীয় হিসাবে নীচে ২ লাইন সম্পাদনা করুন
    $email_to = "[email protected]";
    $email_subject = "New form submissions";

আমি আমার নিজের মত করে বোঝানোর চেষ্টা করলাম, যাতে করে এইচটিএমএল, পিএইচপি এবং সিএসএস দিয়ে একটি সাধারণ যোগাযোগ ফর্ম তৈরি করতে পারবেন। তবে, আপনি যদি কোন কিছু বোঝতে না পরেন তবে নিচের কমেন্ট বক্স এ লিখে যানাবেন। আমি আপনাকে সাহায্য করার জন্য যথাসাধ্য চেষ্টা করব।

About the author

আব্দুল আলীম

হাই, আমি আবদুল আলীম, বাংলাদেশ থেকে এবং আমি সংবাদ.কম.বিডি তে নিয়যিত আছি। আমি খুশী যে আপনি আমার নিজের লেখা নিবন্ধগুলি দেখছেন! আপনি যদি আমার সম্পর্কে আরও জানতে চান। তাহলে আপনি আমার সোশ্যাল মিডিয়া প্রোফাইলগুলিও দেখে নিতে পারেন এবং এতে আমাকে অনুসরণ করতে বা বার্তা পাঠাতে পারেন। ধন্যবাদ।

Add Comment

Click here to post a comment