Cách tạo một biểu mẫu liên hệ đơn giản bằng HTML, CSS và JavaScript
Biểu mẫu liên hệ là một thành phần quan trọng của trang web, cho phép người dùng liên hệ với bạn khi có thắc mắc, phản hồi hoặc yêu cầu.
Trong hướng dẫn này, chúng tôi sẽ hướng dẫn bạn các bước cần thiết để tạo biểu mẫu web cơ bản cho trang web của bạn. Điều này bao gồm việc thiết lập dự án, triển khai xác thực biểu mẫu và tùy chỉnh giao diện của dự án để đạt được biểu mẫu liên hệ đầy đủ chức năng và hấp dẫn về mặt hình ảnh khi kết thúc hướng dẫn của chúng tôi.
Thiết lập dự án
Trước khi bắt đầu viết mã, hãy đảm bảo môi trường phát triển của bạn đã được thiết lập. Mở trình soạn thảo văn bản ưa thích của bạn hoặc một trong các môi trường phát triển tích hợp (IDE) được đề xuất như Visual Studio Code hoặc Sublime Text.
Để duy trì tính tổ chức, bạn nên thiết lập một thư mục dự án chuyên dụng để chứa tất cả các tệp HTML và CSS của mình ở một vị trí tập trung. Điều này sẽ cho phép bạn dễ dàng xác định vị trí và truy cập các tài liệu này khi cần thiết.
Để sắp xếp hợp lý nội dung trang web của bạn, bạn nên thiết lập cấu trúc thư mục với các thư mục riêng biệt cho các loại nội dung khác nhau. Cụ thể, trong thư mục gốc của dự án, hãy tạo hai tệp riêng biệt-một tệp có tên “index.html” sẽ đóng vai trò là điểm truy cập chính cho trang web của bạn và một tệp khác có tiêu đề “style.css” chứa biểu định kiểu xác định sự xuất hiện trực quan của trang web của bạn. Ngoài ra, hãy đảm bảo rằng tồn tại cơ chế liên kết thích hợp giữa hai tệp này để có thể áp dụng kiểu dáng cần thiết cho nội dung HTML. Để đạt được điều này, hãy chèn một
Tạo cấu trúc HTML
Thành phần cơ bản của bất kỳ biểu mẫu liên hệ nào đều nằm trong kiến trúc HTML của nó. Để xây dựng các thành phần HTML cần thiết cho biểu mẫu liên hệ, hãy làm theo các bước sau.
<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>
Mã HTML được cung cấp tạo ra một thành phần biểu mẫu, bao gồm một số thành phần đầu vào trong cấu trúc của nó, nhằm mục đích chấp nhận dữ liệu do người dùng nhập cho biểu mẫu liên hệ.
Hiện tại, biểu mẫu liên hệ của chúng tôi có giao diện như sau:
Tạo kiểu cho biểu mẫu liên hệ
Việc sử dụng biểu mẫu liên hệ trực quan và lôi cuốn có thể cải thiện đáng kể trải nghiệm người dùng nói chung. Mã CSS được cung cấp sử dụng flexbox, cùng với các thuộc tính của mô hình hộp CSS như phần đệm và lề, để tạo ra bản trình bày trực quan hấp dẫn cho biểu mẫu liên hệ.
* {
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;
}
Biểu mẫu liên hệ của bạn bây giờ trông như thế này:
Triển khai xác thực biểu mẫu
Đảm bảo rằng dữ liệu do người dùng cung cấp là chính xác và toàn diện là rất quan trọng. Một phương pháp đáng tin cậy để đạt được điều này bao gồm việc sử dụng JavaScript ở phía máy khách để xác thực biểu mẫu. Để bắt đầu quá trình này, hãy thêm thẻ script vào phần kết thúc tài liệu HTML của bạn, hướng nó tới thành phần biểu mẫu mong muốn.
<script>
"use strict";
const form = document.getElementById("form");
</script>
Để thêm trình xử lý sự kiện nhằm xử lý việc gửi biểu mẫu, bạn có thể sử dụng JavaScript hoặc jQuery như sau:javascript//Sử dụng vanilla JavaScriptdocument.getElementById(‘myForm’).addEventListener(‘submit’, function(event) {//Xử lý việc gửi biểu mẫu tại đây });//Sử dụng jQuery$(’#myForm’).on(‘submit’, function(e) {e.preventDefault();//ngăn chặn hành vi gửi biểu mẫu mặc định//Xử lý việc gửi biểu mẫu tại đây});
form.addEventListener("submit", function (event) { });
Để tránh việc làm mới trang tự động xảy ra khi gửi biểu mẫu và thay vào đó hãy chọn giữ giá trị hiện được chọn trong trường “email”, hãy làm theo các bước sau:
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;
});
Cuối cùng, hãy sử dụng các mẫu biểu thức chính quy để xác thực địa chỉ email đầu vào và hiển thị phản hồi thích hợp dựa trên tính xác thực của nó.
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");
});
Hành động này nhằm tránh những sai sót điển hình và đảm bảo rằng người dùng chỉ cung cấp thông tin có thể chấp nhận được, từ đó đảm bảo tính chính xác trong quá trình gửi.
Kiểm tra và khắc phục sự cố của Biểu mẫu liên hệ cuối cùng
Để một dự án được coi là đã thực hiện đầy đủ, nó phải trải qua quá trình kiểm tra nghiêm ngặt để xác nhận chức năng của nó. Để thực hiện điều này, bạn nên nhập dữ liệu thích hợp vào các trường biểu mẫu, bắt đầu gửi và đánh giá xem liệu có đạt được kết quả mong đợi hay không.
Trình duyệt của bạn không hỗ trợ thẻ video.
Tùy chỉnh biểu mẫu liên hệ của bạn
Chúc mừng bạn đã tạo thành công biểu mẫu liên hệ cơ bản cho trang web của mình! Sự thành thạo của bạn trong việc thiết lập dự án, xây dựng cấu trúc HTML, thiết kế kiểu CSS, triển khai xác thực biểu mẫu JavaScript và tiến hành kiểm tra nghiêm ngặt là điều đáng khen ngợi.
Biểu mẫu liên hệ được thiết kế chu đáo có thể cải thiện đáng kể trải nghiệm người dùng bằng cách tạo điều kiện giao tiếp giữa khách truy cập trang web và chủ sở hữu trang web. Chúng tôi khuyên bạn nên cá nhân hóa và mở rộng khả năng của nó theo yêu cầu riêng của bạn.