Biểu mẫu phản hồi Ajax trong một cửa sổ phương thức. Mẫu phản hồi WordPress: chúng tôi tạo nhanh chóng và hiệu quả

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 vì nó sẽ giúp bạn thiết lập liên hệ nhanh chóng 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ên trang web. Biểu 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, nhiều hình ảnh khác nhau, v.v.

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

Hãy cùng xem các công cụ cần thiết để phát triển cửa sổ bật lên trong Wordpress, một ứng dụng đặc biệt để phát triển và tạo 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 đặt. 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. Bạn nên loại bỏ nó vì nếu bạn có các công cụ bổ sung khác để tạo hoạt ảnh bật lên, hình ảnh sẽ mở hai lần.

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ở, hãy bỏ chọn tùy chọn “Đóng FancyBox khi nhấp vào lớp phủ” trong cài đặt Easy FancyBox, tùy chọn này sẽ đóng cửa sổ khi bạn nhấp vào bên ngoài nó.

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

Chà, phần chuẩn bị sơ bộ “nhàm chán” đã kết thúc, 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 cấu hình sơ bộ của biểu mẫu. 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ờ mục tiêu chính của chúng tôi chỉ đơn giản là học cách tạo các 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ã chương trình mới 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 mã khác. Trong ví dụ của chúng tôi, biểu mẫu mới sẽ được hiển thị trong tiện ích. 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 ; /*padding*/ viền:1px màu đen đặc; /*bóng viền*/ nền:#3399ff; /*mẫu nền*/ text-trang trí:none; /*chuyển văn bản thành không có dòng*/ văn bản- căn chỉnh:giữa; /*căn giữa nhãn*/ color:#ffffff; /*shade of the label*/ -moz-transition: dễ dàng hết 0,6 giây; -webkit-transition: dễ dàng hết 0,6 giây; chuyển tiếp: dễ dàng hết 0,6 giây ; ) /**Thay đổi 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; chuyển tiếp: 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 sẽ xuất hiện ở bên phải hình ảnh (trong ví dụ này http://www.sait.ru/wp-content/uploads/2017/04/depositphotos_2169498-E-mail-internet-icon.jpg) , sao chép nó và thêm nó 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ô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 xin đừng bỏ qua nó! Dưới đây bạn có thể xem minh họa về biểu mẫu tôi đã tạo cũng như tải xuống các tập tin cần thiết cho công việc:

Bước 1. Mô tả chung và hoạt động của phiế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. Form này khá nhỏ nên mình sẽ đặt code của nó bên dưới:

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

Như bạn có thể thấy, xem qua code, thậm chí bằng mắt thường bạn cũng có thể thấy rằng để hiển thị biểu mẫu tốt hơn, tôi đã sử dụng bố cục 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ờ để cửa sổ phương thức biểu mẫu hoạt động hoàn toàn, 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 chưa hiểu gì thì mình sẽ lắng nghe thắc mắc của các bạn ở phần bình luận của 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.

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, hãy sao chép mã đã đăng 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ẽ được hiển thị 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ẽ xảy ra khi được nhấp vào (ví dụ: “Yêu cầu 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

Trong bài viết này tôi sẽ hướng dẫn bạn cách tạo biểu mẫu phản hồi trong WordPress bằng ba loại. Đã lâu rồi tôi không viết về chủ đề kỹ thuật, tôi chỉ thấy thích thôi. Chúng ta hãy xem có những phương pháp nào và cách thực hiện chúng.

Đây là một công cụ rất tốt cho một blogger; nó bổ sung thêm chức năng của WordPress không chỉ cho việc bình luận mà còn đưa ra phản hồi qua email. Mẫu phản hồi của tôi được đặt. Tôi sẽ mô tả cách thực hiện theo ba cách:

Mã, dành cho nâng cao.
Cắm vào.
Sử dụng dịch vụ.
Phản hồi bật lên

Mẫu phản hồi WordPress sẽ được phát triển trong mẫu trang. Tệp page.php trong thư mục chủ đề chịu trách nhiệm về đầu ra.

Tôi cảnh báo bạn ngay, mẫu của mỗi người đều khác nhau, vì vậy các trang có thể được xuất ra bằng một tệp khác.

Nó nằm trong thư mục chứa theme đang hoạt động của bạn, bạn cần mở nó trong bất kỳ trình soạn thảo nào, tôi sẽ hiển thị rõ ràng ở đây. Đầu tiên, tôi sẽ cho bạn xem nội dung trang.php của tôi.

Trang: ()

Ở đầu đoạn mã này, chúng tôi đặt tập lệnh sau.

Bây giờ thì khó hơn, bạn cần tìm vị trí trong ví dụ đầu tiên nơi nội dung được xuất ra; một dòng thường chịu trách nhiệm cho chức năng này.

Thay vào đó chúng tôi chèn các lệnh này.

Cảm ơn bạn, thông điệp của bạn đã được gửi đi. Xin lỗi, đã xảy ra lỗi.