Mẫu phản hồi PHP đẹp. Biểu mẫu phản hồi bằng PHP có gửi qua e-mail

• Bước 5. Sử dụng ví dụ trên, hãy thêm các trường còn lại bạn cần, mỗi lần bắt đầu bằng thẻ

  . Để đặt trường có tin nhắn văn bản, hãy sử dụng thẻ . Tùy chọn " cols" Và " hàng" chịu trách nhiệm về chiều rộng và chiều cao của trường văn bản. Bạn có thể đặt các thông số mà bạn thích nhất. Bạn sẽ nhận được một cái gì đó tương tự như những gì được hiển thị trong ảnh chụp màn hình bên dưới.

• Bước 6. Để bảo vệ bạn khỏi bot, loại bot hiện nay có khá nhiều trên Internet, hãy tạo một dòng khác bằng thẻ . Do tham số " style="display:none" "Trường này sẽ không hiển thị đối với người bình thường mà sẽ được các bot tự động điền vào. Vì vậy, bạn sẽ luôn có thể phân biệt một người sống với một chương trình.

• Bước 7. Giai đoạn đánh dấu cuối cùng sẽ là tạo nút gửi. Thẻ được sử dụng cho việc này . Tạo một khối mới

  và bên trong nó nhập mã nút với các thông số sau:

  Gửi tin nhắn . Bạn sẽ nhận được kết quả tương tự như trong ảnh chụp màn hình.

Làm việc với Cascading Style Sheets (CSS)

• Như bạn đã nhận thấy trong quá trình chấm điểm, cuối cùng chúng ta đã đạt được một thứ gì đó rất quanh co, kín đáo và kinh tởm. Để làm cho biểu mẫu phản hồi trông gọn gàng hơn hoặc ít hơn, một ngôn ngữ HTML sẽ không đủ. Với mục đích này, bạn sẽ phải sử dụng các kiểu CSS.
• Nếu bạn thực hiện lời khuyên để cải thiện các kỹ năng cơ bản của mình về tài nguyên htmlbook.ru, sau đó đặt các tham số thiết kế nhất định cho tất cả các phần của biểu mẫu bằng cách sử dụng CSS Sẽ không làm khó bạn đâu. Nếu bạn không muốn hoặc không có thời gian để mày mò tất cả những thứ này, thì chúng tôi sẽ cung cấp cho bạn một mã làm sẵn và cho bạn biết cách kết nối nó.

Kết nối phong cách CSSĐẾN HTML có thể được thực hiện theo hai cách:

• Sao chép mã từ tệp bảng xếp tầng của chúng tôi vào cuối tệp phong cách.css, hiện diện trên trang web lưu trữ
• Di chuyển tệp kiểu của chúng tôi đến máy chủ của bạn và kết nối nó

Tài liệu phong cách.css kết nối bên trong thẻ sử dụng một kịch bản . Nếu tệp có kiểu không nằm trong cùng thư mục với tệp html chính thì bạn phải chỉ định đường dẫn đến tệp đó. Trong tệp kiểu của chúng tôi, mỗi thành phần có một chỉ định. Nếu muốn, bạn có thể tự thay đổi các thông số, chỉ được hướng dẫn bằng các kỹ năng lập trình cơ bản.

Kết nối tệp PHP và thiết lập nó

Như đã đề cập trước đó, kịch bản PHP chịu trách nhiệm thực hiện mẫu phản hồi. Tuy nhiên, để hiểu ít nhiều về cách thức hoạt động của ngôn ngữ PHP, bạn cần phải đọc một lượng lớn tài liệu và dành nhiều giờ để luyện tập. Vì vậy, cũng như trường hợp với CSS, chúng tôi sẽ cung cấp cho bạn một tệp tạo sẵn có tập lệnh PHP mà bạn chỉ cần đính kèm vào tài liệu có biểu mẫu.

Không giống như tập tin phong cách.css, tệp có tập lệnh PHP được đính kèm trong thuộc tính của biểu mẫu. Hãy bắt đầu theo thứ tự:

• Bước 1. Mở mã bạn đã viết trước đó và tìm dòng có thẻ biểu mẫu mở. Thêm thuộc tính vào nó " hành động="contact-form.php"" Và " phương thức="đăng"" Xem ví dụ trong ảnh chụp màn hình.

• Bước 2. Tải xuống tệp php của chúng tôi và đặt nó trên máy chủ của bạn trong cùng thư mục chứa tài liệu html có biểu mẫu. Như vậy file php và html sẽ tương tác với nhau.

