Biểu mẫu phản hồi CSS trong cửa sổ phương thức. Biểu mẫu phản hồi trong cửa sổ phương thức

Xin chào các độc giả thân mến! Tôi đã viết về modal windows một lần rồi, có một bài báo. Trong bài viết này tôi sẽ hướng dẫn bạn cách tạo cửa sổ bật lên trên bất kỳ trang web nào. Chúng tôi sẽ sử dụng plugin jQuery Hộp vui vẻ. Và để thêm ý nghĩa cho bài viết, chúng ta sẽ chèn một biểu mẫu gửi thư vào cửa sổ phương thức. Tôi muốn lưu ý ngay rằng các cửa sổ phương thức trên plugin này hoạt động trên tất cả các trình duyệt. Bắt đầu nào!

Chúng ta cần gì?! không nhiều lắm:

thư viện jQuery;
plugin hộp ưa thích;
Tập lệnh PHP để gửi tin nhắn.

Đánh dấu

Tải xuống Phiên bản hiện tại plugin bạn có thể sử dụng liên kết ở trên. Về plugin Fancybox, nó rất công cụ tốtđể tạo các cửa sổ trên một trang web. Bạn có thể bao gồm bất kỳ nội dung video, hình ảnh nào (cả riêng lẻ và trong thư viện), văn bản, khung nổi trong cửa sổ, plugin có nhiều cài đặt (xem thêm ở bên dưới) + thực tế là nó hoạt động chính xác như nhau trong tất cả các trình duyệt. rất vừa ý.

Tôi sẽ không làm phức tạp việc đánh dấu, chỉ cần nhấp vào liên kết và một cửa sổ có biểu mẫu gửi tin nhắn sẽ mở ra:

Gửi tin nhắn

Trong đó giá trị của thuộc tính href khớp với mã định danh khối div trong đó có mẫu để gửi thư:

1
2
3
4
5
6
7
8
9
10
11
12
13

Gửi tin nhắn

Email của bạn

Nhập tin nhắn của bạn

Gửi email

Hãy thêm hai trường vào biểu mẫu: văn bản của tin nhắn và địa chỉ email người gửi cũng như nút gửi. Sau khi người dùng nhập e-mail, nội dung tin nhắn và nhấp vào gửi, trước tiên chúng tôi sẽ kiểm tra tính chính xác của thông tin đã nhập và sau đó sử dụng ajax yêu cầu chúng tôi sẽ gửi dữ liệu tới tập lệnh PHP.

Ban đầu biểu mẫu bị ẩn:

#inline ( hiển thị : không có ; )

Kiểu biểu mẫu

Một số kiểu thiết kế trường biểu mẫu và một số lớp được áp dụng cho các trường khi dữ liệu được nhập không chính xác. Khi lỗi được sửa, kiểu của các trường sẽ trở lại bình thường:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

Nhắn tin (
hiển thị: khối nội tuyến;
màu sắc : #676767 ;
chiều rộng: 420px;

lề dưới: 10px;

phần đệm: 5px 9px;
cỡ chữ: 1,2em;
chiều cao dòng: 1,4em;
}

Khu vực Txta (
hiển thị: khối;
thay đổi kích thước: không có;
màu sắc : #676767 ;
Họ phông chữ: Arial, Tahoma, sans-serif;
lề dưới: 10px;
chiều rộng: 500px;
chiều cao: 150px;
đường viền : 1px chấm #ccc ;
phần đệm: 5px 9px;
cỡ chữ: 1,2em;
chiều cao dòng: 1,4em;
}

txt: tập trung,
.txtarea:tiêu điểm(
kiểu viền: liền khối;
màu viền : #bababa ;
màu : #444 ;
}

Lỗi đầu vào,
textarea.error(
màu viền : #973d3d ;
kiểu viền: liền khối;
nền : #f0bebe ;
màu : #a35959 ;
}

Đầu vào.error: tập trung,
textarea.error : tập trung (
màu viền : #973d3d ;
màu : #a35959 ;
}

Để thiết kế nút “Gửi”, chúng tôi sẽ:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

