Biểu mẫu phản hồi trong cửa sổ phương thức WordPress. Biểu mẫu phản hồi Ajax trong một cửa sổ phương thức. Đặt biểu mẫu phản hồi trong cửa sổ bật lên

Có rất nhiều plugin WordPress để tạo biểu mẫu. nhận xét trên blog hoặc trang web của bạn. đáng chú ý nhất là nó cho phép bạn nhúng biểu mẫu liên hệ trực tiếp vào bài đăng và trang WordPress(trong khi nhiều plugin buộc phải áp dụng mẫu tùy chỉnh cho trang, do đó hạn chế việc chỉnh sửa nó).

Nhúng biểu mẫu trên trang thường là đủ, nhưng nếu bạn muốn biểu mẫu xuất hiện trong cửa sổ bật lên khi người dùng nhấp vào liên kết Liên hệ với chúng tôi thì sao? Để thực hiện được mong muốn đó, bạn cần sử dụng hai Plugin WordPressđồng thời: Easy FancyBox

1. Trước hết hãy cài đặt plugin và Easy FancyBox.

2. Để đơn giản, chúng tôi sẽ sử dụng biểu mẫu Liên hệ 7 đã được chính plugin tạo ra trong quá trình cài đặt làm ví dụ. Trên trang cài đặt Biểu mẫu liên hệ, lấy mã biểu mẫu mà bạn cần sao chép và dán vào Trình chỉnh sửa WordPressđể tạo ra một hình thức.

3. Tạo trang mới trong WordPress. Để thêm biểu mẫu liên hệ, bạn cần dán mã vào dấu ngoặc vuông từ trang cài đặt Biểu mẫu liên hệ 7 vào trang của bạn. Đảm bảo dán mã chính xác, chính xác như plugin hiển thị.

4. WordPress của bạn hiện có biểu mẫu liên hệ. Chúng tôi quyết định làm cho nó bật lên, trong cửa sổ phương thức sau khi người dùng nhấp vào liên kết. Plugin Easy FancyBox đi vào hoạt động. Với sự trợ giúp của nó, bạn có thể làm cho bất kỳ thành phần trang nào xuất hiện trong cửa sổ bật lên. Mở trang chỉnh sửa, nhấp vào tab TEXT và thêm mã HTML sau:

Liên hệ chúng tôi

5. Thế là xong, bây giờ chúng ta có một liên kết “khởi chạy” biểu mẫu liên hệ trong một cửa sổ bật lên. Chúc mừng! Bạn có thể sẽ phải điều chỉnh CSS của các biểu mẫu email để hiển thị chiều rộng và chiều cao chính xác cũng như thông báo về các lỗi có thể xảy ra khi điền. Điều này là đủ để giúp bạn bắt đầu.

Xin chào bạn đọc thân mến, trong bài viết này tôi sẽ hướng dẫn bạn cách tạo biểu mẫu liên hệ bật lên trên trang web WordPress của bạn. Thông thường, khi phát triển trang web hoặc blog của riêng bạn, cần thiết lập khả năng giao tiếp nhanh chóng với khách truy cập vào tài nguyên Internet. Trong trường hợp này, biểu mẫu phản hồi bật lên cho WordPress sẽ rất hữu ích, điều này sẽ giúp thiết lập liên hệ nhanh với người dùng.

Tại sao bạn cần một biểu mẫu phản hồi bật lên cho WordPress

Hãy xem tại sao hình thức này lại cần thiết

Tiết kiệm không gian trông Trực tuyến. Mâu liên hệ có thể được đặt ở bất cứ đâu: ở chân trang hoặc đầu trang, trong nội dung chính của trang, dưới dạng nút nổi, v.v.

Ngoại hình hiệu quả. Hoạt ảnh về sự xuất hiện của một cửa sổ mới trông thú vị và khác thường

Khả dụng. Bạn có thể để lại các mục trong biểu mẫu này từ bất kỳ đâu trên trang web; người dùng không cần quay lại trang chính.

Một phần thưởng bổ sung: biểu mẫu dễ dàng sửa đổi và tùy chỉnh để phù hợp với nhu cầu trang web của bạn. Biểu mẫu phản hồi bật lên cho WordPress có thể được trình bày dưới dạng cửa sổ mở để đặt hàng cuộc gọi, dịch vụ hoặc sản phẩm hoặc đăng ký. Nếu muốn, bạn có thể thêm hiệu ứng hình ảnh, hình ảnh khác nhau vân vân.