• Bước 3. Tiếp theo, bạn cần tùy chỉnh script cho riêng mình. Mở tệp và đặt các biến, đặt tên giống như trong tập lệnh html. Nếu bạn đã thêm các trường bổ sung vào biểu mẫu, hãy thêm chúng vào tập lệnh php chính xác như trong ảnh chụp màn hình.

• Bước 4. Tiếp theo, bạn cần thêm hai biến nữa với địa chỉ email của bạn và chủ đề của bức thư, những biến này sẽ được hiển thị trên hộp thư của bạn. Trong dòng có biến " địa chỉ $"Ghi rõ E-mail của bạn và trong dòng" $ phụ» chủ đề email như trong ảnh chụp màn hình.

• Bước 5. Trong dòng có biến " $mes» tùy chỉnh định dạng của bức thư mà bạn sẽ nhận được qua email. Bạn có thể viết lại không thay đổi hoặc chỉnh sửa theo ý thích.

• Bước 6. Tất cả các dòng còn lại có nhiệm vụ gửi tin nhắn và chứa cài đặt bảo vệ bot nên không được thay đổi. Cuối cùng, mã hoàn chỉnh sẽ trông giống như ảnh chụp màn hình bên dưới.

Sau khi hoàn thành tất cả các bước, bạn sẽ nhận được mẫu phản hồi đơn giản, gọn gàng này.

Tuyển tập các biểu mẫu phản hồi thiết kế đẹp mắt bằng HTML và CSS cho nhiều mục đích khác nhau

• Dựa vào hướng dẫn trên, bạn có thể dễ dàng “vẽ” được một mẫu phản hồi phù hợp với sở thích của mình. Tuy nhiên, nếu bạn không có thời gian hoặc không muốn tự tạo biểu mẫu từ đầu, bạn có thể tìm các biểu mẫu thiết kế sẵn trên Internet và có các kỹ năng cơ bản HTML chỉnh sửa chúng cho phù hợp với nhu cầu của bạn.

• Sau một hồi tìm kiếm, chúng tôi đã tìm thấy cho bạn một lựa chọn 35 các mẫu phản hồi thiết kế bật lên đẹp mắt được viết bằng HTML Và CSS. Những hình thức này phù hợp cho động cơ như WordPress Và Joomla, có thiết lập đơn giản và dễ dàng từ bảng điều khiển, đồng thời cũng hoàn hảo cho các trang web không có công cụ.

VIDEO: Biểu mẫu phản hồi bật lên cho trang web WordPress

Bất cứ website nào cũng phải có mẫu phản hồi nên sớm hay muộn mỗi chúng ta đều nghĩ đến việc phát triển một mẫu. Có khá nhiều lựa chọn trên Internet, một số sử dụng các plugin phổ biến, một số sử dụng sự phát triển của cá nhân họ, nhưng hầu hết đều tìm kiếm các giải pháp làm sẵn. Trong mọi trường hợp, của chúng tôi mẫu phản hồi cho trang web sẽ hoạt động và hoạt động tốt và tất cả điều này sẽ diễn ra theo thứ tự.

HTML

Vì vậy, hãy bắt đầu, như mọi khi, với mẫu thông thường - html. Đầu tiên chúng ta cần một biểu mẫu có nhiều trường. Để rõ ràng và chuẩn mực cho mọi hình thức, chúng ta sẽ lấy 3 trường. Những thứ kia. đây sẽ là Tên, Email và Điện thoại.

Mỗi đầu vào có một tên duy nhất, sau này chúng ta sẽ cần nó để gửi tin nhắn. Bạn cũng có thể tự do thêm các trường của riêng mình và không chỉ nhập mà còn có thể chọn vùng văn bản. Chỉ cần đừng quên gán tên riêng cho từng người mà chúng tôi sẽ sử dụng khi gửi thông tin qua email. Để thuận tiện, tôi đã thêm thuộc tính bắt buộc vào từng trường, nhờ đó trình duyệt sẽ không cho phép người dùng gửi các giá trị trống và sẽ thông báo nhu cầu điền chúng.

CSS

Khi biểu mẫu đã sẵn sàng, bạn có thể biến đổi nó một chút. Mọi thứ ở đây cũng phụ thuộc vào nhu cầu và trí tưởng tượng của bạn. Để rõ ràng, tôi đã phác thảo một vài kiểu cho từng thành phần để mọi thứ trông không quá phẳng. Nhưng nếu bạn lười hoặc không biết cách thực hiện việc này thì bạn có thể sử dụng tùy chọn của tôi:

