فرم تماس ساده با HTML، CSS و جاوا اسکریپت
در این مقاله با مراحل آسان ساخت یک فرم تماس ساده برای وب سایت خود با استفاده از HTML و CSS ، جاوا اسکریپت همراه ما باشید.
فرم‌های تماس یکی از اجزای حیاتی وب‌سایت‌ها هستند که به کاربران این امکان را می‌دهند تا با سؤالات، بازخوردها یا درخواست‌ها با شما ارتباط برقرار کنند.
در اینجا فرآیند ایجاد یک فرم تماس اولیه برای وب سایت خود را خواهید آموخت. از راه‌اندازی پروژه گرفته تا افزودن اعتبار فرم و استایل، اطمینان از داشتن یک فرم تماس کاربردی و دلپذیر تا پایان.
راه اندازی پروژه
قبل از شروع کدنویسی، مطمئن شوید که محیط توسعه شما تنظیم شده است. ویرایشگر متن دلخواه خود یا یکی از محیط های توسعه یکپارچه توصیه شده (IDE) مانند Visual Studio Code یا Sublime Text را باز کنید . (یا حتی Notepad ویندوز خود)
یک پوشه پروژه ایجاد کنید تا فایل های HTML و CSS خود را بصورت مرتب نگه دارید.
در این پوشه، فایل های جداگانه ای برای HTML ( index.html ) و CSS ( style.css ) ایجاد کنید. در نهایت، فایل CSS خود را در بخش <head> سند HTML خود با استفاده از تگ <link> پیوند دهید .
<link rel="stylesheet" href="آدرس فایل CSS">
ایجاد ساختار HTML
اساس هر فرم تماس ساختار HTML آن است. در ادامه نحوه ایجاد عناصر HTML لازم برای فرم تماس خود آورده شده است.
<main> <h1>به فرم تماس با خوش آمدید</h1> <form id="form"> <div class="input__container"> <label for="name">نام شما</label> <input type="text" id="name" name="name" required /> </div> <div class="input__container"> <label for="email">ایمیل شما</label> <input type="email" id="email" name="email" required /> </div> <div class="input__container"> <label for="message">پیام شما</label> <textarea id="message" name="message" rows="4" required></textarea> </div> <button>ارسال</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;
}
فرم تماس شما اکنون به شکل زیر است :
- مرتبط : آموزش استایل دهی به فرم ها توسط CSS
پیاده سازی اعتبار سنجی فرم
اطمینان از صحت و کامل بودن اطلاعات ارائه شده توسط کاربر بسیار مهم است. یکی از رویکردهای موثر استفاده از جاوا اسکریپت برای اعتبارسنجی فرم سمت کاربر است . برای شروع، یک تگ اسکریپت در انتهای فایل 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("فرمت ایمیل اشتباه است");
return;
}
// If everything passes, show success message
alert("فرم با موفقیت ارسال شد");
});
این مرحله به جلوگیری از خطاهای رایج کمک می کند و اطمینان حاصل می کند که کاربر فقط داده های معتبر را ارسال می کند.
تست و عیب یابی فرم تماس نهایی
هیچ پروژه ای بدون آزمایش کامل نمی شود. برای اطمینان از اینکه فرم شما به درستی کار می کند، مقادیر لازم را وارد کنید، فرم را ارسال کنید و بررسی کنید که نتایج مورد نظر را ایجاد می کند.
- مرتبط : فرم ها در PHP
فرم تماس خود را سفارشی کنید
حالا شما یک فرم تماس اولیه برای وب سایت خود ساخته اید. یک فرم تماس که به خوبی ساخته شده است، تعامل کاربر را افزایش می دهد و ارتباط بازدیدکنندگان را با شما آسان تر می کند. به راحتی می توانید عملکرد آن را برای رفع نیازهای خاص خود سفارشی کرده و گسترش دهید.
دیدگاه ها