#gửi (
màu : #dee5f0 ;
hiển thị: khối;
con trỏ: con trỏ;
phần đệm: 5px 11px;
cỡ chữ: 1,2em;
đường viền: liền khối 1px #224983 ;
bán kính đường viền: 5px;
nền : #1e4c99 ;
nền : -webkit-gradient(tuyến tính, trên cùng bên trái, dưới cùng bên trái, từ(#2f52b7 ) , đến(#0e3a7d ) ) ;
nền : -moz-tuyến tính-gradient(top , #2f52b7 , #0e3a7d ) ;
nền : -webkit-tuyến tính-gradient(top , #2f52b7 , #0e3a7d ) ;
nền : -o-tuyến tính-gradient(top , #2f52b7 , #0e3a7d ) ;
nền : -ms-tuyến tính-gradient(top , #2f52b7 , #0e3a7d ) ;
nền : gradient tuyến tính(top , #2f52b7 , #0e3a7d ) ;
bộ lọc : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#2f52b7", endColorstr= "#0e3a7d" ) ;
}

#send : di chuột (
nền : #183d80 ;
nền : -webkit-gradient(tuyến tính, trên cùng bên trái, dưới cùng bên trái, từ(#284f9d ) , đến(#0c2b6b ) ) ;
nền : -moz-tuyến tính-gradient(top , #284f9d , #0c2b6b ) ;
nền : -webkit-tuyến tính-gradient(top , #284f9d , #0c2b6b ) ;
nền : -o-tuyến tính-gradient(top , #284f9d , #0c2b6b ) ;
nền : -ms-tuyến tính-gradient(top , #284f9d , #0c2b6b ) ;
nền : gradient tuyến tính(top , #284f9d , #0c2b6b ) ;
bộ lọc : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#284f9d" , endColorstr= "#0c2b6b" ) ;
}

#gửi : đang hoạt động (
màu : #8c9dc0 ;
nền : -webkit-gradient(tuyến tính, trên cùng bên trái, dưới cùng bên trái, từ(#0e387d ) , đến(#2f55b7 ) ) ;
nền : -moz-tuyến tính-gradient(top , #0e387d , #2f55b7 ) ;
nền : -webkit-tuyến tính-gradient(top , #0e387d , #2f55b7 ) ;
nền : -o-tuyến tính-gradient(top , #0e387d , #2f55b7 ) ;
nền : -ms-tuyến tính-gradient(top , #0e387d , #2f55b7 ) ;
nền : gradient tuyến tính(top , #0e387d , #2f55b7 ) ;
bộ lọc : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#0e387d" , endColorstr= "#2f55b7" ) ;
}

Hộp vui vẻ

Hãy chuyển sang phần thú vị nhất, sử dụng plugin. Chúng tôi gọi phương thức .fancybox và lớp liên kết hoạt động như một bộ chọn:

$(document).ready(function() (
$(".modalbox" ) .fancybox () ;
$("#contact" ) .submit (hàm () ( return false ; ) ) ;

Chúng tôi cũng hủy hành động tiêu chuẩn gửi biểu mẫu(gửi), điều này sẽ cho phép chúng tôi sử dụng yêu cầu ajax của riêng mình. Khi gọi phương thức, tôi không sử dụng một tham số nào và để lại tất cả các giá trị mặc định. Tuy nhiên, chúng đáng được đề cập:

Tên	Sự miêu tả
phần đệm	Đệm vào nội dung trong cửa sổ (Mặc định 15px)
lề	Khoảng cách từ các cạnh của trình duyệt đến cửa sổ (Mặc định 20px)
chiều rộng	Độ rộng mặc định cho nội dung "IFRAME" và "SWF". Ngoài ra, đối với các đối tượng "nội tuyến", "AJAX" và "HTML" nếu "AutoSize" được đặt thành "false". Có thể là số hoặc "Tự động". (Mặc định 800px)
chiều cao	Chiều cao mặc định cho nội dung "IFRAME" và "SWF". Ngoài ra, đối với các đối tượng "nội tuyến", "AJAX" và "HTML" nếu "AutoSize" được đặt thành "false". Có thể là số hoặc "Tự động". (Mặc định 600px)
chiều rộng tối thiểu	Chiều rộng cửa sổ tối thiểu (Mặc định 100px)
chiều cao tối thiểu	Chiều cao cửa sổ tối thiểu (Mặc định 100px)
chiều rộng tối đa	Chiều rộng cửa sổ tối đa (Mặc định 9999px)
chiều cao tối đa	Chiều cao cửa sổ tối đa (Mặc định 9999px)
kich thươc tự động	Nếu “true” thì autoHeight và autoWidth cũng là “true” (Mặc định là true)
chiều cao tự động	Nếu được đặt thành "true", chiều cao cho nội dung "nội tuyến", "AJAX" và "HTML" sẽ được xác định tự động (Mặc định là sai)
chiều rộng tự động	Nếu được đặt thành “true”, đối với nội dung “nội tuyến”, “AJAX” và “HTML”, chiều rộng sẽ được xác định tự động (Mặc định là sai)
tự động thay đổi kích thước	Nếu được đặt thành "true", nội dung sẽ thay đổi kích thước khi cửa sổ thay đổi
trung tâm tự động	Nếu được đặt thành "true", nội dung sẽ được căn giữa
fitToView	Nếu đặt thành “true”, cửa sổ sẽ được điều chỉnh theo kích thước của trình duyệt trước khi mở (Mặc định là true)
tỷ lệ khía cạnh	Nếu được đặt thành "true", thì việc thay đổi kích thước sẽ bị giới hạn bởi tỷ lệ khung hình (Mặc định là sai)
tỷ lệ hàng đầu	Định vị dọc. Nếu đặt thành 0,5 thì khoảng cách đến đầu và cuối cửa sổ trình duyệt sẽ giống nhau. Nếu 0 thì cửa sổ phương thức sẽ ở trên cùng (Mặc định 0,5)
tỷ lệ trái	Một tham số tương tự chỉ dành cho định vị ngang(Mặc định 0,5)
cuộn	Hiển thị thanh cuộn. Có thể được đặt thành 'tự động', 'có', 'không' hoặc 'hiển thị' (Mặc định là tự động)
bọcCSS	Lớp CSS tùy chỉnh
mũi tên	Nếu được đặt thành “true”, các nút điều hướng sẽ được hiển thị (Mặc định là true)
đóngBtn	Nếu được đặt thành “true”, thì nút đóng cửa sổ sẽ được hiển thị (Mặc định là true)
đóngClick	Nếu “true” thì khi click vào nội dung cửa sổ sẽ đóng lại (Mặc định là false)
tiếp theoNhấp chuột	Nếu đặt là “true” thì trong thư viện khi click vào nội dung sẽ có chuyển sang ảnh tiếp theo (Mặc định là Sai)
con lăn chuột	Nếu “true”, thì có thể cuộn thư viện bằng con lăn chuột (Mặc định là true)
tự chạy	Nếu “true” thì khi bạn mở phần tử đầu tiên trong thư viện, trình chiếu sẽ bắt đầu (Mặc định là sai)
Tốc độ chơi	Tốc độ trình chiếu (Mặc định 3000 mili giây)
tải trước	Số lượng ảnh thu nhỏ dưới ảnh chính (Mặc định 3)
phương thức	Nếu "true", nút điều hướng và đóng sẽ bị tắt (Mặc định là sai)
vòng	Nếu “true” thì thư viện sẽ bắt đầu lại sau khi kết thúc (Mặc định là true)
ajax	Tùy chọn cho yêu cầu ajax
khung nội tuyến	Tùy chọn quản lý iframe
swf	Tùy chọn quản lý nội dung swf
phím	Bạn có thể xác định các phím để điều hướng qua trình chiếu
phương hướng	Hướng điều hướng
cuộnBên ngoài	Nếu được đặt thành "true", tập lệnh sẽ tránh tạo thanh cuộn (Mặc định là true)
mục lục	Ghi đè chỉ mục nhóm bắt đầu (Mặc định 0)
kiểu	Ghi đè loại nội dung. Các loại được hỗ trợ: "hình ảnh", "nội tuyến", "AJAX", "IFRAME", "SWF" và "HTML" (Không mặc định)
href	Ghi đè nguồn nội dung bằng liên kết (Mặc định là null)
nội dung	Ghi đè nội dung sẽ được hiển thị (Mặc định là null)
tiêu đề	Ghi đè tiêu đề, bạn có thể đặt bất kỳ HTML nào (Mặc định là null)
tpl	Một đối tượng chứa nhiều mẫu khác nhau
openEffect/ closeEffect / nextEffect/ trướcHiệu ứng	Hiệu ứng hoạt hình cho hành động, các giá trị có thể là “fade”, “fade”, “elastic”, “elastic”
tốc độ mở/ closeSpeed / tốc độ tiếp theo / trướcTốc độ	Tốc độ hoạt ảnh (Mặc định 250)
mởEasing/ closeEasing / nextEasing/ trướcNới lỏng	Phương pháp nới lỏng cho từng loại chuyển tiếp (Mặc định là xoay)
openOpacity/ closeOpacity	Nếu được đặt thành “true”, thì độ trong suốt sẽ thay đổi (Mặc định là true)
phương thức mở/ closeMethod/ phương thức tiếp theo/ trướcPhương pháp	Hiệu ứng chuyển tiếp có thể lấy các giá trị 'zoomIn' / 'zoomOut' / 'changeIn' / 'changeOut'
cha mẹ	Phần tử cha của vùng chứa. Điều này hữu ích cho ASP.NET trong đó phần tử trên cùng là "biểu mẫu" (Mặc định là phần thân)

Việc sử dụng các tham số này rất đơn giản, giả sử chúng ta muốn giảm phần đệm cho nội dung của nội dung và chiều cao của nội dung:

1
2
3
4

$(".modalbox" ) .fancybox ((
phần đệm: 0,
chiều cao: 100
} ) ;

Gửi tin nhắn

Trước khi gửi, chúng tôi sẽ kiểm tra tính chính xác của dữ liệu đã nhập và tính chính xác của địa chỉ email đã nhập. Vì vậy chúng ta sẽ cần một chức năng xác minh. Chúng ta sẽ sử dụng biểu thức chính quy:

1
2
3
4

hàm xác thựcEmail(email) (
var reg = /^(([^()[\]\\.,;:\s@"]+(\.[^()[\]\\.,;:\s@"]+)* )|(".+"))@((\[(1,3)\.(1,3)\.(1,3)\.(1,3)\])|((+\.) +(2,)))$/ ;
trả lại reg.test (email);
}

Bước cuối cùng là gửi tin nhắn. Chúng tôi theo dõi sự kiện nhấp chuột vào nút “Gửi”:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$("#send" ) .on ("click" , function () (
var emailval = $("#email" ) .val () ;
var msgval = $("#msg" ) .val () ;
var msglen = msgval.length ;
var mailvalid = validEmail(emailval) ;
// Kiểm tra xem địa chỉ email có đúng không
if (mailvalid == false ) (
$("#email" ) .addClass ("lỗi" );
}
khác nếu (mailvalid == true ) (
$("#email" ) .removeClass ("lỗi" ) ;
}
// Kiểm tra độ dài tin nhắn
nếu (msglen< 4 ) {
$("#msg" ) .addClass ("lỗi" ) ;
}
khác nếu (msglen >= 4 ) (
$("#msg" ) .removeClass ("lỗi" ) ;
}

Chúng tôi đặt dữ liệu do người dùng nhập vào hai biến đầu tiên. Chúng tôi xác định độ dài của tin nhắn (msglen) và kiểm tra địa chỉ email đã nhập (mailvalid). Tiếp theo, chúng tôi kiểm tra xem biến mailvalid có sai hay không, điều đó có nghĩa là địa chỉ email đã được nhập không chính xác và mục nhập này sẽ được tô sáng màu đỏ. Chúng tôi cũng kiểm tra số lượng ký tự được nhập vào văn bản tin nhắn, nếu có ít hơn 4 ký tự, chúng tôi cho biết đây là lỗi (chúng tôi đánh dấu phần nhập văn bản bằng màu đỏ). $("#contact" ) .serialize() ,
thành công: hàm (dữ liệu) (
if (dữ liệu == "true" ) (
$("#contact" ) .fadeOut ("nhanh" , function () (
$(this). before("Thành công! Tin nhắn của bạn đã được gửi:)" ) ;
setTimeout("$.fancybox.close()", 1000 );
} ) ;
}
}
} ) ;
}
} ) ;

Nếu cả hai trường đều được chọn thì thay vì nút “gửi”, chúng tôi sẽ hiển thị văn bản cho biết tin nhắn đang được gửi. Điều này cung cấp cho người dùng xác nhận rằng cả hai trường đều được chọn và quá trình đang diễn ra.

Hiện nay Yêu cầu AJAX. Tham số yêu cầu đầu tiên là kiểu truyền dữ liệu (POST hoặc GET). Tiếp theo chúng ta chỉ định tệp xử lý (sendmessage.php). Tham số tiếp theo là dữ liệu, sử dụng phương thức tuần tự hóa, chúng tôi chuẩn bị dữ liệu dưới dạng biểu mẫu để gửi đến máy chủ.

Nếu chúng ta nhận được phản hồi tốt từ máy chủ (chúng tôi tạo dữ liệu này trong tệp PHP), sau đó chúng tôi sẽ ẩn biểu mẫu liên hệ và hiển thị thông báo về việc gửi thành công. Tôi sử dụng SetTimeout() để cửa sổ phương thức không đóng ngay lập tức mà đóng một giây sau khi gửi dữ liệu.

Tập lệnh PHP

Chúng tôi gửi dữ liệu do người dùng nhập bằng sử dụng JQuery trong sendmessage.php. Trong PHP, chúng tôi tạo dữ liệu này từ mảng POST, tạo và gửi tin nhắn. Nếu quá trình gửi thành công, chúng tôi sẽ trả về true cho JQuery, nếu không thì sai.

Trong biến $sendto chúng ta chỉ ra địa chỉ E-mail những bức thư sẽ được gửi đến.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$sendto = " [email được bảo vệ]" ;
$usermail = $_POST [ "email"] ;
$content = nl2br ($_POST [ "tin nhắn" ] );

// Cấu tạo tiêu đề thư
$subject = "Tin nhắn mới" ;
$headers = "Từ: " . dải_tags ($usermail) . "\r\n" ;
$headers .= "Trả lời: " . dải_tags ($usermail) . "\r\n" ;
$headers .= "Phiên bản MIME: 1.0\r\n" ;
$headers .= "Loại nội dung: text/html;charset=utf-8 \r \n " ;

// Cấu tạo phần thân của bức thư
$ tin nhắn = "" ;
$msg .= "Tin nhắn mới\r \n" ;
$ tin nhắn .= "

Từ: " . $usermail ."

\r \n " ;
$ tin nhắn .= "

Tin nhắn: " . $content ."

\r \n " ;
$msg .= "" ;

// gửi tin nhắn
if (@mail($sendto, $subject, $msg, $headers)) (
tiếng vang "đúng";
) khác (
tiếng vang "sai";
}

Do có nhiều yêu cầu từ người dùng, chúng tôi đã tìm thấy một giải pháp riêng để triển khai xuất hiện khi bạn nhấp vào nút (ví dụ: “Đặt hàng cuộc gọi”).

Để thêm biểu mẫu bật lên vào trang đích của bạn:

1. Đăng nhập vào trình soạn thảo của trang nơi biểu mẫu sẽ được nhúng.

2. Để giải quyết xung đột thư viện jQuery, sao chép mã được đăng bởi và dán mã đó qua công cụ Tập lệnh, đặt vị trí thành "Sau thẻ:

3. Sử dụng công cụ Button tạo một nút:

Nút này sẽ xuất hiện trên trang đích, vì vậy văn bản trên đó phải tương ứng với hành động mục tiêu sẽ theo sau lần nhấp chuột đó (ví dụ: “Đặt cuộc gọi!”). Trong dòng URL, bạn có thể chỉ định bất kỳ liên kết nào (ví dụ: đến trang chính), vì chỉ cần tạo một nút.

4. Sử dụng công cụ Shape tạo hình:

Biểu mẫu sẽ xuất hiện sau khi nhấp vào nút; tên của nhãn phải tương ứng với hành động mục tiêu (ví dụ: “Tên” và “Điện thoại” cho nút “Đặt cuộc gọi!”).

7. Tìm các dòng trong đoạn mã:

Trong đó, bạn sẽ cần thay đổi giá trị ID cho từng thành phần cho phù hợp.

8.1 Trong ID số 1 trong ảnh chụp màn hình, bạn cần nhập ID mẫu. Để thực hiện việc này, hãy nhấp một lần vào các trường biểu mẫu, chuyển đến tab “Nâng cao” của menu “Thuộc tính” ở bên phải và sao chép “ID neo”:

8.2 Ở dòng 2 trong ảnh chụp màn hình, bạn cần nhập ID của nút được liên kết với biểu mẫu.
8.3 Ở dòng 3 trong ảnh chụp màn hình - ID của nút sẽ được hiển thị trên trang.

Đó là tất cả. Biểu mẫu bật lên đã sẵn sàng.

Nếu muốn, bạn có thể thay đổi diện mạo

Xin chào các độc giả thân mến của trang blog! Trong bài viết này, bạn sẽ tìm hiểu cách tạo biểu mẫu bật lên trên trang web bằng hai giải pháp làm sẵn.

Hầu như trên website nào cũng có những hình thức “bắt” như hình thức liên lạc hoặc hình dạng nhận xét và các hình thức đặt mua hàng hóa, dịch vụ. Các biểu mẫu được sử dụng đặc biệt thường xuyên trong các trang web một trang (trang đích) và chúng cần thiết để tương tác và liên lạc với khách truy cập. Theo quy định, các hình thức này hoạt động khá tốt về mặt chuyển đổi, đã được chứng minh qua nhiều năm. Tuy nhiên, ngoài các hình thức được tìm thấy trong biểu mẫu mở, trong một số trường hợp, biểu mẫu bật lên được sử dụng. Chúng rất tiện lợi, không chiếm nhiều dung lượng vì chúng bật lên khi bạn nhấp vào nút và chúng cũng không chuyển hướng khách truy cập đến các trang khác. Hóa ra là trang web đó, ngay cả trong một trang, vẫn làm được mọi thứ chức năng cần thiết trong giao tiếp với du khách.

Đó là về việc tạo các biểu mẫu bật lên mà chúng ta sẽ nói đến. Tôi sẽ cho bạn biết cách thực hiện việc này trên các trang web có biểu mẫu ở dạng html hoặc được tạo bằng plugin Mâu liên hệ 7 trên WordPress.

Tạo một biểu mẫu bật lên trong html.

Hãy xem ví dụ về hình thức gọi lại. Dưới đây là ví dụ về biểu mẫu sẽ mở ra khi bạn nhấp vào nút “Đặt cuộc gọi” hoặc “Bạn có muốn tôi gọi lại cho bạn không?”.

Gọi lại

Để mở một biểu mẫu, trước tiên bạn phải ẩn nó, chúng tôi thực hiện việc này bằng cách chỉ định trong div bao gồm biểu mẫu, style="display: none;" , do đó biểu mẫu bị ẩn. Cũng cần phải chỉ định một id có ý nghĩa cho div này, vì trong trường hợp của chúng tôi, chúng tôi đang sử dụng biểu mẫu gọi lại, chúng tôi gọi nó là callback .

Tạo một biểu mẫu bật lên trong WordPress (Mẫu liên hệ 7).

Cần lưu ý ngay rằng nếu bạn tạo biểu mẫu trên trang web mà không có sự trợ giúp của plugin Contact Form 7 thì tùy chọn được mô tả ở trên sẽ phù hợp với bạn.

Vì vậy, chúng ta cần 2 plugin: Contact Form 7 và Easy FancyBox, plugin đầu tiên để tạo biểu mẫu, plugin thứ hai để mở biểu mẫu, hãy cài đặt chúng. Nếu biểu mẫu bạn cần chưa được tạo thì hãy tạo nó.
Chúng tôi chỉ cần shortcode của nó, trông giống như thế này:

Bây giờ, nếu bạn muốn tạo biểu mẫu từ đầu đến cuối, hãy thêm mã này vào chân trang:

Đương nhiên, hãy cài đặt mã ngắn của riêng bạn, bạn có thể tìm thấy mã này bằng cách nhấp vào Biểu mẫu liên hệ 7 ở menu bên trái, một trang có danh sách các biểu mẫu đã tạo sẽ mở ra.
Và nếu bạn cần một biểu mẫu cho trang cụ thể, sau đó dán mã qua bảng quản trị trên trang (bạn có thể đặt mã vào tiện ích con), nhưng không được dán vào trình chỉnh sửa trực quan.

[Mã ngắn của bạn]

Đồng thời cài đặt shortcode của bạn.

Bây giờ chúng ta cần cấu hình Plugin dễ dàng Hộp vui vẻ. Để thực hiện việc này, hãy đi tới cài đặt của nó. Trong menu bên trái, mở “Cài đặt” và nhấp vào “Tệp phương tiện” (đừng nhầm với tab menu ngay phía trên, còn được gọi là “Tệp phương tiện”). Nếu bạn đã cài đặt plugin cho ảnh bật lên trên trang web của mình thì hãy bỏ chọn Hình ảnh và chọn Nội dung nội tuyến. Sau đó lưu các thay đổi.

Tất cả những gì còn lại là tạo một nút mà khi nhấp vào sẽ mở biểu mẫu. Nó có thể được đặt ở bất cứ đâu, trong đầu trang, chân trang, nó có thể được gắn vào một trong các cạnh của trình duyệt, bạn cũng có thể đặt nút ở bất kỳ bài viết hoặc trang nào. Dán mã này vào nơi bạn muốn thấy nút:

Viết thư cho chúng tôi

Bạn có thể trang trí nút và hình dạng tùy thích, tạo cho nó bất kỳ phong cách nào.

Và đó là tất cả. Nếu bạn thích bài viết này, hãy nói với bạn bè và đồng nghiệp của bạn về nó, thích nó và đăng ký vào nhóm (ở thanh bên trái), và vì điều này, tôi sẽ viết những bài viết thú vị hơn nữa cho bạn.

Xin chào. Trong bài học này, chúng ta sẽ tạo một biểu mẫu phản hồi đầy đủ và nó sẽ xuất hiện trong cửa sổ phương thức khi bạn nhấp vào nút trên trang. Tôi đã tự mình thực hiện bài học này từ đầu, chỉ sử dụng khung jQuery và một đoạn JavaScript nhỏ. Bài học này rất thú vị nên xin đừng bỏ qua! Dưới đây bạn có thể xem minh họa về biểu mẫu tôi đã tạo và cũng có thể tải xuống tập tin cần thiết cho công việc:

Bước 1. mô tả chung và cách thức hoạt động của biểu mẫu phản hồi:

Đầu tiên, tôi sẽ cho bạn biết chúng tôi sẽ cần những tệp nào và trên thực tế, tại sao chúng lại cần thiết:

hình ảnh - thư mục lưu trữ tất cả các hình ảnh trong biểu mẫu của chúng tôi;
index.html - tệp "chỉ mục" chính trong đó nút gọi biểu mẫu phản hồi sẽ được đặt;
contact.html là tệp chứa chính biểu mẫu đó. Tệp này sẽ được đưa vào cửa sổ phương thức;
send.php - một file xử lý chịu trách nhiệm gửi thư;
jquery.js - khung jQuery chính;
style.css là một tệp có các biểu định kiểu xếp tầng cho biểu mẫu của chúng tôi.

Vì vậy, hãy tiếp tục và theo thứ tự... Biểu mẫu sẽ hoạt động như sau: Người dùng đi đến trang có nút gọi cửa sổ phương thức, nhấn nút đó, sau đó biểu mẫu xuất hiện, trong đó khách truy cập nhập tất cả dữ liệu và nội dung của tin nhắn và gửi đi, sau đó nó được chuyển hướng đến một trang có thông báo về việc gửi thư thành công hay không thành công. Vậy là xong, bây giờ chúng ta hãy bắt đầu trình bày biểu mẫu của mình...

Bước 2. Nút để gọi biểu mẫu.

Vì vậy, để cửa sổ phương thức của chúng ta có biểu mẫu xuất hiện, chúng ta cần phải bằng cách nào đó buộc nó thực hiện điều này. Để làm điều này, chúng ta chỉ cần đặt một nút thông thường trên trang. Mã cho nút như vậy được hiển thị bên dưới, cùng với các kiểu được áp dụng cho nút đó:

Viết tin nhắn cho quản trị viên

Bước 3. Bản thân biểu mẫu + cài đặt cho nó

Bây giờ hãy tìm hiểu xem biểu mẫu phản hồi của chúng ta sẽ nằm ở đâu. Và nó sẽ nằm trong file contact.html, file này đã có sẵn trong mã nguồn của bài học. Mẫu này Nó khá nhỏ nên tôi sẽ đặt mã của nó bên dưới:

Gửi tin nhắn đến quản trị:

*Tên: *E-mail: Chủ thể: *Tin nhắn:

Như các bạn thấy, xem qua code thậm chí bằng mắt thường các bạn cũng có thể thấy để hiển thị form tốt hơn mình đã sử dụng cách bố trí bảng. Điều này rất hữu ích đối với tôi trong việc cân bằng tất cả các trường biểu mẫu.

Bước 4. Người xử lý chịu trách nhiệm gửi thư

Ở đây tôi sẽ nhanh chóng cho bạn biết về bộ xử lý chính để gửi thư. Tôi sẽ không đưa mã của nó ở đây vì nó nằm trong mã nguồn. Tải về và xem nội dung của nó. Nếu bạn biết PHP ở đâu đó ở trình độ trung cấp, như tôi, thì bạn có thể dễ dàng tự mình phân tích toàn bộ mã của trình xử lý này. Nếu mọi thứ đã sẵn sàng thì hãy tiếp tục...

Bước 5. “Vặn chặt” khung jQuery chính

Bây giờ, như trong bất kỳ bài học jQuery nào, chúng ta phải “vặn chặt” khung công tác jQuery chính. Để thực hiện việc này, chúng ta hãy quay lại một chút, đến vị trí của nút của chúng ta và giữa các thẻ và chèn đoạn mã sau:

Bước 6: Tạo kiểu cho biểu mẫu

Như bạn có thể thấy, các kiểu cho biểu mẫu của chúng ta được đặt riêng trong tệp style.css, vì những kiểu này chiếm quá nhiều dung lượng. Chúng ta chỉ cần liên kết mã bên dưới với tệp chỉ mục của mình:

Bước 7. Cải tiến jQuery

Bây giờ cho công việc đầy đủ Trong cửa sổ phương thức của biểu mẫu, chúng ta phải chèn mã jQuery sau:

$(function() ( $("a").overlay(function() ( var quấn = this.getContent().find("div.wrap"); if (wrap.is(":empty")) ( quấn.load(this.getTrigger().attr("href")); ) )); ));

Phần kết luận.

Mẫu phản hồi thú vị của chúng tôi đã sẵn sàng. Đường đi còn dài và khó khăn nên nếu ai có gì chưa hiểu mình sẽ lắng nghe thắc mắc của các bạn ở phần bình luận để bài học này. Và đó là tất cả đối với tôi, hẹn gặp lại các bạn!

Với sự tôn trọng chân thành, hướng dẫn jQuery của bạn - M.K.