Biểu mẫu( chiều rộng tối đa: 400px; chiều rộng: 100%; lề: 0 tự động; ) đầu vào( kích thước hộp: hộp viền; hiển thị: khối; viền: không có; bóng hộp: chèn 0px 0px 4px 1px rgba(0, 0, 0, 0,11); phần đệm: 10px 20px; lề: 10px 0; đường viền-bán kính: 5px; chuyển đổi văn bản: chữ hoa; chiều rộng: 200px nền: đen; 0px 2px 0 1px đen)

Phần khách hàng

Ở đây đáng để hiểu chi tiết hơn, hay đúng hơn là chọn tùy chọn thích hợp cho chính mình. Để gửi tin nhắn qua email, chúng tôi sẽ cần sử dụng ngôn ngữ php, tức là. tạo một tệp riêng để chúng tôi sẽ chuyển tất cả dữ liệu này vào đó. Nhưng chúng tôi sẽ không xem xét phương pháp này ở đây vì nó đẹp hơn nhiều khi mọi thứ diễn ra mà không cần tải lại trang. Vì vậy, chúng ta sẽ xem xét việc gửi dữ liệu qua ajax.

Nếu bạn muốn làm mọi thứ theo cách cũ, thì bạn sẽ cần chỉnh sửa một chút phần html trên cùng và đặt giá trị thuộc tính phương thức của biểu mẫu (đăng hoặc nhận). Tất cả phụ thuộc vào cách bạn muốn chuyển dữ liệu từ biểu mẫu. Và cũng đừng quên viết một hành động sẽ chỉ ra đường dẫn đến tệp php.

Và chúng tôi sẽ sử dụng một phương pháp nâng cao hơn và gửi dữ liệu mà không cần tải lại trang và khi nhận được phản hồi từ máy chủ, chúng tôi sẽ đưa ra thông báo cho người dùng về thao tác thành công hoặc có lỗi. Tuy nhiên, chúng ta cũng sẽ cần 2 tệp, giả sử liên hệ.php Và custom.js.

Trước hết, đừng quên bao gồm thư viện truy vấn, với sự trợ giúp của nó, chúng tôi sẽ giảm mã nhiều lần và có thể dễ dàng thực hiện bất kỳ hành động nào bằng cách sử dụng các giải pháp làm sẵn.

