Tạo biểu mẫu trong bảng quản trị. Kết nối các mô-đun bổ sung

Biểu mẫu liên hệ là một thuộc tính không thể thiếu của hầu hết các trang web. Đây là lý do tại sao có rất nhiều plugin biểu mẫu liên hệ trong danh mục WordPress. Một trong những phổ biến nhất là Contact Form 7. Plugin cho phép bạn tạo bất kỳ loại biểu mẫu nào; rất linh hoạt và dễ cấu hình; đã phát triển trong nhiều năm và có nhiều bước phát triển.

Tạo và hiển thị các biểu mẫu liên hệ

Tạo biểu mẫu trong bảng quản trị

Sau khi cài đặt plugin, mục menu "Biểu mẫu liên hệ 7" sẽ xuất hiện, qua đó bạn có thể tạo và xóa biểu mẫu.

Biểu mẫu trong ảnh được tạo tự động khi plugin được kích hoạt.

Chúng tôi sẽ sử dụng biểu mẫu mặc định, để thực hiện việc này, chúng tôi sẽ tạo trang “Liên hệ với tôi” và chèn mã ngắn của biểu mẫu vào đó.

Phần trước của trang web

Bây giờ hãy lưu bài viết và xem biểu mẫu của chúng ta trông như thế nào (sử dụng chủ đề Twenty Sixteen):

Hình ảnh hiển thị biểu mẫu sau khi thư được gửi đi (điều này được thể hiện bằng thông báo ở cuối biểu mẫu).

Tùy chỉnh biểu mẫu (tạo các biểu mẫu phức tạp)

Ví dụ trên cho thấy cách chèn một biểu mẫu liên hệ được tạo sẵn và rất đơn giản. Bây giờ hãy xem cách tạo một biểu mẫu phức tạp hơn. Để thực hiện việc này, hãy quay lại bảng quản trị, quay lại trình quản lý biểu mẫu và chỉnh sửa biểu mẫu mặc định.

Ở trường trên cùng - tên của biểu mẫu (nó chỉ hiển thị trong bảng quản trị), hãy chỉ ra một tên rõ ràng đối với bạn, ví dụ: “Phản hồi về trang web”, “Mẫu đơn xin việc”, “Biểu mẫu nhận xét" và như thế.

Bên dưới tiêu đề là một shortcode. Chúng tôi sử dụng nó trong hồ sơ để hiển thị biểu mẫu.

Và bên dưới là bốn tab:

1. Mẫu biểu mẫu
2. Thư
3. Cài đặt thêm

Chúng ta hãy xem xét từng tab riêng biệt.

Mẫu biểu mẫu

Trong tab này, bạn có thể tùy chỉnh các trường và giao diện của biểu mẫu. Khu vực làm việc là Trình soạn thảo HTML W.P. Chỉ thay vì các nút thông thường, chúng ta mới thấy các nút để chèn các trường biểu mẫu khác nhau.

Bố cục biểu mẫu

Để bố trí, bạn có thể sử dụng thẻ html và mã ngắn plugin. Mã ngắn thêm trường biểu mẫu và thẻ html cho phép bạn tạo tùy chỉnh Cấu trúc HTML. Ví dụ: biểu mẫu mặc định của chúng tôi trông như thế này:

Tên của bạn (bắt buộc) Email của bạn (bắt buộc) Chủ thể Tin nhắn

Và khi hiển thị trong bài viết, nó sẽ chuyển thành dạng HTML này:

Cú pháp mã ngắn

Hãy nhấp vào nút "Văn bản". Một cửa sổ mở ra nơi chúng ta có thể chỉ định các thuộc tính cho trường văn bản. Chỉ định và nhấp vào "Chèn thẻ".

Thẻ sau đó sẽ được chuyển đổi thành trường văn bản có mã html:

Mã ngắn có thể được tạo thuận tiện bằng cách sử dụng trình tạo mã ngắn.

Nhưng hàm tạo không cho phép bạn thay đổi mã ngắn (bạn chỉ có thể tạo mã ngắn ở đó). Có hai cách để thay đổi mã ngắn:

1. xóa và tạo một cái mới bằng cách sử dụng hàm tạo.
2. Tìm hiểu cú pháp và sửa mã ngắn trường theo cách thủ công.

Bạn có thể tự mình tìm ra nó với nhà thiết kế.

Và ở đây chúng ta sẽ xem xét cú pháp của shortcode.

Ví dụ: hãy xem xét thẻ trường văn bản với các tùy chọn bổ sung:

Chữ (yêu cầu) Loại trường: văn bản, chọn, mật khẩu, số, v.v. (V trong trường hợp này trương Văn bản). Xác định phần tử biểu mẫu mà thẻ của chúng tôi sẽ được chuyển đổi thành và do đó loại dữ liệu nào sẽ được chấp nhận. * Dấu hoa thị làm cho trường này là bắt buộc (biểu mẫu sẽ không được gửi và thông báo sẽ được hiển thị rằng trường này phải được điền vào). tên khách hàng (yêu cầu) Tên của trường được sử dụng làm thuộc tính tên trong đầu vào và cũng được sử dụng khi tạo mẫu cho thư đã gửi. id:my-id Thuộc tính id trong đầu vào có giá trị my-id. Dùng để trang trí. class:my-class Thuộc tính lớp trong đầu vào có giá trị my-class. Dùng để trang trí. giữ chỗ "Nhập tên" Использовать текст "Введите имя" как placeholder. !}

Thực hiện theo thứ tự của các thuộc tính thẻ: đầu tiên là loại trường, sau đó là tên của nó và chỉ sau đó là các tùy chọn bổ sung.