Plugin để cài đặt biểu mẫu bật lên

Chúng ta hãy xem các công cụ cần thiết để phát triển cửa sổ bật lên trong wordpress - ứng dụng đặc biệtđể phát triển và xây dựng các trang web.

Mẫu liên hệ 7

Plugin này được sử dụng trực tiếp để thiết kế biểu mẫu. Để cài đặt nó, hãy làm theo các bước sau:

FancyBox dễ dàng

Plugin này phù hợp để phát triển hiệu ứng cửa sổ bật lên. Trình tự cài đặt Easy FancyBox tương tự như quá trình cài đặt plugin trước đó.

Thiết lập plugin

Bạn có thể định cấu hình cài đặt của tiện ích bổ sung Easy FancyBox thông qua các tệp phương tiện. Sử dụng các tùy chọn menu “Cài đặt” -> “Tệp phương tiện”.

Trong khối mở ra ngay bên dưới cài đặt tiêu chuẩn Các thông số của chính plugin sẽ được định vị. Thường có một dấu kiểm bên cạnh mục “Hình ảnh”, cho biết rằng một cửa sổ bật lên sẽ được kích hoạt khi bạn nhấp vào hình ảnh. Nên loại bỏ nó, vì nếu có cái khác công cụ bổ sung việc tạo hoạt ảnh bật lên sẽ xảy ra mở đôi hình ảnh.

Nhưng đó không phải là tất cả. Chọn hộp bên cạnh “Nội dung nội tuyến”

Bất kỳ ai cũng có thể nghiên cứu sâu hơn về cài đặt của plugin và đặt chúng theo ý mình.

Mẹo: nếu bạn muốn biểu mẫu luôn mở thì hãy bỏ chọn Cài đặt dễ dàng Hộp kiểm FancyBox bên cạnh tùy chọn “Đóng FancyBox khi nhấp vào lớp phủ”, thực hiện chức năng đóng cửa sổ khi nhấp chuột ra ngoài cửa sổ.

Hướng dẫn từng bước

Chà, với "nhàm chán" chuẩn bị sơ bộ Vậy là xong, bây giờ chúng ta hãy chuyển sang phần “ngon” - trên thực tế, biểu mẫu phản hồi bật lên WordPress được phát triển như thế nào.

Xử lý cửa sổ biểu mẫu

Chúng ta bắt đầu từ đâu? Tất nhiên, với đặt trước chính hình thức đó. Chọn “Biểu mẫu liên hệ 7” trong menu bên phải, sau đó chọn tùy chọn “Thêm mới”.

Đặt tên mới cho biểu mẫu, chẳng hạn như "Thử nghiệm", nhập tên đó vào trường nhập của cửa sổ mở ra, nơi chứa văn bản "Tiêu đề" và nhấp vào nút "Lưu". Bạn có thể thay đổi các tham số khác, bao gồm cả mẫu biểu mẫu nhưng chúng tôi sẽ không chạm vào nó. Bây giờ của chúng tôi mục tiêu chính– chỉ cần học cách tạo biểu mẫu bật lên.

Hãy nhìn vào kết quả. Như bạn có thể thấy, plugin đã tạo một mã ngắn đặc biệt được sử dụng để hiển thị biểu mẫu sau đó. Bạn cần phải sao chép nó.

Đầu ra biểu mẫu

Bây giờ chúng ta hãy bắt tay vào lập trình. Mới Mã chương trình có thể được chèn vào bất kỳ đâu trên trang web, chẳng hạn như trong “Danh bạ” và các trang khác. Trong ví dụ của chúng tôi hình thức mới sẽ được hiển thị trong widget. Chọn “Giao diện” trong menu, sau đó nhấp vào “Tiện ích”, sau đó trong cửa sổ mở ra, nhấp vào tùy chọn “Văn bản”.

Bây giờ hãy nhấp vào nút “Thêm tiện ích”

Dán đoạn mã sau vào trường nhập Nội dung:

Viết thư Văn bản bắt đầu Văn bản kết thúc

Đây là kết quả thu được sẽ như thế nào:

Xin lưu ý rằng thay vì mã ngắn được chỉ định trong ví dụ, bạn sẽ cần chỉ định mã ngắn mà bạn đã tạo khi tạo biểu mẫu mới.

Ngoài ra, biểu mẫu có thể được chỉnh sửa: thêm hoặc xóa các trường nhập, nhập văn bản đầu và/hoặc kết thúc trước và sau biểu mẫu, chuyển văn bản thành tiêu đề hoặc hiển thị dưới dạng khối riêng biệt, sử dụng các kiểu, trình giữ chỗ khác nhau, v.v. Giá như có thời gian và mong muốn!

Kiểu dáng liên kết

Chúng ta cũng hãy xem xét hai cách để chuyển đổi một liên kết thành một nút để cải thiện hình thức trực quan của nó.

Cách 1: Sử dụng các kiểu chủ đề bổ sung.

Đoạn mã sau có thể được chèn như sau:

Bản thân mã chương trình trông như thế này:

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

/***Hiển thị liên kết ở dạng nút****/ .contact-us a( lề:auto; /*căn chỉnh khối ở giữa*/ display:block; width:199px; /*kích thước nút*/ phần đệm:11px 22px ; /*phần đệm bên trong*/ đường viền:1px màu đen đặc; /*bóng viền*/ nền:#3399ff; căn giữa chú thích*/ color:#ffffff; /*màu của chú thích*/ -moz-transition: dễ dàng tất cả 0,6 giây; -webkit-transition: dễ dàng tất cả 0,6 giây; liên kết màu khi di con trỏ**/ .contact-us a:hover( -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111 ; -moz-transition: dễ dàng tất cả 0,6 giây; -webkit-transition: dễ dàng tất cả 0,6 giây;

Kết quả là một nút như thế này:

Mã đã cho biết tham số nào chịu trách nhiệm cho việc gì. Bây giờ mọi người có thể chỉnh sửa mã theo ý thích của mình, thử nghiệm các kiểu dáng và màu sắc khác nhau và tạo liên kết phù hợp nhất cho cửa sổ bật lên.

Phương pháp 2 – sử dụng hình ảnh làm nút. Đầu tiên, tải hình ảnh được yêu cầu lên trang web (bất kỳ hình ảnh nào bạn thích, không nhất thiết phải ở dạng nút - điều đó không thực sự quan trọng). Để thực hiện việc này, hãy nhấp vào “Phương tiện” -> “Thêm mới” và chọn hình ảnh mong muốn. Một liên kết cố định tới tập tin sẽ xuất hiện ở bên phải hình ảnh (trong trong ví dụ này http://www.sait.ru/wp-content/uploads/2017/04/depositphotos_2169498-E-mail-internet-icon.jpg), sao chép và thêm vào mã (không xóa dấu ngoặc kép):

Thêm mã kết quả vào mã đầu ra chính của biểu mẫu thay vì văn bản “Viết thư”.

Trang web của tôi hiển thị nút hiển thị trong ảnh chụp màn hình bên dưới:

Và nút này sẽ trông như thế này nếu bạn giữ nguyên kiểu bổ sung được mô tả trong phương pháp đầu tiên:

Thêm vào thực đơn

Để có thể gọi trực tiếp biểu mẫu phản hồi bật lên cho WordPress từ menu, bạn phải sử dụng đoạn mã sau

1 2 3

Viết một bức thư

Trước tiên, bạn cần tìm ra chính xác nơi bạn cần chèn mã này. Đi tới “Trình chỉnh sửa” thông qua “Giao diện” và trong số các mẫu, hãy chọn “Tiêu đề (header.php)”

Bây giờ hãy tìm nơi chứa mã menu. Tìm thấy các thông tin sau:

1 2

Bên dưới, dán mã của bạn ngay trước thẻ đóng.

Nói chung, không có gì khó khăn trong việc thêm biểu mẫu liên hệ vào trang web của bạn, điều chính yếu là bạn có thời gian rảnh và mong muốn nghiên cứu kỹ lưỡng mọi khía cạnh. Bây giờ bạn đã biết biểu mẫu liên hệ là gì, nó dùng để làm gì, cách sử dụng nó trên trang web và cách xử lý liên kết để mở một cửa sổ có hiệu ứng bật lên. Chúc bạn may mắn và thành công trong công việc xây dựng trang web đầy khó khăn nhưng thú vị này.

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ị, vì vậy, đừng bỏ qua nó, bạn có thể xem phần minh họa về biểu mẫu mà 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ị:

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.

Gần đây, đối với một trang web, tôi được yêu cầu tạo biểu mẫu phản hồi cho WordPress trong cửa sổ phương thức. Nghĩa là, khi nhấp vào liên kết “viết thư cho chúng tôi”, thay vì truy cập trang tương ứng, người dùng nên mở một cửa sổ bật lên mới, nơi đặt chức năng gửi tin nhắn. Đây là một giải pháp tương tác hơn, mặc dù không phải ai cũng thích nó. Cá nhân tôi thích cách triển khai cổ điển với trang liên hệ hơn, nhưng các biểu mẫu trên các trang web thì khác - vì vậy sẽ rất hữu ích khi xem xét giải pháp cho vấn đề này. Trong công việc của mình, tôi đã sử dụng 2 plugin: Biểu mẫu liên hệ 7 nổi tiếng và mô-đun Easy Modal để tạo cửa sổ phương thức trong WordPress.

Cập nhật 18/05/2017: Đánh giá theo các đánh giá mới nhất trong kho lưu trữ, trong một số trường hợp có thể có vấn đề với hoạt động của nó. Nếu bạn cũng bị ảnh hưởng bởi điều này, hãy thử giải pháp mới từ nhà phát triển có tên Popup Maker. Một giải pháp thay thế khác có thể được xem xét.

Tôi sẽ không đi sâu vào chi tiết về cách cài đặt và định cấu hình Contact Form 7; tất cả thông tin về nó đều có ở đây. Blog cũng có một bài viết về những gì có thể hữu ích.

Hãy chuyển thẳng đến mô-đun Easy Modal. Bạn sẽ tìm thấy anh ấy. Các nhà phát triển tuyên bố rằng điều này Quyết định tốt nhất tạo các cửa sổ phương thức trên trang web với nhiều tùy chọn thú vị khác nhau để trình bày nội dung.

Hơn 10 nghìn lượt tải xuống, xếp hạng 4,6. Phiên bản hợp lệ của 3.4 là 4.0.8, mặc dù tôi đã chạy thành công trên WP 4.3.1. Mặc dù thực tế là plugin hiện đã được chuyển đổi thành giải pháp Popup Maker mới, nhưng trên trang web wordpress.org và khi tìm kiếm plugin bên trong bảng quản trị, bạn vẫn có thể tìm thấy phiên bản Easy Modal 2.0.17 thông thường. Sử dụng ví dụ của anh ấy, tôi sẽ cho bạn biết về cách tạo cửa sổ phản hồi theo phương thức trong WordPress.

Sau khi cài đặt, một phần cùng tên sẽ xuất hiện, trong đó có một số mục. Chúng ta sẽ cần cái đầu tiên trong số đó - Modals. Bấm vào nút Thêm mới ở đó.

Hành động này sẽ tạo một cửa sổ phương thức mới cho trang WordPress của bạn. Cài đặt thành phần sẽ có 4 tab:

Chung—thông số chung.
Tùy chọn hiển thị - tùy chọn hiển thị.
Tùy chọn đóng - cài đặt để đóng cửa sổ (sử dụng một cú nhấp chuột hoặc nút Esc).
Ví dụ - ví dụ về mã để sử dụng.

Cài đặt chung chứa tên cửa sổ (không hiển thị trên trang web), tiêu đề, nội dung và loại tải xuống. Trong khối nội dung, chuyển sang chế độ HTML, hãy thêm mã ngắn của biểu mẫu phản hồi của bạn vào cửa sổ phương thức.

Loại tải có 2 lựa chọn:

Tải Sitewide (cho toàn bộ trang web).
Mỗi trang/bài đăng (đối với các bài viết và trang cụ thể).

Một lựa chọn rất thú vị. Nếu bạn cần một cửa sổ bật lên sẽ được hiển thị trên tất cả các trang của trang web (ví dụ: liên kết nằm ở thanh bên), thì hãy chọn tùy chọn đầu tiên. Trong trường hợp thứ hai, khối cài đặt tương ứng sẽ xuất hiện trên các trang/bài đăng của trang khi chỉnh sửa:

Bạn có thể kích hoạt và chọn cửa sổ bật lên của riêng mình cho một trang cụ thể. Nếu bạn không chọn hộp này, phần tử sẽ không được tải trên trang web.

Tab thứ hai của các tham số mô-đun là Tùy chọn hiển thị.

Ở đây bạn chỉ ra:

kích thước cửa sổ - tự động, trung bình, thích ứng, nhỏ, lớn, v.v.;
nền - bạn có thể sử dụng nền cho biểu mẫu hoặc hiển thị nó mà không cần nó;
hoạt hình cửa sổ bật lên;
vị trí (vị trí) - chính giữa trên cùng, dưới cùng bên phải, v.v.; cố định hay không;
thụt lề ở đầu màn hình.

Ví dụ về hiển thị đầu ra của cửa sổ phương thức trong WordPress bằng cách sử dụng Plugin dễ dàng Phương thức có thể được tìm thấy trong tab cuối cùng.

Bạn cần chèn mã này thông qua một tiện ích ở thanh bên hoặc soạn thảo văn bản. Nó không khác với bất kỳ mã HTML nào khác, điều duy nhất là lớp của một cửa sổ phương thức cụ thể (eModal-1) được chỉ ra ở đây. Đối với phần tử thứ hai bạn đã tạo, lớp sẽ là eModal-2, v.v. Để tránh mắc lỗi khi chèn mã, cách dễ nhất là sao chép từ trang này.

Trong plugin Easy Modal, ngoài cài đặt cho một thành phần cụ thể, bạn có thể xác định chủ đề cho cửa sổ bật lên (Theme). Về cơ bản phiên bản miễn phí Mô-đun này chỉ có một mẫu, nhưng thế là quá đủ.

TRONG Công cụ này 6 dấu trang:

Chung - cho biết tên của chủ đề;
Lớp phủ - nền (ở đây bạn có thể chọn màu và độ trong suốt của nền của biểu mẫu);
Thùng đựng hàng cài đặt khác nhau chính cửa sổ phương thức (phần đệm, đường viền, bóng);
Tiêu đề—các tham số tiêu đề của cửa sổ bật lên (phông chữ, bóng);
Nội dung — phông chữ và màu sắc của văn bản trong khối;
Đóng - phần tử đóng biểu mẫu (văn bản và thiết kế).

Bạn có thể thấy, vẻ bề ngoài có thể được tùy chỉnh theo ý muốn để phù hợp với nhu cầu của bạn. Tôi có cái này đơn giản biểu mẫu WordPress trong cửa sổ phương thức:

Sau khi thiết lập tất cả các cài đặt, đừng quên lưu chúng (nhấp vào nút Lưu).

Nhân tiện, tôi đã tìm thấy một video về cách làm việc với plugin Easy Modal, minh họa quá trình tạo cửa sổ phản hồi phương thức trong WordPress. Ở đó, giao diện mô-đun hơi lỗi thời (một số cài đặt trông khác), nhưng bạn có thể hiểu được bản chất chung. Có lẽ sẽ dễ hiểu hơn cho ai đó vấn đề này sử dụng video.

Như đã đề cập ở trên, giờ đây plugin Easy Modal (đánh giá theo Trang chính thức) được chuyển đổi thành Trình tạo cửa sổ bật lên. Tôi đã tìm được một mô-đun cùng tên trong kho lưu trữ, nhưng tôi chưa kiểm tra nó. Tôi nói với bạn điều này để bạn biết phải tìm gì nếu Easy Modal trong WordPress ở các phiên bản tiếp theo đột nhiên ngừng hoạt động.

Cả hai giải pháp đều miễn phí, mặc dù chúng có các tiện ích bổ sung trả phí. Chúng cho phép bạn tùy chỉnh nhắm mục tiêu, thêm nhiều chủ đề hơn thiết kế, chứa phân tích và một số tính năng khác. Nếu bạn cần cơ chế cửa sổ phương thức nâng cao hơn, bạn có thể xem xét kỹ hơn các tiện ích mở rộng này.

Đối với nhiệm vụ mở biểu mẫu phản hồi Contact Form 7 trong cửa sổ bật lên, có đủ khả năng cơ bản Phương thức dễ dàng. Hơn thế nữa quyết định này cũng có thể được sử dụng để hiển thị các cửa sổ phương thức khác trong WordPress - các mẹo hữu ích, thông tin thêm và như thế. Với sự có mặt của một biên tập viên chèn HTML mã, bạn có thể hiển thị video, biểu mẫu, v.v. trong cửa sổ bật lên. Nhìn chung, một plugin hữu ích. Nếu bạn có bất kỳ câu hỏi nào về nó, hãy viết trong phần bình luận.

Rất thường xuyên bạn cần tạo một biểu mẫu phản hồi và ẩn nó. Biểu mẫu này sẽ xuất hiện khi bạn nhấp vào nút hoặc dòng chữ trên trang web trong cửa sổ bật lên hộp đèn. Trong bài viết này, chúng tôi sẽ mô tả: Cách tạo biểu mẫu phản hồi trong cửa sổ bật lên cho WordPress. Đầu ra của biểu mẫu đăng ký Feedburner. Cách thực hiện cuộc gọi đến nhiều biểu mẫu trên một trang. Cách đóng cửa sổ với biểu mẫu phản hồi (fancybox) sau khi gửi và chúng tôi sẽ xem xét mọi thứ những sai lầm có thể xảy ra và những quyết định của họ.

Để tạo biểu mẫu phản hồi hoặc các biểu mẫu khác cho trang web trên CMS WP, studio thiết kế "Engine" đề xuất plugin Contact Form 7 và đối với cửa sổ bật lên có hiệu ứng hộp đèn, chúng tôi sẽ sử dụng Easy FancyBox.

Plugin phổ biến nhất, chất lượng cao, dễ cấu hình và sử dụng là Contact Form 7 - với sự trợ giúp của nó, bạn có thể tạo bất kỳ biểu mẫu liên hệ nào và hơn thế nữa. Vì plugin có một số lượng lớn các hình thức và lĩnh vực khác nhau, nó có thể được sử dụng cho nhiều nhiệm vụ.

TRONG trong trường hợp nàyđể gọi nhiều biểu mẫu, hãy chú ý đến những phần này của mã:

6. Đầu ra của biểu mẫu đăng ký Feedburner

ĐẶT MUA

ĐẶT MUA:

Bạn có thể sử dụng mã này cho biểu mẫu đăng ký của mình bằng cách chỉ thay đổi địa chỉ nguồn cấp dữ liệu https://feedburner.google.com/fb/a/mailverify?uri=Cms-info thành địa chỉ của riêng bạn.

Thêm mã sau nếu bạn đang sử dụng plugin có Fancybox, chẳng hạn như Easy Fancybox:
on_sent_ok: $.fancybox.close();
đến khối Cài đặt thêm hình thức của bạn.

Lỗi này có thể xảy ra phiên bản mới nhất Công cụ WordPress, nên thay đổi lớp trong liên kết:
Nhận xét
thay đổi thành:
Nhận xét

Chúng tôi đã thay đổi Fancybox thành Fancybox-inline .

1. Khi tôi nhấp vào liên kết, không có gì xảy ra với biểu mẫu - trong thanh địa chỉđã xuất hiện http://site/#contact_form_pop.
Vấn đề đã được giải quyết bằng cách thay thế plugin Easy FancyBox bằng FancyBox cho WordPress

2. Nếu bạn có một thư viện được kết nối (ví dụ: Thư viện NextGEN) hoặc một chủ đề đã cài đặt hiệu ứng “hộp đèn”, điều sau đây sẽ xảy ra: ảnh được mở bằng hộp đèn tích hợp và cả hộp đèn từ EasyFancy Box, điều đó là, sau đó bạn phải đóng chúng hai lần.
Để tránh điều này, trong cài đặt EasyFancy Box, hãy bỏ chọn hộp kiểm Hình ảnh và ở đầu mã biểu mẫu bật lên, thay thế lớp Fancybox bằng Fancybox-inline . Mã của bạn sẽ trông như thế này:.

Nhận xét

Chỉ vậy thôi, nếu bạn muốn “cảm ơn” chúng tôi, bạn có cơ hội này: ở bên phải có các lựa chọn quyên góp cho sự phát triển của cổng thông tin. Hoặc chia sẻ bài viết trên mạng xã hội của bạn bằng các dịch vụ bên dưới.