HTML، CSS، اور JavaScript کا استعمال کرتے ہوئے ایک سادہ رابطہ فارم کیسے بنایا جائے۔

آپ جیسے قارئین MUO کو سپورٹ کرنے میں مدد کرتے ہیں۔ جب آپ ہماری سائٹ پر لنکس کا استعمال کرتے ہوئے خریداری کرتے ہیں، تو ہم ملحق کمیشن حاصل کر سکتے ہیں۔ مزید پڑھ.

رابطہ فارم ویب سائٹس کا ایک اہم جزو ہیں، جو صارفین کو استفسارات، تاثرات یا درخواستوں کے ساتھ آپ تک پہنچنے کی اجازت دیتے ہیں۔

دن کی MUO ویڈیو مواد کے ساتھ جاری رکھنے کے لیے اسکرول کریں۔

یہاں آپ اپنی ویب سائٹ کے لیے ایک بنیادی رابطہ فارم بنانے کا طریقہ سیکھیں گے۔ پروجیکٹ کو ترتیب دینے سے لے کر فارم کی توثیق اور اسٹائل شامل کرنے تک، اس بات کو یقینی بنانا کہ آپ کے پاس آخر تک ایک فعال اور خوش کن رابطہ فارم موجود ہے۔

---

---

ونڈوز 10 کی تنصیب کی مرمت کیسے کریں

پروجیکٹ کو ترتیب دینا

کوڈنگ شروع کرنے سے پہلے، یقینی بنائیں کہ آپ کا ترقیاتی ماحول ترتیب دیا گیا ہے۔ اپنا پسندیدہ ٹیکسٹ ایڈیٹر کھولیں یا تجویز کردہ مربوط ترقیاتی ماحول (IDEs) میں سے ایک پسند بصری اسٹوڈیو کوڈ یا شاندار متن .

اپنی HTML اور CSS فائلوں کو منظم رکھنے کے لیے ایک پروجیکٹ فولڈر بنائیں۔

اس فولڈر کے اندر ایچ ٹی ایم ایل کے لیے الگ فائلیں بنائیں ( index.html ) اور سی ایس ایس ( style.css )۔ آخر میں، اپنی CSS فائل کو اپنے HTML دستاویز میں لنک کریں۔ کا استعمال کرتے ہوئے سیکشن ٹیگ

ایچ ٹی ایم ایل کا ڈھانچہ بنانا

کسی بھی رابطہ فارم کی بنیاد اس کا HTML ڈھانچہ ہے۔ یہاں یہ ہے کہ آپ اپنے رابطہ فارم کے لیے ضروری HTML عناصر کیسے بنا سکتے ہیں۔

 <main> 
     <h1>Welcome to my Form</h1> 
     <form id="form"> 
       <div class="input__container"> 
         <label for="name">Name</label> 
           <!-- The 'required' prop ensures a filled field before submission --> 
         <input type="text" id="name" name="name" required /> 
       </div> 
       <div class="input__container"> 
         <label for="email">Email</label> 
         <input type="email" id="email" name="email" required /> 
       </div> 
       <div class="input__container"> 
         <label for="message">Message</label> 
         <textarea id="message" name="message" rows="4" required></textarea> 
       </div> 
       <button>Submit</button> 
     </form> 
</main>

مندرجہ بالا HTML کوڈ ایک فارم عنصر بناتا ہے اور رابطہ فارم کے لیے صارف کی معلومات حاصل کرنے کے لیے متعدد ان پٹ فیلڈز کو گھوںسلا دیتا ہے۔

---

---

اس وقت، آپ کا رابطہ فارم اس طرح نظر آتا ہے:

رابطہ فارم کو اسٹائل کرنا

ایک پرکشش اور صارف دوست رابطہ فارم صارف کے مجموعی تجربے کو بڑھاتا ہے۔ نیچے دیا گیا CSS کوڈ flexbox اور CSS باکس ماڈل کی خصوصیات کا استعمال کرتا ہے جیسے پیڈنگ اور مارجن رابطہ فارم کو بہتر شکل دینے کے لیے۔

---

---

 * { 
 margin: 0; 
 padding: 0; 
 box-sizing: border-box; 
} 
 
html { 
 font-size: 62.5%; 
} 
 
body { 
 font-family: "Mulish", sans-serif; 
 height: 100vh; 
 display: flex; 
 justify-content: center; 
 align-items: center; 
} 
 
main { 
 width: 40rem; 
 box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2); 
 margin: 0 auto; 
 height: 45rem; 
 border-radius: 2rem; 
 padding: 2rem; 
} 
 
