نحوه ایجاد یک فرم تماس ساده با استفاده از HTML، CSS و جاوا اسکریپت

یاد بگیرید که با مراحل آسان یک فرم تماس ساده برای وب سایت خود ایجاد کنید و از ارتباط موثر با مخاطبان خود اطمینان حاصل کنید.

فرم‌های تماس یکی از اجزای حیاتی وب‌سایت‌ها هستند که به کاربران این امکان را می‌دهند تا با سؤالات، بازخوردها یا درخواست‌ها با شما ارتباط برقرار کنند.

در اینجا فرآیند ایجاد یک فرم تماس اولیه برای وب سایت خود را یاد خواهید گرفت. از راه‌اندازی پروژه گرفته تا افزودن اعتبار فرم و استایل، اطمینان از داشتن یک فرم تماس کاربردی و دلپذیر تا پایان.

راه اندازی پروژه

قبل از شروع کدنویسی، مطمئن شوید که محیط توسعه شما تنظیم شده است. ویرایشگر متن دلخواه خود یا یکی از محیط های توسعه یکپارچه توصیه شده (IDE) مانند Visual Studio Code یا Sublime Text را باز کنید.

یک پوشه پروژه ایجاد کنید تا فایل های HTML و CSS خود را مرتب نگه دارید.

در این پوشه، فایل های جداگانه ای برای HTML (index.html) و CSS (style.css) ایجاد کنید. در نهایت، فایل CSS خود را در بخش سند HTML خود با استفاده از تگ پیوند دهید.

ایجاد ساختار 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 box مانند padding و margin برای شکل دادن به فرم تماس برای ظاهر بهتر استفاده می‌کند.

* {
 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");
});

این مرحله به جلوگیری از خطاهای رایج کمک می کند و اطمینان حاصل می کند که کاربر فقط داده های معتبر را ارسال می کند.

تست و عیب یابی فرم تماس نهایی

هیچ پروژه ای بدون آزمایش کامل کامل نمی شود. برای اطمینان از اینکه فرم شما به درستی کار می کند، مقادیر لازم را وارد کنید، فرم را ارسال کنید و بررسی کنید که نتایج مورد نظر را ایجاد می کند.

فرم تماس خود را سفارشی کنید

شما یک فرم تماس اولیه برای وب سایت خود ساخته اید. شما بر تنظیم پروژه، ساختار HTML، استایل CSS، اعتبارسنجی فرم جاوا اسکریپت و آزمایش کامل تسلط دارید.

یک فرم تماس که به خوبی ساخته شده است، تعامل کاربر را افزایش می دهد و ارتباط بازدیدکنندگان را با شما آسان تر می کند. به راحتی می توانید عملکرد آن را برای رفع نیازهای خاص خود سفارشی کرده و گسترش دهید.

منبع مقاله