$(".form").submit(function() ( var str = $(this).serialize(); $.ajax(( type: "POST", url: "contact.php", data: str, thành công : function(msg) ( if(msg == "ok") ( Alert("Tin nhắn đã được gửi"); ) else ( Alert("Lỗi! Có thể bạn đã điền sai các trường."); ) ) ) ); );

Bây giờ hãy hiểu kế hoạch hành động và lý do tại sao chúng ta cần tất cả các thư viện và tệp này. Khi người dùng nhấp vào nút gửi, chúng tôi có một sự kiện gửi, chúng tôi sẽ viết trong custom.js và dựa vào đó chúng tôi sẽ nhận tất cả dữ liệu từ biểu mẫu và chuyển nó đến tệp contact.php. Ở đây, chúng tôi kiểm tra lại một lần nữa xem các trường của chúng tôi có trống hay không (để tránh khả năng spam khác), gửi tin nhắn qua email và thông báo cho người dùng về kết quả, được gửi dưới dạng phản hồi cho custom.js.

Nếu (trim($_POST["mfbPhone"]) == "") ( echo "false"; ) else ( $txtname = TRIM($_POST["mfbName"]); $txtemail = Trim($_POST["mfbMail "]); $txtphone = Trim($_POST["mfbPhone"]); // từ ai $fromMail = " [email được bảo vệ]"; // Nhập email của bạn vào đây $emailTo = " [email được bảo vệ]"; $subject = "Phản hồi"; $subject = "=?utf-8?b?". base64_encode($subject) ."?="; $headers = "Từ: Mẫu ví dụ<$fromMail>\n"; $headers .= "Loại nội dung: text/plain; charset="utf-8"\r\n"; $headers .= "MIME-Phiên bản: 1.0\r\n"; $headers .= "Date: ". date("D, d M Y h:i:s O") ."\r\n"; // nội dung của bức thư $body = "Đã nhận được thư từ trang web ".$site." \n\nTên: ".$txtname."\nPhone: ".$txtphone."\ne-mail: ".$txtemail."\nMessage: ".$txtmessage; mail($emailTo, $subject, $body, $headers); tiếng vang "được";

Đây là ví dụ cơ bản nhất về cách hoạt động của biểu mẫu liên hệ. Có nhiều tùy chọn về cách sửa đổi tệp kiểm tra trong PHP, tạo lớp của riêng bạn, v.v. Nhưng nhiệm vụ của chúng tôi là tạo ra một ví dụ đơn giản và hiệu quả mà bạn có thể sử dụng trên trang web của mình.

thử nghiệm

các tập tin

Plugin sẵn sàng

Vì bạn đang sử dụng blog WordPress nên có thể bạn đã sẵn sàng và mong muốn sử dụng tất cả các loại plugin, đặc biệt nếu bạn là người hoàn toàn mù mờ về lập trình và bố cục. Và tôi không đổ lỗi cho bạn về điều này, và tôi thậm chí có thể trình bày một trong số chúng để bạn chú ý cho rõ ràng. Mục đích của đoạn này không phải là đề xuất mà chỉ là ví dụ vì tôi đã sử dụng plugin Mẫu liên hệ 7 trong một số dự án.

Nó rất dễ cấu hình và hầu như luôn hoạt động hoàn hảo. Nếu bạn cần tạo ra thiết kế độc đáo của riêng mình, bạn có thể làm điều đó. Tất cả những gì bạn cần làm là thêm các trường cần thiết vào hàm tạo, dịch và thay đổi thông báo về lỗi cũng như gửi thành công theo cách riêng của bạn, thế là xong. Tiếp theo, sao chép shortcode và dán nó vào vị trí mong muốn trong biểu mẫu.

Tôi chưa bao giờ gặp bất kỳ vấn đề nào với plugin và nếu bạn cần một giải pháp nhanh chóng và sẵn sàng thì đây chính là giải pháp đó. Nếu bạn có yêu cầu riêng về biểu mẫu về chức năng và thiết kế, thì tốt hơn nên sử dụng tùy chọn đầu tiên, tùy chọn này đòi hỏi kiến ​​​​thức về ngành này.

Trong bài học này chúng ta sẽ tìm hiểu về hàm thư(), sử dụng ví dụ về việc tạo Biểu mẫu phản hồi trong PHP tiếp theo là gửi dữ liệu nhận được qua email.

Để làm điều này, chúng tôi sẽ tạo hai tệp - định dạng.php Và thư.php. Tệp đầu tiên sẽ chỉ chứa một biểu mẫu có các trường để người dùng nhập dữ liệu. Bên trong một thẻ hình thức- cái nút "Gửi" và thuộc tính hoạt động trong đó đề cập đến trình xử lý - thư.php, đây là dữ liệu từ biểu mẫu được truy cập khi nhấn nút "Gửi". Trong ví dụ của chúng tôi, dữ liệu biểu mẫu được gửi đến một trang web có tên "/mail.php". Trang này chứa một tập lệnh cho PHP xử lý dữ liệu biểu mẫu:

Đây là cách biểu mẫu hiển thị trực quan trong trình duyệt.

Tiếp theo chúng ta viết code cho file thư.php. Chúng tôi nghĩ ra tên riêng của mình cho các biến. TRONG PHP biến bắt đầu bằng dấu $ theo sau là tên biến. Giá trị văn bản của biến được đặt trong dấu ngoặc kép. Bằng cách sử dụng các biến, nội dung của biểu mẫu sẽ được gửi đến email của quản trị viên bằng cách đặt tên của thành phần biểu mẫu trong dấu ngoặc vuông - giá trị tên.

$ tới = " [email được bảo vệ]"; // email của người nhận dữ liệu từ biểu mẫu
$tema = "Mẫu phản hồi bằng PHP"; // chủ đề của email nhận được
$message = "Tên của bạn: ".$_POST["name"]."
";//gán cho biến giá trị thu được từ dạng name=name
$message .= "E-mail: ".$_POST["email"]."
"; //lấy từ mẫu name=email
$message .= "Số điện thoại: ".$_POST["phone"]."
"; //thu được từ mẫu name=phone
$message .= "Tin nhắn: ".$_POST["message"]."
"; //thu được từ mẫu name=message
$headers = "Phiên bản MIME: 1.0" . "\r\n"; // tiêu đề khớp với định dạng cộng với ký tự dòng mới
$headers .= "Loại nội dung: text/html; charset=utf-8" . "\r\n"; // cho biết loại nội dung được gửi
thư($to, $tema, $message, $headers); // gửi giá trị biến cho người nhận qua email
?>

Vì vậy dữ liệu từ mảng $_POST sẽ được chuyển đến các biến tương ứng và gửi qua email bằng hàm thư. Hãy điền vào biểu mẫu của chúng tôi và nhấp vào nút gửi. Đừng quên bao gồm email của bạn. Bức thư đến ngay lập tức.