Là chủ sở hữu trang web, bạn chắc chắn nên tìm hiểu cách thêm contact form vào WordPress. Trang web của bạn không phải là một thực thể ẩn danh. Hầu hết mọi người muốn biết và tương tác với bất cứ ai đứng sau nội dung họ đọc. Vì lý do đó, trong bài viết này, chúng tôi sẽ cũng bạn sẽ tìm hiểu cách thêm contact form vào website WordPress của mình. Bài viết trước tiên sẽ đề cập đến lý do tại sao đó là một việc bạn nên làm và sau đó chúng tôi sẽ hướng dẫn từng bước về cách thêm một biểu mẫu liên hệ trên trang web của bạn thông qua một plugin là Contact form 7.
Không những thế, chúng tôi cũng sẽ nói về cách thay đổi thiết kế biểu mẫu của bạn và thực hiện bảo vệ chống spam và nhiều thông tin hữu ích khác liên quan đến contact form 7.
Tại sao bạn nên sử dụng contact form trên trên website?
Có nhiều lý do quan trọng mà bạn phải sử dụng một form liên lạc trên trang web của bạn thay vì đăng trực tiếp địa chỉ email của bạn.
- Bảo vệ khỏi thư rác – Thư rác là một vấn đề mà nhiều admin web gặp phải. Bạn sẽ nhận thấy nó một cách nhanh chóng khi bạn có một trang web WordPress sử dụng các bình luận blog. Một điều mà các spammer làm là tự động quét các trang web để tìm địa chỉ email không được bảo vệ để họ có thể thêm chúng vào danh sách gửi thư của mình. Contact form giúp hạn chế điều đó bằng cách cho khách truy cập có thể liên lạc mà không công bố công khai địa chỉ email của bạn.
- Hỏi thông tin chính xác – Những người liên lạc với bạn không luôn gửi tất cả thông tin bạn cần. Với một contace form. Nó cung cấp cho bạn một cách để lọc các yêu cầu đã được bạn xác định từ trước, ví dụ như theo loại, khách liên lạc chỉ được chọn những gì bạn cho phép.
- Thông báo cho khách hàng của bạn – Ngược lại, contact form cũng có thể đóng vai trò là điểm thông tin đầu tiên. Bạn có thể gởi thông tin cho người liên lạc để cho họ biết về thời gian phản hồi dự kiến và các bước họ có thể thực hiện trước để giải quyết yêu cầu của họ.
Hướng dẫn sử dụng contact form 7 để thêm mẫu liên hệ vào WordPress
Có rất nhiều plugin WordPress ngoài kia để thêm một contact form vào trang web của bạn, cả miễn phí và trả phí. Đối với hướng dẫn dưới đây, chúng tôi sẽ sử dụng một plugin miễn phí rất phổ biến là contact form 7 .
Bước 1. Cài đặt Plugin contact form 7
Cài đặt Contact Form 7 cũng như cài đặt mọi plugin WordPress khác. Chỉ cần đăng nhập vào trang web của bạn, đi đến Plugins> Add new và nhập tên của nó vào hộp tìm kiếm.
Sau đó. Nhấp vào Install now để tải xuống trên trang web của bạn. Khi xong, bấm Active để bắt đầu sử dụng plugin.
Bước 2. Tạo mẫu liên hệ mới của bạn
Sau khi cài đặt, bạn sẽ tìm thấy một mục menu mới có tên Form liên hệ trong WordPress của bạn. Nhấp vào nó sẽ đưa bạn đến màn hình này.
Bạn nhận được một số chú giải công cụ ở bên trên để làm cho biểu mẫu liên hệ của bạn tốt hơn như sử dụng chức năng chống spam. Chúng ta sẽ tìm hiểu về chống spam bên dưới.
Bạn có thể tìm thấy một danh sách tất cả các form liên lạc có sẵn trên trang web của bạn: Form liên hệ => Danh sách Form. Nhấp vào nó để bắt đầu chỉnh sửa hoặc Nhấp Contact form (form liên hệ) => Add new contact form (tạo form mới) để tạo form mới.
Ban đầu, Nó có vẻ hơi khó hiểu , nhưng đừng lo lắng – bạn sẽ hiểu nó sớm thôi.
Để làm việc, contact form của bạn cần các trường . Các trường là nơi khách truy cập nhập tên, địa chỉ email hoặc tin nhắn họ muốn gửi cho bạn hoặc bất cứ điều gì khác mà bạn có thể muốn họ cung cấp.
Bạn sẽ thấy Contact form 7 có dính chút gì đó tới mã HTML. Tất cả mọi thứ được đặt giữa cặp thẻ <label>...</label>biểu thị một trường của contact form. Các trường thực tế được tạo bởi những gì giữa dấu ngoặc vuông.
Điều đó có nghĩa là để tạo một contact form, bạn cần học ngôn ngữ lập trình? May mắn thay, plugin đi kèm với các công cụ để tạo ra chúng tự động, vì thế bạn không cần biết code để tạo ra chúng. Nhưng nếu bạn muốn thay đổi thiết kế, giao diện cho contact form của mình, bạn cần biết chút về mã CSS.
Bước 3. Cấu hình contact form 7
Hiện tại, biểu mẫu mặc định chúng tôi sẽ trông như thế này trên trang.
Giả sử bạn muốn thêm menu thả xuống (drop-down menu) để người liên lạc có thể chọn mục có sẵn cho form liên lạc.
Để làm như vậy, trước tiên bạn cần đặt con trỏ ở nơi bạn muốn drop-down menu xuất hiện trong biểu mẫu liên hệ. Trong ảnh bên dưới tôi sẽ chèn drop down menu ở giữa địa chỉ email và tiêu đề của contact form
.
Nhấp vào “menu danh sách” trên thanh công cụ trên cùng. Nó đưa bạn đến menu này:
Đây là cách điền vào các trường khác nhau:
- Kiểu – Tick vào mục bắt buộc nếu bạn muốn bắt buộc khách truy cập phải điền thông tin vào drop down menu.
- Tên – Mục này biểu thị tên được sử dụng trong thẻ. Nó sẽ không xuất hiện cho khách truy cập nhưng giúp bạn dễ nhớ mục đích của thẻ hơn và cũng xác định cấu hình email được gửi đến tài khoản của bạn sau này.
- Các tùy chọn – Nhập các tùy chọn khả dụng cho khách truy cập bằng menu thả xuống. Đặt tùy chọn trên mỗi dòng. Bạn cũng có thể cho phép nhiều lựa chọn và sử dụng một mục trống làm mặc định.
- Thuộc tính Id / Class – Ở nơi này, bạn có thể gán một lớp CSS hoặc id cho trường. Điều này rất hữu ích cho phong cách tùy chỉnh cho contact form 7 thêm hấp dẫn.
Chúng tôi điền như sau:
Sau khi kiểm tra đã ok, ban nhấp vào Chèn vào Form để đặt nó vào biểu mẫu.
Bây giờ việc còn lại là thêm nhãn. Đó là văn bản đi kèm với trường mẫu liên hệ để giải thích những gì nó làm. Chỉ cần sao chép và dán mã hiện có từ các trường khác và sau đó điều chỉnh nó theo nhu cầu của bạn.
Kết quả:
Bước 4. Chỉnh sửa cài đặt email
Tiếp theo, bạn phải định cấu hình email được gửi cho bạn từ contact form. Bạn làm điều này ở tab Cấu hình mail ở trên cùng.
Dưới đây là ý nghĩa của từng mục:
- Mail nhận – Địa chỉ email mà tin nhắn sẽ được gửi đến khi có ai đó điền vào biểu mẫu
- Mail gửi – Người gửi email. Theo mặc định, nó được đặt thành tên của người sử dụng biểu mẫu liên hệ của bạn.
- Tiêu đề – Đặt tiêu đề cho email sẽ gởi cho người điền vào biểu mẫu liên hệ.
- Nội dung thư – Phần nôi dung sẽ được gởi đến email của bạn khi có ai đó điền vào contact form 7.
Các tùy chọn mặc định đã rất ok, bạn không cần chỉnh sửa gì thêm. Điều duy nhất chúng ta cần thay đổi là dòng tiêu đề của contact form 7.
Bước 5. Thêm một tin nhắn mẫu
Tiếp theo là tab Thông báo và Chú ý. Bạn có khả năng định những tin nhắn thông báo mặc định mà khách truy cập của bạn có thể gặp trong khi sử dụng form.
Đây là các thông báo lỗi, thông báo thành công hoặc chỉ là gợi ý về cách sử dụng biểu mẫu một cách chính xác. Chúng tôi thấy rằng những thứ này mặc định của plugin contact form 7 đã khá tốt rồi nên chúng tôi thường để mọi thứ như cũ. Nếu bạn muốn thay đổi bất cứ điều gì đó, thì cứ thoải mãi theo sở thích của bạn.
Bước 6. Tùy chỉnh cài đặt bổ sung
Cuối cùng, là tab “”tuy chọn khác.
Theo mặc định, tab này đang để trống. Bạn có thể làm những việc khác nhau nhờ một số đoạn code tuy biến – từ việc giới hạn khả năng chỉ những người đã đăng nhập mới gửi biểu mẫu liên hệ . Bạn có thể tìm thêm tất cả các tùy chọn khác nhau trong tài liệu của plugin contact form 7.
Bước 7. Thêm biểu mẫu vào trang web của bạn
Bây giờ bạn đã hoàn tất việc định cấu hình biểu mẫu, đã đến lúc hiển thị nó lên trang web của bạn. Điều đầu tiên bạn cần làm là lưu biểu mẫu .
Khi bạn đã lưu biểu mẫu của mình, một mã ngắn sẽ xuất hiện trên màn hình:
Bạn sẽ sử dụng shortcode trên để đặt bất cứ nơi nào bạn muốn. Đầu tiên là đánh dấu và sao chép nó. Khi đã xong, đi đến trang mà bạn muốn đặt biểu mẫu. Ví dụ: bạn có thể chỉ cần tạo một trang mới và đặt tên là Liên hệ . Dán shortcode vào trình soạn thảo WordPress.
Khi bạn xuất bản trang và đi đến giao diện người dùng:
Lưu ý menu thả xuống chúng tôi đã tạo trước đó. Bây giờ nó là một phần của hình thức liên lạc khi cần thiết.
Đơn giản phải không? Ngoài ra, bạn cũng có thể sử dụng cùng một phương pháp để đặt biểu mẫu ở bất kỳ nơi nào khác.
Bạn vừa nắm vững những điều cơ bản để thêm một hình thức liên hệ trong WordPress bằng plugin contacr form 7. Những vẫn còn rất nhiều việc phải làm để cải thiện hơn nữa contact form của bạn.
Tùy biến contact form 7 bằng cách chèn css
Lý tưởng nhất, không cần phải thay đổi kiểu dáng của mẫu liên hệ của bạn. Điều này có thể xảy ra trong trường hợp của chúng tôi vì Contact form 7 sử dụng mã HTML tiêu chuẩn như labelhoặc input[type="text"]để tạo các trường biểu mẫu.
Trong các theme WordPress tốt, chúng được xác định trong biểu định kiểu. Do đó, hình thức liên lạc rất có thể tự động phù hợp với thiết kế trang web của bạn. Bạn có thể thấy điều này trong trang web ví dụ ở trên. Trong trường hợp bạn vẫn cần thực hiện điều chỉnh, bạn có một vài lựa chọn như chèn css contact form 7.
Như đã đề cập, Contact form 7 có đánh dấu HTML tiêu chuẩn. Bạn có thể chỉ cần thay đổi CSS được liên kết và do đó giao diện của biểu mẫu sẽ được thay đổi.
Ví dụ: bạn có thể thay đổi kiểu dáng của toàn bộ form trong contact form 7 bằng cách thay đổi lớp CSS .wpc7-form. Xin lưu ý rằng nó có hiệu lực cho tất cả các form được tạo bằng Contact form 7.
Bạn đi dến Giao diện> Tùy chỉnh> CSS bổ sung từ bảng điều khiển WordPress của mình.
CSS contact form 7 chỉnh sửa màu viền và nền.
Mã CSS sau đây sẽ tạo kiểu cho màu viền và nền tất cả trong contact form 7 . Điều này có nghĩa là tất cả các form trên trang web của bạn sẽ bị ảnh hưởng.
Nếu bạn sử dụng mã dưới đây, bạn sẽ có một nền màu xanh nước biển và đường viền màu tím.
.wpcf7 {
background: #1eb5ba;
border: 10px solid #3535c1;
width: 700px;
padding: 20px 20px 20px 50px !important;
}
CSS contact form 7 chỉnh sửa trường nhập và vùng văn bản.
Mã CSS sau đây sẽ định kiểu kích thước phông chữ, trường nhập mẫu, vùng văn bản, màu nền, màu phông chữ, chiều rộng của biểu mẫu và phần đệm .
Nếu bạn sử dụng mã dưới đây mà không sửa đổi, bạn sẽ thấy từng trường biểu mẫu trong một màu xám.
/* Contact Form 7 Input CSS
---------------------------*/
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
textarea {
font-size: 16px;
background-color: #f5f5f5;
border: none;
width: 95%;
padding: 2%;
}
Css contact form 7 – Chỉnh sửa nút submit
Mã CSS sau đây sẽ tạo kiểu cho nút Gửi Đi của contact form 7 .
Có ba quy tắc: input, input:hover, and input:active. Hãy để tôi giải thích những gì mỗi người làm nếu bạn không quen thuộc.
- input – Là trạng thái của nút trước khi bất kỳ hành động nào xảy ra trên nút “Gửi đi”.
- input: hover – Là trạng thái của nút khi ai đó di chuyển con trỏ chuột lên trên nút.
- input: active – Là trạng thái của nút khi ai đó nhấp vào nút đó.
Nếu bạn sử dụng mã bên dưới mà không sửa đổi, bạn sẽ thấy một nút màu đỏ và nó sẽ thay đổi thành màu xám khi bạn di con trỏ chuột lên trên nó.
/* Contact Form 7 Submit Button
-------------------------------*/
.wpcf7 input[type="submit"] {
color: #ffffff;
font-size: 18px;
font-weight: 700;
background: #E2272E;
padding: 15px 25px 15px 25px;
border: none;
border-radius: 5px;
width: auto;
text-transform: uppercase;
letter-spacing: 5px;
}
.wpcf7 input:hover[type="submit"] {
background: #494949;
transition: all 0.4s ease 0s;
}
.wpcf7 input:active[type="submit"] {
background: #000000;
}
Ngoài ra, mọi form được tạo bằng Contact Form 7 đều đi kèm với một mã dành riêng cho plugin. Bạn có thể tìm mã bằng cách sử dụng các công cụ dành cho nhà phát triển trong trình duyệt của mình.
Nếu bạn muốn thay đổi form cụ thể hơn nữa và chỉ thay đổi kiểu dáng cho các form cụ thể. Như bạn có thể thấy từ ảnh chụp màn hình ở trên, mọi biểu mẫu Liên hệ 7 đều có id CSS riêng.
Như bạn có thể thấy trong ảnh chụp màn hình ở trên, code contact form của chúng tôi bắt đầu bằng :
<div role=”form” class=”wpcf7″ id=”wpcf7-f3517-p3535-o1″ lang=”vi” dir=”ltr”>
Các thuộc tính id là một định danh duy nhất được tạo ra bởi Contact Form 7 cho form đặc biệt này. Nó là sự kết hợp của id form và id bài viết mà form này được thêm vào.
Chúng tôi sẽ sử dụng ID này trong CSS của chúng tôi để thiết kế contact form 7 của chúng tôi. Chúng tôi sẽ thay thế .wpcf7 trong đoạn code CSS đầu tiên của chúng tôi bằng #wpcf7-f3517-p3535-o1.
div#wpcf7-f3517-p3535-o1{
background-color: #1eb5ba;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f3517-p3535-o1 input[type="text"],
#wpcf7-f3517-p3535-o1 input[type="email"],
#wpcf7-f3517-p3535-o1 textarea {
background:#3f51b5;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;
}
#wpcf7-f3517-p3535-o1 input[type="submit"],
#wpcf7-f3517-p3535-o1 input[type="button"] {
background-color:#3f51b5;
width:100%;
text-align:center;
text-transform:uppercase;
}
Bạn đi đến Giao diện => Tuy biến => Css bổ sung và dán đoạn code css vào
Sau khi áp dụng đoạn code css trên, bạn sẽ có thiết kế mới cho form của mình.
Nói tóm lại, bất cứ điều gì bạn muốn thay đổi thiết kế biểu mẫu của mình, bạn đều có tất cả các công cụ để làm điều đó. Lưu ý bạn cần biết code css để thay đổi thiết kế cho contact form của mình.
CSS contact form 7 đẹp
/********** Contact Form 7 Style *************/
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
outline:none;
display:block;
width:380px;
padding:4px 8px;
border:1px dashed #DBDBDB;
color:#3F3F3F;
font-family:'Droid Sans', Tahoma, Arial, Verdana sans-serif;
font-size:14px;
/*border-radius*/
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
/*transition*/
-webkit-transition:background 0.2s linear, box-shadow 0.6s linear;
-moz-transition:background 0.2s linear, box-shadow 0.6s linear;
-o-transition:background 0.2s linear, box-shadow 0.6s linear;
transition:background 0.2s linear, box-shadow 0.6s linear;
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}
div#wpcf7-f201-p203-o1{
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f201-p203-o1 input[type="text"],
#wpcf7-f201-p203-o1 input[type="email"],
#wpcf7-f201-p203-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;
}
#wpcf7-f201-p203-o1 input[type="submit"],
#wpcf7-f201-p203-o1 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}
div.wpcf7 {
position: relative;
width: 440px;
z-index: 100;
padding: 30px !important;
border: 1px solid #383838;
background: #D1D1D1;
background: -moz-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
background: -webkit-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
background: -o-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
background: repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 1px 6px #3F3F3F;
-moz-box-shadow: 0px 1px 6px #3F3F3F;
box-shadow: 0px 1px 6px #3F3F3F;
}
div.wpcf7:after {
background:#F9F9F9;
margin:10px;
position: absolute;
content :" ";
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: -1;
border:1px #E5E5E5 solid;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
}
input[type=submit] {
cursor:pointer;
background:none;
border:none;
font-family:'Alice', serif;
color:#767676;
font-size:18px;
padding:10px 4px;
border:1px solid #E0E0E0;
text-shadow: 0px 1px 1px #E8E8E8;
background: rgb(247, 247, 247);
background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
background: linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
-moz-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
input[type=submit]:hover {
color:#686868;
border-color: #CECECE;
background: rgb(244, 244, 244);
background: -moz-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(244, 244, 244, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
background: -webkit-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -o-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -ms-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
-webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}
input[type=submit]:active, input[type=submit]:focus {
position:relative;
top:1px;
color:#515151;
background: rgb(234, 234, 234);
background: -moz-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
background: -webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -o-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -ms-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
-webkit-box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}
Thực hiện bảo vệ thư rác cho contact form 7
Spam là một vấn đề mà bất kì chủ sở hữu web đều e ngại. Nếu bạn để địa chỉ email công khai mà không được bảo vệ trên trang web của bạn, có rất nhiều chương trình tự động sẽ nhận chúng và bắt đầu gửi cho bạn các ưu đãi không mong muốn, email spam, lừa đảo…
Thật không may, điều tương tự cũng xảy ra với các contact form. Trừ khi bạn có các biện pháp để ngăn chặn.
May mắn thay, Contact Form 7 cung cấp những cách dễ dàng để ngăn chặn điều này. Một trong số đó rất đơn giản: bao gồm một câu hỏi vào biểu mẫu của bạn mà bot không thể trả lời, giống như một phép toán đơn giản.
Việc chèn câu hỏi dễ sử dụng như tất cả các thẻ khác trong contact form 7 và bạn có thể tìm thêm thông tin ở đây .
Bên cạnh đó, còn có reCAPTCHA. Đây là một dịch vụ của Google để chống thư rác. Bạn cần một khóa API và tích hợp nó với contact form 7. Tìm hướng dẫn tại đây . Điều này rất hiệu quả để bảo vệ thông tin cá nhân.
Bạn có thể sử dụng thẻ reCAPTCHA để thêm nó vào biểu mẫu của bạn. Nhà sản xuất Contact Form 7 cũng có một plugin Captcha có tên là Very Simple CAPTCHA mà bạn có thể sử dụng.
Bạn cũng có khả năng sử dụng các plugin của bên thứ ba để chống spam. Tất nhiên, plugin chống spam wordpress nổi tiếng nhất là Akismet.
Thêm placeholder contact form 7
Placeholder là thuộc tính mới trong HTML5 dành cho thẻ input. Tác dụng của nó cung cấp thêm thông tin cho người dùng, giúp họ biết cần nhập cái gì.
Ví dụ thêm placeholder contact form 7 vào trường Name.
Kết quả:
Cách hai tương tự bạn cũng có thể thêm placeholder contact form 7 lúc tạo trường.
Một số lỗi thường gặp trong contact form 7 (đang cập nhật)
Lỗi there was an error trying to send your message. please try again later.
Sau khi cài đặt xong Contact Form 7 trên WordPress, và tiến hành gửi thử email , thì bạn gặp thông báo lỗi: There was an error trying to send your message. please try again later
Nguyên nhân lỗi there was an error trying to send your message. please try again later. có thể do những điều sau đây:
- Không / Cấu hình SMTP không chính xác
- Không có thẻ hợp nhất trong tab ‘Mail’
- Không tương thích
Dòng thông báo xanh trên hiện ra, nghĩa là bạn đã fix thành công lỗi There was an error trying to send your message. please try again later.
Tóm lại
Học cách thêm một contact form liên hệ vào WordPress là điều mà bất cứ ai sở hữu một trang web nên làm. Đó là một trong những cách quan trọng nhất để mọi người liên lạc với bạn. Một hình thức liên lạc làm cho trang web của bạn trông chuyên nghiệp hơn, bảo vệ bạn khỏi những kẻ gửi thư rác, đảm bảo bạn có được thông tin bạn cần. Contact form 7 như một người gác cửa cho website wordpress của bạn.
Trong bài viết này, chúng tôi đã đề cập đến cách thêm biểu mẫu liên hệ vào WordPress bằng plugin contact form 7. Bên cạnh đó, chúng tôi đã tiến hành bảo vệ chống spam và tạo kiểu nâng cao cho các biểu mẫu liên hệ của bạn. Chúng tôi hy vọng bài viết giúp bạn được phần nào trong việc cài đặt và sử dụng contact form 7. Chúc bạn thành công!
>>>Xem thêm:
Có cách nào thay đổi độ rộng của contact form 7 không ad
Hi a, để thay đổi độ rộng hay cao của các trường trong contact form 7. A sử dụng đoạn CSS này trong mục CSS bổ sung của theme nhé! Thay đổi lại các con số px tùy theo ý a.
.wpcf7 input.wpcf7-text { width: 300px; }
.wpcf7 textarea.wpcf7-textarea { width: 300px; }
.wpcf7-form textarea { height: 200px; }