h1 { 
 text-align: center; 
 font-size: 3rem; 
 padding: 1rem 2rem; 
} 
 
form { 
 margin: 3rem 0; 
 display: flex; 
 flex-direction: column; 
 row-gap: 2rem; 
} 
 
.input__container { 
 display: flex; 
 flex-direction: column; 
 row-gap: 0.5rem; 
} 
 
.input__container label { font-size: 1.6rem; } 
 
.input__container input, 
textarea { 
 padding: 1rem 2rem; 
 border-radius: 5px; 
 border: 1px solid #555; 
 resize: none; 
} 
 
button { 
 align-self: flex-start; 
 padding: 1rem 2rem; 
 border-radius: 5px; 
 border: none; 
 background: #333; 
 color: #fff; 
 cursor: pointer; 
}

آپ کا رابطہ فارم اب اس طرح نظر آتا ہے:

فارم کی توثیق کو نافذ کرنا

صارف کی فراہم کردہ معلومات کی درستگی اور مکمل ہونے کو یقینی بنانا سب سے اہم ہے۔ ایک مؤثر نقطہ نظر شامل ہے کلائنٹ سائیڈ فارم کی توثیق کے لیے جاوا اسکرپٹ کا استعمال . شروع کرنے کے لیے، اپنی HTML فائل کے آخر میں ایک اسکرپٹ ٹیگ بنائیں اور فارم عنصر کو نشانہ بنائیں۔

آئی فون پر میل ڈراپ کیا ہے؟

 <script> 
 "use strict"; 
    const form = document.getElementById("form"); 
</script>

پھر صارف کی طرف سے جمع کرانے کے لیے فارم کے ساتھ ایک ایونٹ سننے والے کو منسلک کریں۔

 form.addEventListener("submit", function (event) { });

اس کے بعد، فارمز کے ذریعے پہلے سے طے شدہ صفحہ کو دوبارہ لوڈ کرنے کی کارروائی کو روکیں اور ای میل فیلڈ میں قدر منتخب کریں۔

 form.addEventListener("submit", function (event) { 
    // Prevent page reload on submit 
    event.preventDefault();  
    // Selecting the email value filled by the user 
    const email = document.getElementById("email").value; 
});

آخر میں، صارف کے ای میل کی درستگی کی جانچ کرنے کے لیے ریگولر ایکسپریشنز کا استعمال کریں اور ای میل کی قدر کے مطابق پیغام دکھائیں۔

 form.addEventListener("submit", function (event) { 
    // Preventing page reload on submit 
    event.preventDefault();  
 
    // Selecting the email value filled by the user 
    const email = document.getElementById("email").value; 
 
    // Checking for valid email using a simple regex pattern 
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 
 
    if (!emailPattern.test(email)) { 
      alert("Wrong email format"); 
      return; 
    } 
 
    // If everything passes, show success message 
    alert("Form submitted successfully"); 
});

یہ قدم عام غلطیوں کو روکنے میں مدد کرے گا اور اس بات کو یقینی بنائے گا کہ صارف صرف درست ڈیٹا جمع کرے۔

حتمی رابطہ فارم کی جانچ اور ٹربل شوٹنگ

کوئی بھی منصوبہ مکمل جانچ کے بغیر مکمل نہیں ہوتا۔ یہ یقینی بنانے کے لیے کہ آپ کا فارم درست طریقے سے کام کرتا ہے، ضروری اقدار درج کریں، فارم جمع کروائیں، اور تصدیق کریں کہ یہ مطلوبہ نتائج دیتا ہے۔

اپنے رابطہ فارم کو حسب ضرورت بنائیں

آپ نے اپنی ویب سائٹ کے لیے ایک بنیادی رابطہ فارم بنایا ہے۔ آپ نے پروجیکٹ سیٹ اپ، ایچ ٹی ایم ایل ڈھانچہ، سی ایس ایس اسٹائلنگ، جاوا اسکرپٹ فارم کی توثیق، اور مکمل جانچ میں مہارت حاصل کی ہے۔

ایک اچھی طرح سے تیار کردہ رابطہ فارم صارف کے تعامل کو بڑھاتا ہے، جس سے زائرین کے لیے آپ سے رابطہ قائم کرنا آسان ہو جاتا ہے۔ اپنی مخصوص ضروریات کو پورا کرنے کے لیے بلا جھجھک اپنی مرضی کے مطابق اور اس کی فعالیت کو وسعت دیں۔