Nếu bạn muốn tạo một form liên hệ chuyên nghiệp mà không cần phải làm chủ kiến thức về code, Contact Form 7 là sự lựa chọn tuyệt vời.
Dưới đây là hướng dẫn nhanh để bạn có thể tạo một form liên hệ đơn giản mà không cần biết về mã nguồn.
Bước 1: Cài Đặt Plugin Contact Form 7
Đầu tiên, hãy cài đặt và kích hoạt plugin Contact Form 7 trên trang web WordPress của bạn. Bạn có thể thực hiện điều này qua mục "Plugins" và "Add New" trên bảng điều khiển WordPress của bạn.
Bước 2: Tạo Form Mới
Sau khi cài đặt xong, hãy vào mục "Contact" và chọn "Add New" để tạo form mới.
Bước 3: Thêm Mã HTML cho Form
Dưới tab "Form", bạn có thể thêm mã HTML để tạo các trường thông tin cho form liên hệ của bạn. Dưới đây là một ví dụ về mã HTML cho một form đơn giản
<div class="form-group" id="form-lienhe">
<div class="row row-small">
<div class="col medium-6 small-12 large-6">
<div class="col-inner">
<div class="group-addon">[text* text-263 placeholder "Họ tên"]
<span aria-hidden="true" class="fa fa-user"></span>
</div>
</div>
</div>
<div class="col medium-6 small-12 large-6">
<div class="col-inner">
<div class="group-addon">
[text* text-264 class:input-lienhe placeholder "Địa chỉ"]
<span class="fa fa-map-marker" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row row-small">
<div class="col medium-6 small-12 large-6"> <div class="col-inner">
<div class="group-addon">
[tel* tel-665 class:input-lienhe placeholder "Điện thoại"]
<span class="fa fa-mobile" aria-hidden="true"></span>
</div>
</div></div>
<div class="col medium-6 small-12 large-6"> <div class="col-inner">
<div class="group-addon">[email* email-281 placeholder "Email"]
<span class="fa fa-envelope" aria-hidden="true"></span>
</div>
</div></div>
</div>
<div class="form-group">
<div class="col-12">
<div class="group-addon">[text* text-265 class:input-lienhe placeholder "Chủ đề"]
<span class="fa fa-edit" aria-hidden="true"></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-12">
<div class="group-addon">
[textarea* textarea-447 placeholder "Nội dung"]
<span class="fa fa-edit" aria-hidden="true"></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-12">
<div class="text-center">
[submit "Gửi"]
</div>
</div>
</div>
Bước 4: Thêm CSS để Style Form
Thêm mã CSS sau vào file style.css hoặc trong Tuỳ biến > CSS bổ sung của WordPress
.group-addon {
position: relative;
}
.group-addon .fa {
position: absolute;
left: 5.5px;
top: 5.5px;
width: 35px;
height: 35px;
border-right: 1px solid #cccccc;
color: #cccccc;
font-size: 20px;
line-height: 35px;
text-align: center;
z-index: 1;
}
.group-addon input, .group-addon textarea {
width: 100%;
height: 46px;
padding-left: 50px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
border: 1px solid #cccccc;
font-family: "Arial";
color: #333333;
font-size: 15px;
}
Bước 5: Lấy Shortcode và Hiển Thị Form
Sau khi lưu form, hãy lấy shortcode được sinh ra bởi Contact Form 7 và dán nó vào nơi bạn muốn hiển thị form, chẳng hạn như trang Liên Hệ.
Với bước này, bạn đã có một form liên hệ đơn giản và chuyên nghiệp trên trang web WordPress của mình.
Chúc bạn thành công!