تعلم كيفية إنشاء نموذج اتصال بسيط لموقعك الإلكتروني بخطوات سهلة، مما يضمن التواصل الفعال مع جمهورك.

تعد نماذج الاتصال مكونًا مهمًا في مواقع الويب، مما يسمح للمستخدمين بالتواصل معك للاستفسارات أو التعليقات أو الطلبات.

ستتعرف هنا على عملية إنشاء نموذج اتصال أساسي لموقعك على الويب. بدءًا من إعداد المشروع وحتى إضافة التحقق من صحة النموذج وتصميمه، مما يضمن حصولك على نموذج اتصال عملي وممتع بحلول النهاية.

إعداد المشروع

قبل البدء في البرمجة، تأكد من إعداد بيئة التطوير الخاصة بك. افتح محرر النصوص المفضل لديك أو إحدى بيئات التطوير المتكاملة الموصى بها (IDEs) يحب كود الاستوديو المرئي أو نص سامية.

قم بإنشاء مجلد مشروع للحفاظ على تنظيم ملفات HTML وCSS.

داخل هذا المجلد، قم بإنشاء ملفات منفصلة لـ HTML (Index.html) و CSS (style.css). وأخيرًا، قم بربط ملف CSS الخاص بك في مستند HTML الخاص بك القسم باستخدام بطاقة شعار.

إنشاء هيكل HTML

أساس أي نموذج اتصال هو هيكل HTML الخاص به. إليك كيفية إنشاء عناصر HTML الضرورية لنموذج الاتصال الخاص بك.

<main>
<h1>Welcome to my Formh1>
<formid="form">
<divclass="input__container">





instagram viewer



<labelfor="name">Namelabel>

<inputtype="text"id="name"name="name"required />
div>
<divclass="input__container">
<labelfor="email">Emaillabel>
<inputtype="email"id="email"name="email"required />
div>
<divclass="input__container">
<labelfor="message">Messagelabel>
<textareaid="message"name="message"rows="4"required>textarea>
div>
<button>Submitbutton>
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 5pxrgba(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__containerlabel { font-size: 1.6rem; }


.input__containerinput,
textarea {
 padding: 1rem 2rem;
 border-radius: 5px;
 border: 1pxsolid#555;
 resize: none;
}
button {
 align-self: flex-start;
 padding: 1rem 2rem;
 border-radius: 5px;
 border: none;
 background: #333;
 color: #fff;
 cursor: pointer;
}

يبدو نموذج الاتصال الخاص بك الآن كما يلي:

تنفيذ التحقق من صحة النموذج

يعد ضمان دقة واكتمال المعلومات المقدمة من قبل المستخدم أمرًا بالغ الأهمية. يتضمن أحد الأساليب الفعالة استخدام JavaScript للتحقق من صحة النموذج من جانب العميل. للبدء، قم بإنشاء علامة برنامج نصي في نهاية ملف HTML الخاص بك واستهدف عنصر النموذج.