Các loại trường

• Các trường văn bản: văn bản, email, số điện thoại, url, vùng văn bản
• Các trường số: số, phạm vi
• Trường ngày: ngày
• Hộp kiểm, radio, danh sách: hộp kiểm, radio, chọn
• Trường tải tệp lên: tệp
• CAPTCHA: captchac và captchar
• Thăm dò ý kiến: bài kiểm tra
• Trường "Chấp nhận": chấp nhận
• Nút gửi: gửi
• Loại trường tùy chỉnh

Mẫu thư

Trong tab thứ hai, bạn có thể tinh chỉnh mẫu (bố cục) và thuộc tính của thư đã gửi. Trong các trường của tab này, bạn có thể sử dụng thẻ trường biểu mẫu đặc biệt - điều này giúp bạn có thể truyền dữ liệu được chỉ định trong biểu mẫu bằng một chữ cái.

Thẻ bao gồm các tên trường từ mẫu biểu mẫu. Ví dụ: chúng tôi đã tạo một trường văn bản có tên: . Bây giờ bạn có thể sử dụng thẻ trong mẫu email. Trong thư, thay vì thẻ này, giá trị trường do người dùng nhập (tên đầy đủ) sẽ được thay thế.

Tiêu đề thư:

Gửi ai - Hộp thư điện tử, nơi lá thư sẽ được gửi đi. Bạn có thể chỉ định bao nhiêu hộp tùy thích, cách nhau bằng dấu phẩy.

Từ ai - tên và email, lá thư đến từ ai. Thông thường thư máy chủ được chỉ định ở đây (ví dụ: [email được bảo vệ]).

Bạn có thể chỉ định bất kỳ email nào, nhưng nếu miền email khác với miền trang web thì biểu mẫu sẽ không sẽ được kiểm nghiệm và sẽ “chửi thề” với thông số này, mặc dù các bức thư vẫn sẽ được gửi đi.

Chủ đề - Tiêu đề của bức thư. Nó sẽ làm rõ dữ liệu được gửi từ hình thức nào. Ví dụ: chủ đề của bức thư là “Lỗi trên trang web”, “Đặt hàng gọi lại", v.v. Chọn một tiêu đề giúp làm việc với các chữ cái đã nhận được dễ dàng hơn.

• Tiêu đề bổ sung - Theo mặc định, Trả lời: được viết ở đây. Tiêu đề Trả lời cho chúng tôi biết rằng email này có thể được trả lời bằng cách nhấp vào nút "Trả lời" trong chương trình thư và thẻ biểu mẫu là tên của trường trong mẫu. Email do người dùng chỉ định sẽ được chèn thay vì thẻ này. Bạn sẽ nhận được một cái gì đó giống như Trả lời: [email được bảo vệ].

Nội dung của bức thư

Đây là cái tiếp theo một phần quan trọng tab này. Nội dung của bức thư được chỉ định ở đây. Trong văn bản, chúng tôi sử dụng các thẻ biểu mẫu giống nhau (tên trường từ mẫu biểu mẫu).

Hãy nhìn vào chữ cái mặc định:

Từ:<>Chủ đề: Tin nhắn: -- Gửi từ trang web Nghiên cứu plugin Contact Form 7 (http://test-wp.ru)

Chúng tôi có 4 trường mà người dùng đã điền. Sau khi gửi thư, các thẻ sẽ chuyển thành giá trị và chúng ta sẽ nhận được thư sau:

Từ: Dmitry Chủ đề: Câu hỏi về Contact Form 7 Tin nhắn: Xin chào! Tôi có câu hỏi về plugin Contact Form 7. Làm cách nào để định cấu hình nó? -- Gửi từ trang web Nghiên cứu plugin Contact Form 7 (http://test-wp.ru)

Các trường tùy chọn trong nội dung email

Nếu người dùng không điền vào một trường nhưng nó được sử dụng trong phần nội dung của bức thư thì phần nội dung của bức thư sẽ không đầy đủ. Ví dụ: nội dung ghi Man from the City, nhưng người dùng không điền vào trường, nghĩa là trong thư chúng ta sẽ nhận được Man from the City... Dòng này trong thư là thừa. Để xóa dòng này khỏi tin nhắn, hãy chọn hộp kiểm "Loại trừ hiển thị các dòng có thẻ tin nhắn trống". Xin lưu ý rằng điều này sẽ chỉ hoạt động nếu văn bản và mã ngắn của trường nằm trên cùng một dòng.

Tùy chọn "Sử dụng định dạng email HTML". Cho phép bạn sử dụng các thẻ HTML trong nội dung của bức thư. Trong trường hợp này, bạn có thể sử dụng giới hạn danh sách HTML thẻ, bởi vì không phải tất cả khách hàng email hoặc dịch vụ có thể xử lý chính xác HTML phức tạp dấu hiệu Có thể sử dụng: bảng, danh sách có dấu đầu dòng, độ đậm, đoạn văn, v.v. Tìm kiếm trên web để biết thêm chi tiết.

Contact Form 7 cho phép bạn gửi thư đến hai địa chỉ và cài đặt cho mỗi thư là khác nhau. Điều này có thể hữu ích khi bạn cần gửi thư cho quản trị viên trang web với thông tin đầy đủ và một bản sao cho người quản lý, chỉ chứa dữ liệu đơn hàng.

Thông báo khi gửi biểu mẫu

Trong tab này, bạn có thể chỉnh sửa các thông báo mà biểu mẫu hiển thị trong một tình huống nhất định: khi gửi thư thành công hoặc không thành công hoặc khi có lỗi.

Thẻ mẫu email không hoạt động trong các trường này.

Cài đặt thêm

Tab này dành cho người dùng nâng cao và cho phép bạn mở rộng khả năng của biểu mẫu bằng mã JS. Ví dụ: đăng sự kiện để phân tích.

Tôi sẽ nói về việc sử dụng chức năng này trong một bài viết riêng.

Biểu mẫu liên hệ cực kỳ hữu ích cho trang web của bạn - nó giúp ẩn địa chỉ email của bạn (giảm thư rác) và giúp người dùng dễ dàng liên hệ trực tiếp với bạn qua trang web.

Nếu bạn đã tạo một trang Liên hệ chúng tôi trên một trang WordPress, việc thêm biểu mẫu phản hồi, thiết lập nó và bắt đầu nhận tin nhắn sẽ không khó.

nhất cách dễ dàng Cách tạo biểu mẫu phản hồi là sử dụng – có nhiều plugin khác nhau và bạn có thể chọn bất kỳ plugin nào. Tuy nhiên, trong hướng dẫn này, chúng tôi sẽ sử dụng Contact Form 7.

Với hơn 3 triệu lượt cài đặt, Mẫu liên hệ 7 là mẫu phản hồi được sử dụng rộng rãi nhất cho WordPress. Nó trực quan giao diện rõ ràng Và cài đặt nhanh sẽ giúp bạn tạo biểu mẫu phản hồi trong vài phút.

Trước khi bắt đầu hướng dẫn này, bạn sẽ cần những điều sau:

• Truy cập bảng điều khiển Quản lý WordPress

Bước 1 – Cài đặt Contact Form 7

1. Đăng nhập vào bảng điều khiển WordPress của bạn và nhấp vào Plugin → Thêm mới trong menu bảng điều khiển bên trái.
2. Tìm thấy Mẫu liên hệ 7 trong tìm kiếm và nhấp chuột Cài đặt.
3. Sau khi cài đặt, nhấp vào Kích hoạtđể kích hoạt plugin.

Bước 2 – Cách tạo biểu mẫu phản hồi

Sau khi kích hoạt plugin, một phần mới sẽ xuất hiện ở menu bên trái của bảng điều khiển Mẫu liên hệ 7.

1. Nhấp chuột Mẫu liên hệ 7 → Thêm mớiđể tạo biểu mẫu đầu tiên của bạn.
2. Nhập tên mẫu phản hồi của bạn, ví dụ Mẫu liên hệ WordPress.
3. Một số nhãn và vùng văn bản đã được đặt để giúp bạn hiểu quy trình. Bạn có thể xóa chúng hoặc thêm nhãn và vùng văn bản mới bằng cách chọn chúng từ danh sách ở trên cùng.

Nếu bạn không chắc chắn mình cần thành phần biểu mẫu nào, hãy để nguyên chúng, bạn có thể quay lại và chỉnh sửa chúng sau.

Tùy thuộc vào các thành phần bạn chọn, mã của bạn sẽ trông giống như thế này:

Tên của bạn (bắt buộc) Email của bạn (bắt buộc) Chủ thể Tin nhắn

• Bạn có thể thêm và bớt các phần tử tùy theo nhu cầu của mình. Để thuận tiện, hãy sử dụng các công cụ đặc biệt trên khu vực có hình dạng đó.

• Dấu * trong mã có nghĩa là trường này là bắt buộc.

Bước 3 – Thiết lập định dạng tin nhắn

Khi khách truy cập gửi tin nhắn qua biểu mẫu phản hồi, bạn sẽ nhận được tin nhắn có tên, thông tin liên hệ và nội dung của nó.

Bạn có thể tùy chỉnh thông báo này trong phần Thư– một số thẻ mà bạn có thể sử dụng trong thư được liệt kê phía trên chính bức thư đó. Hãy thử thay đổi mẫu email bằng cách thêm một số thẻ vào mẫu - bạn có thể quay lại bất kỳ lúc nào và thay đổi lại.

QUAN TRỌNG! Hãy chắc chắn rằng bạn nhập địa chỉ chính xác email trong hộp Gửi ai– đây là địa chỉ mà tất cả tin nhắn sẽ được gửi đến.

Bước 4 – Thiết lập thông báo

Trong tab Thông báo bạn có thể tùy chỉnh thông báo mà khách truy cập sẽ thấy khi email được gửi thành công hoặc khi có lỗi (địa chỉ email không chính xác hoặc không điền vào một trong các trường bắt buộc, v.v.).

Bước 5 - Lưu và xuất bản biểu mẫu

Khi thiết lập xong, bạn có thể lưu các thay đổi bằng cách nhấp vào nút Cứuở phía trên bên phải của bảng điều khiển.
Sau khi lưu, một mã ngắn sẽ xuất hiện ở đầu trang. Nó sẽ được đánh dấu bằng màu xanh lam và trông giống như thế này:

1. Chọn shortcode và sao chép nó
2. Dán mã ngắn trên trang, bài đăng hoặc tiện ích nơi bạn muốn biểu mẫu xuất hiện

1. Kết quả sẽ giống như thế này

Bước 6 – Kiểm tra biểu mẫu liên hệ cho WordPress

Điều rất quan trọng là phải kiểm tra hoạt động của biểu mẫu phản hồi và chú ý đến tính chính xác của nó. vẻ bề ngoài. Ngoài ra, hãy đảm bảo rằng các tin nhắn thông qua biểu mẫu được gửi một cách nhất quán.

Để thực hiện việc này, chỉ cần truy cập trang trên trang web của bạn có biểu mẫu và gửi tin nhắn bằng cách sử dụng nó - bạn luôn có thể quay lại trình chỉnh sửa biểu mẫu và thực hiện các thay đổi cần thiết.

Phần kết luận

Hướng dẫn này đã giúp bạn tìm hiểu cách tạo biểu mẫu liên hệ bằng plugin WordPress – Biểu mẫu liên hệ 7. Giờ đây, bạn có thể nhận tin nhắn từ người dùng trực tiếp thông qua trang web.

Bạn muốn biết nhiều hơn nữa? Bạn có thể thử nghiệm các thẻ và mẫu cũng như thay đổi hầu hết mọi thứ. Bạn cũng có thể thử cài đặt Chim hồng hạc– plugin lưu trữ thư để lưu trữ tất cả thư đã nhận trong cơ sở dữ liệu (điều này khá hữu ích nếu bạn gặp sự cố với máy chủ thư của mình).

Biểu mẫu liên hệ là một thuộc tính cần thiết của hầu hết các trang web. Với sự giúp đỡ của họ, việc liên lạc trực tiếp với khách truy cập sẽ được thực hiện, đặc biệt nếu trang web không cung cấp các phương tiện liên lạc khác.

Danh mục WordPress chứa hàng tá plugin biểu mẫu liên hệ. Nhưng phổ biến nhất trong số đó (hơn một triệu lượt cài đặt) là Biểu mẫu liên hệ 7, bằng cách sử dụng biểu mẫu này, chúng ta sẽ xem xét việc tạo biểu mẫu liên hệ trên một trang web.

Tạo biểu mẫu

Nếu bạn sử dụng chủ đề hoặc , thì bạn không cần cài đặt bất kỳ plugin nào - mọi thứ đã được triển khai! Để thực hiện việc này, chỉ cần chèn một mã ngắn vào trang biểu mẫu liên hệ. .

Sau khi cài đặt và kích hoạt plugin, toàn bộ phần sẽ xuất hiện trong bảng quản trị:

Hãy tạo một biểu mẫu đơn giản sẽ có sẵn trên trang Kết nối với chúng tôi. Đầu tiên chúng ta hãy tiếp tục Mẫu liên hệ 7 > Thêm mới, nơi bạn phải nhập tên của biểu mẫu. Dưới đây là khối mẫu biểu mẫu, tức là một tập hợp các trường mà người dùng sẽ nhìn thấy và điền vào trên trang web.

Vì vậy, bằng cách nhập tên, ví dụ: “ Kết nối với chúng tôi" và nhấn nút Cứu Bằng cách này, bạn sẽ tạo một biểu mẫu liên hệ sẵn sàng hiển thị. Để xem nó, bạn cần phải đi Biểu mẫu liên hệ 7 > Biểu mẫu liên hệ.

Chú ý đến giá trị trường Mã ngắn. Mã trong ngoặc vuông sẽ được sử dụng để hiển thị biểu mẫu trên trang web.

Hiển thị biểu mẫu trên trang web

Để khách truy cập trang web sử dụng biểu mẫu liên hệ, nó cần được hiển thị ở đâu đó. Đối với điều này, chúng tôi sẽ tạo ra trang riêng với tiêu đề như " Kết nối với chúng tôi". Vậy chúng ta hãy tiếp tục Trang > Thêm mới. Trong tiêu đề chúng tôi viết “ Kết nối với chúng tôi“, và chèn mã ngắn ở trên vào trường bên dưới. Kết quả sẽ là:

Không thể tưởng tượng một trang web hiện đại mà không có biểu mẫu phản hồi. Đây là một phần không thể thiếu cần có trên bất kỳ trang web nào, bất kể chủ đề của nó là gì. Mâu liên hệ cho phép quản trị viên web giao tiếp đầy đủ với khách truy cập mà không cần xuất bản dưới dạng kết nối miễn phí dữ liệu của bạn, chẳng hạn như email hoặc số điện thoại.

Điều này cho phép bạn không chỉ trả lời câu hỏi của khách truy cập mà thậm chí còn xử lý các đơn đăng ký hoặc đơn đặt hàng. Nhưng việc mở địa chỉ email của bạn có nguy cơ khiến nó sớm tràn ngập thư rác. Để làm điều này, các chương trình thư rác sẽ lùng sục các không gian mở suốt ngày đêm mạng toàn cầuđể tìm kiếm địa chỉ mới nơi bạn có thể gửi thông tin không cần thiết. Do địa chỉ gửi thư lộn xộn, bạn có thể không nhận thấy lá thư quan trọng. Nhưng plugin biểu mẫu liên hệ cho trang web đã giải quyết thành công vấn đề này. Người dùng chỉ phải điền vào một trường đặc biệt để lọc bot, chẳng hạn như nhập hình ảnh xác thực và chỉ những thư cần thiết mới được gửi đến hộp thư của chủ sở hữu trang web.

Biểu mẫu liên hệ trên trang web giải quyết những nhiệm vụ gì?

Tuy nhiên, sự yên tâm cho chủ sở hữu web không phải là nhiệm vụ duy nhất mà biểu mẫu liên hệ có thể giải quyết thành công. Cô quản lý để thực hiện khá thành công một số chức năng khác. Điều quan trọng nhất trong số đó là:

1. Duy trì liên lạc với khán giả của trang web. Khó có ai có thể tranh cãi với thực tế là không ai chỉ điền vào biểu mẫu phản hồi. Rất có thể, người thực hiện việc này có một số câu hỏi mà anh ta muốn hỏi riêng tác giả của trang web. Kết quả là chủ sở hữu trang web đã nhận được một người dùng quan tâm và thậm chí có thể khách hàng tiềm năng, người đã chia sẻ chi tiết liên lạc của mình. Tức là mọi việc từ nay trở đi sẽ phụ thuộc vào chủ sở hữu trang web.
2. Kêu gọi hành động. Lời kêu gọi hành động là gì và nó thúc đẩy người dùng thực hiện các hành động khác nhau như thế nào thì không cần phải giải thích. Nhưng chính xác thì điều này có thể được liên kết với biểu mẫu liên hệ trên trang web. Ví dụ: để đổi lấy thông tin liên hệ của người dùng, bạn có thể cung cấp cho anh ta một bản tin đã đóng với vật liệu hữu ích, giảm giá khi mua hàng trong cửa hàng trực tuyến, tham gia rút thăm trúng thưởng, v.v. Những lời kêu gọi như vậy không chỉ có thể giúp thu thập cơ sở dữ liệu liên hệ để tương tác thêm mà còn thu hút các khách hàng tiềm năng mới.
3. Làm cho các trang trở nên sống động bằng các hình thức tương tác. Biểu mẫu liên hệ có thể không chỉ ở dạng tĩnh. Các hình thức bật lên, mặc dù có vẻ khó chịu đối với nhiều người dùng trang web, nhưng lại có thể “hồi sinh” các trang web. Điều chính khi tạo các hình thức như vậy là không lạm dụng nó.

Làm thế nào để có được một hình thức liên lạc?

Không khó để cung cấp cho trang web của bạn một hình thức như vậy. Biểu mẫu liên hệ HTML chỉ có một vài trường là một nhiệm vụ hoàn toàn có thể giải quyết được đối với những người làm việc tự do chuyên nghiệp, những người có thể tạo nó với một số tiền nhỏ. Ngoài ra, mã biểu mẫu liên hệ có thể được tìm thấy độc lập trên Internet. Nhưng những phương pháp như vậy có nhiều nhược điểm. Thực tế là hình thức tương tác như vậy là bộ mặt của trang web, có nghĩa là nó phải hấp dẫn. Phải làm gì nếu có điều gì đó không phù hợp với bạn, đặc biệt là sau một thời gian? Tôi có thể tìm nhà phát triển đã viết mã biểu mẫu ở đâu để thực hiện những thay đổi cần thiết? Và nếu việc gửi biểu mẫu php được tìm thấy trong không gian mở mạng lưới toàn cầu, và không có kỹ năng lập trình thì việc thay đổi hình thức dường như hoàn toàn không thể.

Bên cạnh đó, biểu mẫu liên hệ sẽ hoạt động như kim đồng hồ, bởi vì tất cả các tin nhắn đã gửi phải đến tay người nhận và không bị thất lạc trên đường đi. Hãy tưởng tượng nếu một khách hàng lớn gửi đề nghị hợp tác thông qua hình thức phản hồi nhưng tác giả trang web hoặc người quản lý cửa hàng trực tuyến không nhận được? Có lẽ không cần phải giải thích rằng anh ta sẽ không gửi lại lời đề nghị của mình mà sẽ đến gặp những đối thủ cạnh tranh có hình thức liên hệ hoạt động bình thường. Tất cả những điều này dẫn đến việc không chỉ mất tiền, khách hàng mà còn cả danh tiếng, cuối cùng có thể còn tồi tệ hơn.

FormDesigner là giải pháp lý tưởng để tạo biểu mẫu liên hệ

Sử dụng công cụ thiết kế biểu mẫu trực tuyến FormDesigner, tạo biểu mẫu của riêng bạn hình thức tương tác phản hồi đã trở nên dễ dàng hơn bao giờ hết. Đầu tiên, nó rất nhanh, chỉ cần vài cú nhấp chuột và biểu mẫu đã sẵn sàng để đăng lên trang web. Thứ hai, làm việc với nhà thiết kế cực kỳ đơn giản; bạn không cần phải là lập trình viên hay có kỹ năng hay kiến ​​thức đặc biệt. Hình thức gửi email nhờ nhà thiết kế sẽ được tạo ra ngay cả bởi một quản trị viên web mới làm quen nhờ sự dễ hiểu và giao diện đơn giản. Thứ ba, luôn có thể thực hiện các thay đổi đối với biểu mẫu đã được tạo theo mong muốn hoặc nhu cầu mới. Chỉnh sửa biểu mẫu dễ dàng như tạo một biểu mẫu mới và nhờ hiển thị trực tuyến các thay đổi, bạn có thể xem ngay tất cả các thay đổi được thực hiện đối với biểu mẫu. Ngoài ra, trang web còn cung cấp các lợi ích khác cho người dùng, bao gồm:

• Tạo biểu mẫu liên hệ với khả năng gửi tệp cho chủ sở hữu trang web;
• Thông báo lỗi khi tạo biểu mẫu;
• Khả năng tạo các hình thức đa ngôn ngữ;
• Nhà thiết kế trực quan của các biểu mẫu đã tạo;
• Thống kê chi tiết cho tất cả các yêu cầu và nhiều hơn nữa.

Làm việc với dịch vụ FormDesigner

Để bắt đầu làm việc với nhà thiết kế tiện lợi, bạn cần thực hiện thủ tục đăng ký đơn giản. Sau đó, bạn có thể tiến hành trực tiếp để tạo biểu mẫu liên hệ mà bạn cần. Nhân tiện, bạn có thể đăng ký bằng cách đăng nhập bằng cách sử dụng tài khoản trên một mạng xã hội.

Phần đầu tiên của trình thiết kế cho phép bạn định cấu hình giao diện của các bức thư được gửi qua biểu mẫu phản hồi, đặt tính năng bảo vệ chống lại rô bốt và cũng chọn hành động sẽ xảy ra khi bức thư được gửi thành công.

Phần thứ hai “Thành phần” là cần thiết để bạn có thể thêm, xóa hoặc đơn giản là chỉnh sửa các trường cần điền. Chúng có thể được tạo không chỉ bằng văn bản mà còn bằng kỹ thuật số và thậm chí bằng hình ảnh. Cũng trong phần này bạn có thể thiết lập các nút mạng xã hội.

Sau này, tất cả những gì còn lại là nhận mã của biểu mẫu liên lạc do chính bạn chuẩn bị và cài đặt nó trên trang web của nó.

Do đó, trình thiết kế biểu mẫu trực tuyến cho phép bạn tạo và chỉnh sửa biểu mẫu liên hệ cho bất kỳ trang web nào theo mong muốn và nhu cầu của chủ sở hữu chỉ trong vài phút. Bất kỳ người dùng nào cũng có thể nhanh chóng chỉnh sửa biểu mẫu của mình, thêm trường mới vào hoặc xóa chúng yếu tố không cần thiết, hãy tạo thông báo lỗi của riêng bạn khi sử dụng biểu mẫu. Và người dùng nâng cao chắc chắn sẽ quan tâm đến khả năng làm việc với thiết kế bằng cách điều chỉnh các thuộc tính CSS biểu mẫu đã tạo theo sở thích của bạn để nó phù hợp với thiết kế của trang web.

Cũng cần lưu ý rằng nếu có bất kỳ câu hỏi nào khi làm việc với dịch vụ, bạn có thể liên hệ với bộ phận hỗ trợ kỹ thuật một cách an toàn, điều này sẽ giúp giải quyết các vấn đề phát sinh. Bạn có thể bắt đầu sử dụng công cụ xây dựng trực tuyến hoàn toàn miễn phí, đồng thời có quyền truy cập vào tất cả chức năng quan trọng nhà thiết kế trực tuyến. Sử dụng dịch vụ FormDesigner, việc tạo biểu mẫu web của riêng bạn cho một trang web trở nên cực kỳ đơn giản và nhanh chóng.

Video hướng dẫn tạo contact form trên website

Cho dù bạn đang tạo một blog đơn giản, một trang web công ty lớn hay một dự án danh mục đầu tư dựa trên WordPress, trang nhận xét hầu như luôn luôn là một yếu tố cần thiết. Và tốt hơn hết bạn nên sử dụng biểu mẫu liên hệ công khai để nhận phản hồi thay vì chia sẻ công khai địa chỉ email của mình (những kẻ gửi thư rác thích những địa chỉ như vậy).

Tất nhiên, có rất nhiều plugin WordPress tuyệt vời hiện có. Nhưng tại sao lại tạo gánh nặng cho trang web của bạn với các plugin rườm rà và các truy vấn cơ sở dữ liệu bổ sung, nếu bạn có thể viết biểu mẫu phản hồi đơn giản của riêng mình bằng cách sử dụng một lượng nhỏ mã?

| Nguồn tải xuống |

Lợi ích của việc tạo biểu mẫu liên hệ của riêng bạn

Các plugin rất tuyệt vời nhưng nhiều plugin trong số đó có chức năng không cần thiết mà bạn không cần và sẽ làm quá tải cơ sở dữ liệu cũng như trang web của bạn. Điều này sẽ xảy ra do việc thực hiện bổ sung Mã PHP, thêm biểu định kiểu CSS và tập tin JS trong tiêu đề của trang... và đến một lúc nào đó bạn chỉ muốn tránh xa tất cả các loại plugin, cho dù chúng có tuyệt vời đến đâu.

Nếu bạn không có kỹ năng viết mã thì tôi phải thừa nhận: tay bạn hơi bó buộc và bạn sẽ phải sử dụng một trong những plugin hiện có. Nhưng nếu bạn đã quen thuộc với nó ở bất kỳ cấp độ nào (chúng tôi sẽ cho rằng bạn có những kỹ năng như vậy nếu bạn vẫn đang đọc bài viết này), thì bạn nên cân nhắc việc phát triển biểu mẫu của riêng mình cho trang web. Đây là những gì thuận lợi có quyết định sau:

• Tối ưu hóa- việc sử dụng mã dư thừa, đặc biệt là mã bạn không cần, sẽ dẫn đến việc đạt đến giới hạn tối đa cho phép của nhà cung cấp dịch vụ lưu trữ của bạn. Và ngay cả khi bạn có nguồn cung cấp tài nguyên lớn trên máy chủ, việc tối ưu hóa sẽ luôn mang lại lợi ích cho trang web của bạn.
• Độ sạch của mã- Ngoài việc tối ưu hóa hoạt động của chính máy chủ, mã “sạch” sẽ trở thành yếu tố chính quyết định tốc độ tải trang của trang. Viết mã của riêng bạn mang lại cho bạn một lợi thế: bạn chỉ sử dụng những gì bạn cần và không cần phải tải xuống nhiều "rác" chịu trách nhiệm về chức năng khá đơn giản trên trang web của bạn. Điều này cũng có tác động tích cực đến SEO.
• Sự hài lòng từ toàn quyền kiểm soát - Đừng bao giờ đánh giá thấp sức mạnh của sự kiểm soát hoàn toàn. Việc có toàn quyền kiểm soát trang web của mình sẽ thúc đẩy bạn trở thành một nhà phát triển/nhà thiết kế đam mê hơn so với khi bạn chỉ sử dụng một loạt mã tạo sẵn. Và ngay cả khi bạn được cung cấp mã ở dạng hoàn chỉnh, tốt hơn hết bạn nên “xem qua” nó theo cách thủ công hơn là chỉ “sao chép và dán”. Việc nhập mã bằng tay sẽ giúp bạn hiểu cách hoạt động của plugin.

Hãy chuyển sang mã

Được rồi, nói nhảm đủ rồi: hãy bắt đầu viết một số mã! Chúng ta sẽ không phải xử lý nhiều mã hoặc tốn nhiều công sức, vì vậy ngay cả khi bạn là người mới làm quen với PHP và/hoặc WordPress, bạn sẽ hiểu đoạn mã sau mà không gặp bất kỳ vấn đề gì khi làm theo hướng dẫn của tôi cho các phần đó của mã mà bản thân bạn không thể “nhận ra” được".

Mã được đề cập có thể được chèn trực tiếp vào một tệp hàm.php chủ đề của bạn và áp dụng nó như một plugin. Tôi khuyên bạn nên thiết kế mã dưới dạng một plugin riêng biệt. Khi chuyển đổi giữa các chủ đề, bạn sẽ không phải thêm lại chức năng tương tự. Hãy bắt đầu với thông tin chuẩn về phần bổ trợ :

Phiên bản: 1.0 Tác giả: Barış Ünver URI tác giả: http://beyn.org/ */ // Dòng nhận xét này thay thế đoạn mã cực kỳ đơn giản mà chúng ta sắp viết. Vì vậy, bạn thực sự không cần phải đọc cái này. ?>

Chức năng trợ giúp nhỏ: get_the_ip()

Như bạn có thể đoán từ tên của hàm, chúng tôi sử dụng nó để lấy giá trị thực địa chỉ IP người dùng, ngay cả khi người dùng này “đến” với chúng tôi thông qua máy chủ proxy. Tất nhiên, giải pháp này không hiệu quả 100% trong việc bảo vệ và thu thập thông tin về người dùng, tuy nhiên, chúng tôi sẽ nhận được một số thông tin bổ sung về người dùng.

Chúng tôi chủ yếu sẽ sử dụng các biến khác để $_SERVER: HTTP_X_FORWARDED_FOR, HTTP_CLIENT_IP và REMOTE_ADDR . Và đây là mã của chính nó:

Hàm wptuts_get_the_ip() ( if (isset($_SERVER["HTTP_X_FORWARDED_FOR"])) ( return $_SERVER["HTTP_X_FORWARDED_FOR"]; ) elseif (isset($_SERVER["HTTP_CLIENT_IP"])) ( return $_SERVER["HTTP_CLIENT_IP" ]; ) khác ( return $_SERVER["REMOTE_ADDR"]; ) )

Mã ngắn

Chúng tôi sẽ chia shortcode thành 3 phần để bạn hiểu rõ hơn, nhưng trước tiên bạn cần nhớ mở và đóng chức năng trong shortcode:

Hàm wptuts_contact_form_sc($atts) ( // Dòng nhận xét này cũng giữ vị trí của mã ngắn đơn giản nhưng tuyệt vời tạo ra biểu mẫu liên hệ của chúng tôi. Tuy nhiên, bạn vẫn đang lãng phí thời gian để đọc nhận xét này. Hoan hô. ) add_shortcode( "liên hệ", "wptuts_contact_form_sc");

Các thuộc tính của shortcode của chúng tôi

Chúng ta cần đặt một số thuộc tính để làm cho shortcode linh hoạt trong khi vẫn dễ sử dụng. Đây là những thuộc tính sau:

extract(shortcode_atts(array(// nếu bạn không cung cấp địa chỉ email, shortcode sẽ chọn địa chỉ email của quản trị viên: "email" => get_bloginfo("admin_email"), "subject" => "", "label_name" => "Tên của bạn", "label_email" => "Địa chỉ email của bạn", "label_subject" => "Chủ đề", "label_message" => "Tin nhắn của bạn", "label_submit" => "Gửi", // thông báo lỗi khi ít nhất một trong các trường bắt buộc trống: "error_empty" => "Vui lòng điền vào tất cả các trường bắt buộc.", // thông báo lỗi khi địa chỉ email không hợp lệ : "error_noemail" => "Vui lòng nhập địa chỉ email hợp lệ.", // và thông báo thành công khi gửi email: "success" => "Thanks cho bạn e-mail! Chúng tôi"sẽ liên hệ lại với bạn ngay khi có thể."), $atts));

Hãy nhớ rằng chúng ta sẽ gọi các thuộc tính này trong mã của mình dưới dạng các biến có tên thuộc tính (ví dụ: $label_submit ).

Gửi một e-mail

Đây là phần quan trọng nhất của chức năng chịu trách nhiệm gửi email:

// nếu

phần tử đã được ĐĂNG, hãy chạy đoạn mã sau nếu ($_SERVER["REQUEST_METHOD"] == "POST") ( $error = false; // đặt "các trường bắt buộc" để kiểm tra $required_fields = array("your_name", "email ", "message", "subject"); // phần này tìm nạp mọi thứ đã được POST, lọc sạch chúng và cho phép chúng tôi sử dụng chúng dưới dạng $form_data["subject"] foreach ($_POST as $field => $value) ( if (get_magic_quotes_gpc()) ( $value = Striplashes($value); ) $form_data[$field] = Strip_tags($value ) // nếu các trường bắt buộc trống, hãy chuyển $error thành TRUE và đặt văn bản kết quả thành Thuộc tính shortcode có tên "error_empty" foreach ($required_fields as $required_field) ( $value = Trim($form_data[$required_field]); if (empty($value)) ( $error = true; $result = $error_empty; ) ) // và nếu e-mail không hợp lệ, hãy chuyển $error thành TRUE và đặt văn bản kết quả thành thuộc tính shortcode có tên "error_noemail" if (! is_email($form_data["email"])) ( $error = true; $result = $error_noemail ) if ($error == false) ( $email_subject = "[" . get_bloginfo("tên") . "] " . $form_data["chủ đề"]; $email_message = $form_data["message"] . "nnIP: " . wptuts_get_the_ip(); $headers = "Từ: " . $form_data["name"] . "<" . $form_data["email"] . ">n"; $headers .= "Loại nội dung: văn bản/thuần tuý; charset=UTF-8n"; $headers .= "Mã hóa chuyển nội dung: 8bitn"; wp_mail($email, $email_subject, $email_message, $headers); $result = $success; $sent = true; ) // nhưng nếu $error vẫn là FALSE, hãy đặt các biến POSTed cùng nhau và gửi email! if ($error == false) ( // lấy tên trang web và đặt nó trước chủ đề $email_subject = "[ " . get_bloginfo("name") . "] " . $form_data["subject"]; // lấy tin nhắn từ biểu mẫu và thêm địa chỉ IP của người dùng bên dưới nó $email_message = $form_data["message"] . : " . wptuts_get_the_ip(); // đặt tiêu đề e-mail với tên người dùng, địa chỉ e-mail và mã hóa ký tự $headers = "From: " . $form_data["your_name"] . "<" . $form_data["email"] . ">n"; $headers .= "Loại nội dung: văn bản/thuần túy; charset=UTF-8n"; $headers .= "Content-Transfer-Encoding: 8bitn"; // gửi e-mail có thuộc tính shortcode có tên "email" và dữ liệu đã POST wp_mail($email, $email_subject, $email_message , $headers); // và đặt văn bản kết quả thành thuộc tính shortcode có tên "success" $result = $success; // ...và chuyển biến $sent thành TRUE $sent = true;

Mâu liên hệ

Phần công việc này không kém phần quan trọng so với phần trước. Rốt cuộc, đó là cách mã trước đó sẽ gửi cho bạn e-mail, nếu không có biểu mẫu nào để gửi nó? :)

// nếu không có văn bản $result (có nghĩa là không có lỗi hoặc thành công, nghĩa là người dùng chỉ mở trang và không làm gì cả) thì không cần hiển thị biến $info if ($result != "" ) ( $thông tin = "

" .$kết quả ."

"; ) // dù sao đi nữa, hãy xây dựng biểu mẫu! (hãy nhớ rằng chúng tôi đang sử dụng các thuộc tính shortcode làm biến có tên của chúng) $email_form = "

" . $label_name . ":

" . $label_email . ":

" . $label_subject . ":

" . $label_message . ": " . $form_data["tin nhắn"] . "

";

manh mối: Nếu bạn nhìn kỹ vào Mã HTML trong biểu mẫu, bạn có thể nhận thấy một biến chủ đề $. Hãy nhớ thuộc tính shortcode ‘ chủ thể’ với giá trị mặc định trống? Điều này có nghĩa là bạn có thể sử dụng shortcode bằng cách thay thế giá trị bạn cần vào thuộc tính, ví dụ:

Thêm trả lại vào shortcode

Phần cuối cùng của công việc khá đơn giản. Sau khi gửi, người dùng sẽ thấy thông báo cho biết thư đã được gửi thành công hoặc nếu không thành công thì sẽ có thông báo lỗi. Đây là mã chính nó:

Nếu ($sent == true) ( ​​​​return $info; ) else ( return $info . $email_form; )

Sau khi gửi email thì form không hiển thị lại nữa, tuy nhiên nếu bạn vẫn muốn form hiển thị thì có thể sử dụng một dòng code nhỏ:

Trả về thông tin $. $email_form;

Mã CSS

Tất nhiên, bản thân mã trông không hoàn hảo. Hãy thêm một chút quyến rũ bằng cách CSS. Thêm vào dòng sau vào mã CSS trong tệp của bạn phong cách.css:

Nhãn biểu mẫu liên hệ, đầu vào biểu mẫu liên hệ, vùng văn bản biểu mẫu liên hệ . ) #cf_message ( chiều rộng: 90%; phần đệm: 10px; ) #cf_send ( phần đệm: 5px 10px; )

Nếu bạn đã làm mọi thứ chính xác, bạn sẽ thấy một cái gì đó tương tự như những gì được hiển thị trong hình bên dưới:

Xin chúc mừng: bạn vừa tạo được biểu mẫu liên hệ của riêng mình!

Phần kết luận

Cái này mâu đơn giản phản hồi sẽ có tác dụng với hầu hết các trang web, nhưng nếu bạn muốn thêm các trường bổ sung vào đó, bạn chỉ cần chỉnh sửa và thêm biến $form_data["name_of_the_new_field"] bên trong một biến $email_message(và bạn cũng có thể cần thêm tên trường vào mảng $required_fields).

Nếu bạn có suy nghĩ về cách cải thiện shortcode trong bài đăng này hoặc muốn thể hiện những gì bạn nghĩ ra từ biểu mẫu này, vui lòng chia sẻ suy nghĩ và liên kết của bạn với chúng tôi trong phần nhận xét.