trang chủ-Cách mở một tập tin-Mã phản hồi Html. Tạo biểu mẫu phản hồi trong PHP

Mã phản hồi Html. Tạo biểu mẫu phản hồi trong PHP

Xin chào các độc giả thân mến, hôm nay tôi muốn kể cho bạn nghe về cách tôi tạo biểu mẫu để lấy thông tin liên hệ của người dùng.

Ngày nay, , là một phần của cấu trúc trang đích. Xét cho cùng, đây là một trong những cách để chấp nhận đơn đặt hàng hoặc gửi danh mục sản phẩm của bạn sau khi nhận được e-mail của khách truy cập trước đó.

Tạo biểu mẫu phản hồi - đánh dấu html

Thông thường, ba trường là đủ đối với tôi và trong hầu hết các trường hợp, tôi sử dụng đánh dấu này để tạo Mâu liên hệ:

Hãy thử mở nó trong trình duyệt của bạn mã này và xem những gì bạn nhận được, tùy thuộc vào trình duyệt Internet bạn sử dụng, nó sẽ trông giống như thế này:

Nếu bạn có bất kỳ câu hỏi nào về đánh dấu, vui lòng hỏi chúng trong phần bình luận, tôi sẽ cố gắng trả lời chi tiết và tôi sẽ không mô tả từng thành phần trong bài viết để không làm tăng kích thước của nó. Ngoài ra, các yếu tố khá đơn giản.


Tạo biểu mẫu phản hồi - đánh dấu css

Hãy tạo kiểu cho biểu mẫu của chúng ta và mang nó đến dạng có thể đọc được:

/* Kiểu biểu mẫu */ #application ( chiều rộng: 475px; lề: 0 tự động; ) /* Kiểu trường nhập */ #applicationName, #applicationEmail, #applicationTelephone ( chiều rộng: 100%; chiều cao: 73px; nền: không có; lề - top: 25px; đường viền: 1px Solid #fff; text-align: center; font-size: 24px; , #applicationEmail:focus, #applicationTelephone:focus ( border: 1px Solid #30ad64; ) /*Các kiểu văn bản được hiển thị trong phần giữ chỗ */ ::-webkit-input-placeholder ( color: #efefef; font-family: "PT Sans ", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) : :-moz-placeholder ( color: #fff; font-family: "PT Sans", sans-serif ; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); /* Firefox 19+ */ :-moz-placeholder ( color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); /* Firefox 18- */ :-ms-input-placeholder ( color: #fff; font-family: "PT Sans" , sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) ::placeholder ( color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) /*Button styles*/ .applicationButton ( lề-top: 25px; nền: #30ad64 ; đường viền: không có; chiều cao: 73px; màu: #fff; chuyển đổi văn bản: "PT Sans", sans-serif; con trỏ: con trỏ; .applicationButton:hover ( nền: #d68c18; )

Nếu bạn muốn màu nút thay đổi mượt mà, hãy thêm dòng sau vào .applicationButton và .applicationButton:hover:

Chuyển tiếp: .6s;

Where.6s là thời gian hoạt ảnh tính bằng mili giây.
Bây giờ biểu mẫu của chúng ta đã có được diện mạo đẹp mắt, bây giờ nó trông như thế này:


Tạo biểu mẫu phản hồi - đánh dấu php

Bây giờ chúng ta cần tạo tệp application.php. Nó sẽ nhận các thông số đã nhập từ biểu mẫu và gửi chúng cho chúng tôi qua email.

Cấu trúc của nó giống như một cấu trúc thông thường tập tin html, đây có thể là trang mà bạn viết “Cảm ơn, đơn đăng ký của bạn đã được chấp nhận. Sau khi xử lý đơn đăng ký, người quản lý của chúng tôi sẽ liên hệ với bạn"

Nghĩa là khi người dùng nhấp vào nút, anh ta sẽ được chuyển hướng đến trang application.php. Đây là một trang đầy đủ và bạn nên tạo kiểu cho nó phù hợp.

"; $ tin nhắn .= "

Tin nhắn từ trang web

\r\n"; $msg .= "

Từ ai:".$tên người dùng."

\r\n"; $msg .= "

Thư:".$usermail."

\r\n"; $msg .= "

Trang mạng:".$usertel."

\r\n"; $msg .= ""; // gửi tin nhắn if(@mail($sendto, $subject, $msg, $headers)) ( echo "
"; ) khác ( tiếng vang "
"; } ?>

Hãy giải thích mã một chút:

$sendto = " [email được bảo vệ]"; // thư mà thư sẽ được gửi tới $username = $_POST["name"]; // lưu dữ liệu nhận được từ trường có tên vào một biến $usertel = $_POST["telephone"]; / / lưu dữ liệu vào biến nhận được từ trường có số điện thoại $usermail = $_POST["email"] // lưu dữ liệu nhận được từ trường có địa chỉ email vào biến

Ở đây, tôi nghĩ, mọi chuyện đã rõ ràng.

Bây giờ hãy tạo tiêu đề của bức 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";

Đường kẻ $subject = "Tin nhắn mới";— chịu trách nhiệm về chủ đề của bức thư, có thể viết ở đó: “Ứng tuyển từ trang web” hoặc bất cứ điều gì phù hợp với bạn nhất.

Tôi đề xuất đảm bảo rằng lá thư đến từ địa chỉ được chỉ định trong trường input type="email". Tức là từ địa chỉ mà người dùng đã nhập khi điền vào biểu mẫu. Để làm điều này, chúng tôi viết các dòng sau:

$headers = "Từ: " . dải_tags($usermail) . "\r\n";

Nghĩa là, chúng tôi sẽ thay thế dữ liệu từ biến $usermail, nơi lưu trữ thông tin từ trường chịu trách nhiệm nhập địa chỉ email.

Bây giờ hãy thiết lập vẻ bề ngoài bức thư. Bạn có thể thiết kế nó theo cách bạn muốn, nhưng tôi đề xuất cấu trúc sau:

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

Tin nhắn từ trang web

\r\n"; $msg .= "

Từ ai:".$tên người dùng."

\r\n"; $msg .= "

Thư:".$usermail."

\r\n"; $msg .= "

Điện thoại:".$usertel."

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

Dòng đầu tiên đặt phông chữ cho chữ cái. Thứ hai, chúng tôi hiển thị một thông báo, ví dụ: “Yêu cầu từ biểu mẫu nhận xét trên màn hình đầu tiên." Dòng thứ ba, thứ tư và thứ năm truyền dữ liệu từ biểu mẫu. Mỗi trên một dòng mới.

Bây giờ bạn cần gửi thư bằng chức năng thư và xác định điều gì sẽ xảy ra khi thư được gửi thành công và không thành công:

If(@mail($sendto, $subject, $msg, $headers)) ( echo "

"; ) khác ( tiếng vang "
"; } ?>

Tôi đã làm điều đó để trong mọi trường hợp, một hình ảnh có văn bản tương ứng sẽ được hiển thị. Bạn có thể hiển thị toàn bộ trang thay vì hình ảnh. Chỉ cần viết mã thay vì hình ảnh.

Vài giây sau khi hình ảnh được hiển thị, tôi chuyển hướng (chuyển hướng tự động) sang trang chủ. Điều này có thể được thực hiện bằng cách chèn dòng sau vào giữa các thẻ đầu;

Tức là sau 4 giây người dùng sẽ tự động được đưa trở lại trang chính!

Tôi không phải là chuyên gia về PHP - đó là ngôn ngữ lập trình back-end; tôi đã bị cuốn hút vào việc học front-end cả đời. Vì thế đừng phán xét gay gắt. Có, tại đây bạn có thể thực hiện kiểm tra để điền vào biểu mẫu liên hệ, v.v., nhưng điều này luôn là đủ đối với tôi, vì vậy nếu có ai có đề xuất về cách cải thiện mã này, vui lòng viết nhận xét hoặc qua email, tôi sẽ sửa lại bài học, cảm ơn bạn!

Nhân tiện, nếu bạn cần một biểu mẫu phản hồi mà không cần tải lại trang, thì bạn có thể đọc về cách cài đặt nó trong

Có thể một số người không hiểu rõ tài liệu, nhưng nếu bạn lặp lại chính xác các bước của tôi thì biểu mẫu liên hệ của bạn chắc chắn sẽ hoạt động. Nếu bạn có bất kỳ câu hỏi nào, hãy viết bình luận, tôi sẽ cố gắng trả lời! Hẹn gặp bạn trên blog!

P.s. Vì tôi bắt đầu thường xuyên nhận được câu hỏi về lý do tại sao biểu mẫu không hoạt động và email không đến, tôi quyết định mô tả một số lý do phổ biến nhất khiến điều này có thể xảy ra:

  • Bạn đang kiểm tra biểu mẫu không có trên máy chủ.
  • Kiểm tra hình thức cho quỷ lưu trữ trả phí.
  • Bạn kiểm tra biểu mẫu trên dịch vụ lưu trữ trả phí nhưng trong thời gian dùng thử miễn phí.

Trong những trường hợp này, thư sẽ không được gửi đến email của bạn.

Nếu bạn quá lười để tìm hiểu và tự tạo biểu mẫu thì tôi khuyên bạn nên chú ý đến.

23/07/2014 12/07/2018

dimadv7

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 tùy chọn trên Internet, một số sử dụng các plugin phổ biến, một số khác sử dụng các phát triển cá nhân của riêng họ, nhưng hầu hết 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 chúng tôi có đều có riêng tên duy nhất name , sau này chúng tôi 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 giá trị trống và sẽ thông báo cho bạn về sự cần thiết phải đ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 thì có thể sử dụng phương á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 màu đen;

Phần khách hàng

Ở đây đáng để hiểu chi tiết hơn, lựa chọn chính xác hơn cho chính mình lựa chọn phù hợp. Để gửi tin nhắn qua email chúng ta sẽ cần sử dụng ngôn ngữ php, I E. tạo nên tập tin riêng biệt, vào đó chúng tôi sẽ chuyển tất cả dữ liệu này. Nhưng chúng tôi phương pháp này Chúng tôi sẽ không xem xét nó ở đâ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! Bạn có thể đã đ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 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 ở trên blog WordPress, thì có lẽ 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 vào ở đúng nơiđầu ra hình thức.


Tôi chưa bao giờ gặp bất kỳ vấn đề nào với plugin này và nếu bạn cần nhanh chóng và giải pháp làm sẵn, thì chính xác là như thế này. 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.


Xin chào, một mẫu phản hồi sẽ có mặt trên mọi trang web. Hôm nay tôi sẽ trình bày một ví dụ về một biểu mẫu tạo sẵn để chèn vào bất kỳ trang web nào, bao gồm cả công cụ WordPress. Sẵn sàng ví dụ html Và mã php Bạn có thể sao chép nó vào trang web của bạn. Ngoài ví dụ làm sẵn, còn có nhiều plugin cũng rất phổ biến. Trên nhiều trang web, biểu mẫu như vậy đã được tích hợp sẵn trong chủ đề, nhưng đôi khi cần phải thêm biểu mẫu khác vào trang khác hoặc thay thế biểu mẫu cũ.

Trước khi bắt đầu viết bài này, tôi đã lướt Internet để tìm câu trả lời cho câu hỏi này. Đã xem xét lại số lượng nhiều hơn trang web và blog, tôi tìm thấy rất ít câu trả lời chất lượng về việc chèn biểu mẫu phản hồi trên trang web. Hầu hết các tài liệu đều viết về cách làm việc với plugin. Trong một số bài viết không hoàn toàn rõ ràng phải làm gì và làm như thế nào, mã không hoạt động, thư không đến... v.v.

Tất nhiên, có những câu trả lời xứng đáng, nhưng chúng rất ít. Tôi sẽ cho bạn một ví dụ đơn giản không đòi hỏi nhiều trí thông minh. Kiến thức đặc biệt trong php là không bắt buộc, hay nói đúng hơn là chúng không cần thiết chút nào. Tôi sẽ viết chi tiết những gì và ở đâu cần thay đổi khi cần thiết. Hình thức hoạt động tốt không có bất kỳ trục trặc nào. Một ví dụ về biểu mẫu có trên trang web của tôi. Trong ví dụ đã hoàn thành, tôi đã thêm một số kiểu dáng để làm đẹp, để hình thức không còn trông “kém” chút nào nữa. Nếu muốn, bạn có thể thay đổi mọi thứ theo ý mình.

Biểu mẫu phản hồi được tạo sẵn cho một trang web bằng html

TRONG trong ví dụ này, mẫu phản hồi cho trang web bao gồm Mã HTML. Bạn có thể dán ví dụ về mã html này vào bất kỳ trang nào của trang web, bất kể bạn sử dụng ở đâu và sử dụng cái gì. Mã tương tự có thể được chèn vào trang công cụ wordpress, mọi thứ sẽ hoạt động chính xác và không có lỗi.

Tên E-mail: Chủ đề tin nhắn Văn bản của bạn:

< form action = "/wp-content/themes/xmarkup/form.php" phương thức = "bài" tên = "biểu mẫu"> Tên< input class = "inp" style = "width: 30%;" name = "name" type = "text" / >

E-mail:< input class = "inp" style = "width: 30%;" name = "email" type = "text" / >

Chủ đề tin nhắn< input class = "inp" style = "width: 30%;" name = "temma" type = "text" / >

Văn bản của bạn:

< textarea class = "inp" style = "width: 80%;" cols = "1" name = "massage" rows = "5" > < / textarea >

< input class = "inp" type = "submit" value = "Gửi" / >

< / form >

Ở phần đầu của mã, ở dòng đầu tiên, bạn phải chỉ ra đường dẫn đến tập tin php form.php (sẽ nói thêm về điều đó sau). Không cần phải thay đổi bất cứ điều gì khác. Nếu bạn không hài lòng với tên của biểu mẫu và các trường của nó, bạn luôn có thể thêm tên mới hoặc thay đổi tên cũ. Bạn cũng có thể thêm trực tiếp các kiểu của riêng mình vào bảng. Nếu tùy chọn này bất tiện cho bạn, hãy xác định các lớp mới và chỉ sau đó thêm kiểu thông qua tệp style.css của bạn

Đối với những người không biết cách thực hiện việc này, hãy truy cập bảng quản trị của trang web, vào trình chỉnh sửa và mở tệp style.css. Thêm mã này vào cuối biểu định kiểu. Do đó, mã biểu mẫu sẽ được chèn vào trang và phong cách css vào bảng style.css

Inp( đệm: 10px; đường viền: 1px Solid #E5E5E5; chiều rộng: 200px; màu: #999999; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0 , 0, 0, 0,1) 0px 0px 8px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px )

Vào (

phần đệm: 10px;

đường viền : 1px liền khối #E5E5E5;

chiều rộng: 200px;

màu: #999999;

hộp - bóng : rgba ( 0 , 0 , 0 , 0.1 ) 0px 0px 8px ;

Moz - hộp - bóng: rgba ( 0 , 0 , 0 , 0.1 ) 0px 0px 8px ;

Webkit-box-shadow: rgba ( 0 , 0 , 0 , 0.1 ) 0px 0px 8px ;

Sau các bước này, bạn sẽ có một biểu mẫu phản hồi như thế này trên trang. Đừng quá lo lắng; hình thức của bạn phải đơn giản và thoải mái nhất có thể. Không có các trường bổ sung không cần thiết...tên, email, chủ đề và tin nhắn. Nếu muốn, ngay cả Chủ đề của tin nhắn cũng có thể bị xóa.

Mã mẫu Php

Chúng tôi đã quyết định về bố cục của biểu mẫu, chúng tôi đã làm cho nó đẹp mắt, bây giờ chúng tôi cần tạo một tệp có phần mở rộng php và thêm mã này vào nó. Thêm tập tin qua máy khách FTPđến trang web của bạn. Hầu hết người dùng sử dụng CMS, vui lòng chia sẻ tập tin này trong thư mục chủ đề của bạn. Ban đầu, bạn phải viết địa chỉ và tên của tệp này vào phần đánh dấu của biểu mẫu mà tôi đã trình bày ở trên. tôi đã kê đơn đường dẫn đầy đủ ví dụ, để biết rõ những gì cần chèn và ở đâu.

(

Mã của tệp form.php chứa:

< meta http - equiv = "refresh" content = "1; url=http://сайт" >

< meta charset = "UTF-8" / >

if (isset ($_POST [ "name" ] ) ) ( $name = $_POST [ "name" ] ; if ($name == "" ) ( unset ($name ) ; ) )

if (isset ($_POST [ "email" ] ) ) ( $email = $_POST [ "email" ] ; if ($email == "" ) ( unset ($email ) ; ) )

if (isset ($_POST [ "temma" ] ) ) ( $temma = $_POST [ "temma" ] ; if ($temma == "" ) ( unset ($temma ) ; ) )

if (isset ($_POST [ "massage" ] ) ) ( $massage = $_POST [ "massage" ] ; if ($massage == "" ) ( unset ($massage ) ; ) )

if (isset ($name ) && isset ($email ) && isset ($temma ) && isset ($massage ) ) (

địa chỉ $ = " [email được bảo vệ]" ;

$mes = "Tên: $name \nE-mail: $email \nChủ đề: $temma \nText: $massage";

$send = thư ($địa chỉ , $temma , $mes , "Loại nội dung:văn bản/thuần túy; bộ ký tự = UTF-8\r\nTừ:$email") ;

nếu ($ gửi == "đúng")

( tiếng vọng "Tin nhắn đã được gửi"; }

khác ( tiếng vang "Rất tiếc, đã xảy ra sự cố"; }

khác

tiếng vọng "Điền vào tất cả các trường";

Thay vì url=http://site, hãy viết địa chỉ trang web của bạn. địa chỉ $ = " [email được bảo vệ]"- ở dòng này, chúng tôi cho biết địa chỉ email của bạn sẽ được gửi thư đến. Không cần thay đổi bất cứ điều gì khác, mọi thứ đã được thiết lập và hoạt động. Nếu trong quá trình cài đặt có khó khăn gì hãy viết bình luận, mình chắc chắn sẽ giải đáp.

Chèn phản hồi trong WordPress

Quá trình cài đặt biểu mẫu trong WordPress cũng không khác; tất cả các bước đều được thực hiện theo cùng một cách. Bạn nên tải tệp form.php lên thư mục chứa chủ đề của mình. Đừng quên chỉ ra địa chỉ đầy đủ và chính xác cho tệp xử lý trong phần đánh dấu html. Ngoài ra, bạn cần thay đổi địa chỉ website thành website của mình và ghi địa chỉ email chính xác. Mã biểu mẫu đã hoàn thành có thể được chèn vào bất kỳ trang nào trên blog của bạn. Ví dụ: tôi đã thêm một trang có các cuộc thi vào blog của mình.

Ví dụ: bạn có thể tạo trang “Liên hệ với tác giả” hoặc “Tác giả” và tải biểu mẫu của bạn lên đó. Trên một số blog, tôi nhận thấy ở cuối mỗi biểu mẫu có một hàng nút mạng xã hội hoặc các tùy chọn bổ sung để liên hệ với tác giả. Nếu muốn, bạn có thể làm lại như vậy. Biểu mẫu liên hệ hoạt động trên blog của tôi, tôi đã thử nghiệm nó bằng ví dụ của riêng mình. Nếu thư không đến tay bạn thì có nghĩa là bạn có vấn đề.

Plugin WordPress

Nếu bạn gặp khó khăn khi chèn loại phản hồi này vào trang web của mình, bạn có thể nói một trong các plugin và cài đặt nó trên trang web của mình. Ngày nay có một số lượng lớn các plugin mà bạn có thể tạo các biểu mẫu như vậy cho trang web của mình. Chuyển đến bảng quản trị, nhấp vào Plugin - thêm mới. Chúng tôi chọn bất kỳ loại nào bạn thích và sử dụng nó cho sức khỏe của bạn. Plugin Contact Form 7 phổ biến hơn.

  1. Mẫu liên hệ an toàn nhanh chóng.
  2. Mẫu liên hệ bằng cách liên hệ với ME.
  3. FormCraft.
  4. Trình tạo biểu mẫu trực quan.
  5. nForms – Trình tạo biểu mẫu WordPress.
  6. Các dạng trọng lực.

Chúng tôi lần lượt cài đặt từng cái và xem xét từng cái một cách riêng biệt. Hãy chú ý ngay đến chức năng của plugin và loại bỏ các liên kết không liên quan đến trang web của tác giả (nếu có). Tất cả các hình thức như vậy ban đầu trông rất kém hấp dẫn, bạn có thể tùy chỉnh nó theo sở thích và màu sắc của mình không.

Hãy lấy ví dụ đầu tiên trong số đó. Chúng tôi thêm một plugin Contact Form 7 mới. Plugin này rất đơn giản, sẽ không có vấn đề gì khi sử dụng nó. Nhiều blogger sử dụng plugin này cho các biểu mẫu nhỏ bổ sung trên trang web của họ. Chuyển đến mục Biểu mẫu liên hệ 7 trong bảng điều khiển ở bên trái và nhấp vào “thêm biểu mẫu mới”. Ngôn ngữ mặc định đã là tiếng Nga.

Trong tab đầu tiên, chọn và đặt tên cho các trường sẽ xuất hiện. Không cần phải tạo một biểu mẫu quá lớn; thêm tên, email, chủ đề, tin nhắn và nút “gửi”. Trong tab “Thư”, hãy cho biết địa chỉ email của bạn mà thư sẽ được gửi đến.” Bạn sẽ không gặp bất kỳ khó khăn cụ thể nào, mọi thứ đều trực quan.

Ví dụ: sau khi tạo, plugin sẽ cung cấp cho bạn một mã ngắn mà bạn sẽ cần dán vào vị trí mong muốn trên trang web. Sau khi chèn mã ngắn, bạn sẽ thấy biểu mẫu hoàn toàn mới của mình. Khi tạo bất kỳ trang nào, hãy chuyển đến tab chỉnh sửa “Văn bản” và dán mã của bạn.

Nhược điểm nhỏ là thiết kế phản hồi của bạn sẽ rất tệ. Đừng quá buồn. Đăng nhập qua ftp vào địa chỉ này wp-content/plugins/contact-form-7/modules. Thư mục này chứa tất cả các kiểu css của plugin. Bạn có thể thêm các thuộc tính mới của riêng mình một cách an toàn để làm cho biểu mẫu của bạn đẹp và đáng chú ý.

Trình tạo biểu mẫu phản hồi

Ngoài các plugin bổ sung, bạn có thể sử dụng các biểu mẫu như vậy. Có những dịch vụ đặc biệt mà bạn có thể nhanh chóng và không cần kiến ​​​​thức đặc biệt để tạo ra một hình thức hoàn toàn mới. Có một mặt khác của đồng xu. Những dịch vụ như vậy cũng cần được kiểm tra về chức năng và quan trọng nhất là chi phí của niềm vui đó. Một số trong số đó là miễn phí, nhưng cũng có những lựa chọn trả phí. Viết tên của một trong số họ trong Yandex.

  • người thiết kế hình thức;
  • livetools.uiparade;
  • Google Biểu mẫu;
  • iFormbuilder;
  • thần tiên.

Trong các trình tạo trực tuyến như vậy, không cần phải viết mã từ đầu, suy nghĩ về lỗi, v.v. Mọi thứ đã được thực hiện trước đó. Bạn chỉ cần chọn các trường cho biểu mẫu, thêm nút “gửi” và nhập tất cả các mục cần thiết. Sau tất cả các bước này, dịch vụ sẽ cung cấp cho bạn một mã để chèn vào trang web. Sao chép mã nhận được vào trang của bạn và kiểm tra kết nối xem nó có hoạt động không.

Kết nối với chủ sở hữu trang web, blog hoặc cửa hàng hiện tồn tại trên mọi trang web. Rất nhiều cửa hàng trực tuyến sử dụng dịch vụ trả phí. Với sự trợ giúp của các dịch vụ như vậy, ngoài việc gửi thư, số lượng bán hàng còn tăng lên. Sẽ rất thuận tiện khi khách hàng truy cập trang web và có thể liên hệ trực tiếp với quản trị viên cửa hàng trực tuyến bất kỳ lúc nào.

Ngày nay, có một số lượng lớn các loại dịch vụ tương tự và tất cả chúng đều không đứng yên. Với mỗi bản cập nhật các tính năng mới được thêm vào. Chuyên gia tư vấn trực tuyến bổ sung nhiều tính năng cho cửa hàng trực tuyến của bạn để dễ dàng liên lạc với khách hàng. Hãy lấy dịch vụ livetex làm ví dụ, nhược điểm duy nhất của nó có lẽ là giá cả. Thời gian sử dụng ba tháng có giá 4.200 rúp cho một cửa hàng. Luôn có tùy chọn để dùng thử trong thời gian dùng thử.

  1. Giao tiếp trực tiếp với khách hàng.
  2. Máy phát điện chì.
  3. Các vật dụng khác nhau để gọi lại.
  4. Thống kê trực tuyến.
  5. Giám sát trực tuyến.

Nếu bạn vẫn còn thắc mắc về cách cài đặt phản hồi trên trang web, hãy hỏi họ trong phần bình luận. Hãy chia sẻ bài viết trên mạng xã hội.

Một trong những nhiệm vụ phổ biến nhất trong thực tế là thực hiện biểu mẫu phản hồi. Ý bạn là viết mã HTML, thiết kế nó bằng CSS, tạo tập lệnh PHP để xử lý dữ liệu nhận được từ người dùng và gửi nó đến thư của chúng tôi, viết tập lệnh JS để kiểm tra biểu mẫu xem dữ liệu đã nhập có phù hợp không, bảo vệ đứa con tinh thần của chúng tôi khỏi thư rác để hộp thư của chúng tôi không bị sập do các cuộc tấn công của bot.

Tất cả những điểm trên sẽ được thảo luận trong bài đánh giá của chúng tôi và nhận xét chi tiết.

Vì vậy, hãy bắt đầu tạo một biểu mẫu phản hồi:

HTML

Trước hết, chúng tôi viết mã HTML, trong đó chỉ định các trường mà người dùng sẽ điền vào. Chúng sẽ được chính thức hóa trong tương lai. Mã biểu mẫu trông như thế này:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" >Tên: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" >Điện thoại: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" >E-mail: < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" >Tin nhắn: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Gửi" />

Và trực quan nó bây giờ trông như thế này:

Tôi đồng ý, cho đến nay mọi thứ vẫn còn xấu và chưa có gì rõ ràng, nhưng chúng ta chỉ mới bắt đầu.

Chúng ta hãy xem xét đoạn mã trên một cách chi tiết:

  • < form method= "post" action= "mail.php" > …


    Để tạo biểu mẫu, bạn cần sử dụng thẻ biểu mẫu. Chính anh ta là người xác định phần đầu và phần cuối của biểu mẫu cho trình thông dịch mã. Nó, giống như bất kỳ thẻ nào, có toàn bộ các thuộc tính, nhưng chỉ có hai thuộc tính bắt buộc để biểu mẫu hoạt động, đó là phương thức (phương thức gửi yêu cầu đến máy chủ, bài đăng được sử dụng làm tiêu chuẩn cho biểu mẫu) và hành động ( chỉ ra đường dẫn đến tệp xử lý biểu mẫu, cụ thể là trong Tệp này sẽ chứa một tập lệnh PHP, sau đó sẽ gửi các giá trị do người dùng nhập cho chúng tôi qua email. Trong trường hợp của chúng tôi, chúng tôi thấy rằng tệp này được gọi là mail.php và. nó nằm trong cùng thư mục trang web với trang chúng tôi đang xem xét).

  • < input maxlength= "30" type= "text" name= "name" />


    Tiếp theo chúng ta có đầu vào. Đây thực sự là các trường biểu mẫu mà người dùng sẽ nhập thông tin chúng tôi cần (type="text" cho biết đây sẽ là văn bản). Thuộc tính maxlength chỉ định số lượng ký tự người dùng có thể nhập vào một trường biểu mẫu nhất định. Thuộc tính quan trọng nhất là tên - nó chỉ định tên của một trường cụ thể. Chính những cái tên này mà tập lệnh PHP sau đó sẽ xử lý thông tin nhập vào nó. Nếu muốn, bạn cũng có thể đặt thuộc tính giữ chỗ, thuộc tính này hiển thị văn bản bên trong trường sẽ biến mất khi con trỏ được đặt bên trong trường đó. Một trong những vấn đề với trình giữ chỗ là nó không được một số trình duyệt cũ hỗ trợ.

  • < label for = "name" >Tên:


    Được sử dụng nếu chúng tôi đã bỏ phần giữ chỗ. Chữ ký trường thông thường, thuộc tính for cho biết chữ ký này đề cập đến trường cụ thể nào. Giá trị cho biết tên của trường mà chúng tôi quan tâm.

  • < textarea rows= "7" cols= "50" name= "message" >


    Cũng giống như đầu vào, nó nhằm mục đích để người dùng nhập thông tin, chỉ có điều lần này trường này được điều chỉnh cho các tin nhắn dài. Hàng chỉ định kích thước trường theo hàng, cols theo ký tự. Nói chung, họ đặt chiều cao và chiều rộng cho trường của chúng tôi.

  • < input type= "submit" value= "Gửi" />


    Type="submit" cho chúng ta biết rằng đây là nút để gửi biểu mẫu và giá trị chỉ định văn bản sẽ nằm bên trong nút này.

  • < div class = "right" >


    chỉ được sử dụng để thiết kế trực quan hơn nữa cho biểu mẫu.

CSS

Để biểu mẫu phản hồi của chúng tôi trông đẹp mắt, nó cần phải được định dạng. Để có được kết quả sau:

Chúng tôi đã sử dụng mã này:

biểu mẫu ( nền: #f4f5f7; phần đệm: 20px; ) biểu mẫu . trái, hình thức . bên phải ( display: inline- block; Vertical-align: top; width: 458px; ) dạng . phải ( đệm- trái: 20px; ) nhãn ( display: block; font- size: 18px; text- Align: center; lề: 10px 0px 0px 0px; ) đầu vào, vùng văn bản ( đường viền: 1px Solid #82858D; đệm: 10px; cỡ chữ: 16px; chiều rộng: 436px; ) vùng văn bản ( chiều cao: 98px; lề- dưới: 32px; ) đầu vào [ type= "submit" ] ( width: 200px; float: right; border: none; nền: #595B5F; màu sắc: #fff; văn bản- biến đổi: chữ hoa;

Tôi không hiểu mục đích của việc mô tả chi tiết CSS là gì; tôi sẽ chỉ thu hút sự chú ý của bạn vào những điểm chính:

  1. Không cần phải viết thiết kế cho từng thẻ trong biểu mẫu. Cố gắng xây dựng bộ chọn theo cách mà bạn có thể thiết kế tất cả các thành phần bạn cần trong một vài dòng mã.
  2. Không sử dụng các thẻ loại không cần thiết để ngắt dòng và tạo vết lõm < br>, < p> v.v. CSS với display: block và Margin với các thuộc tính đệm sẽ đáp ứng tốt các tác vụ này. Tìm hiểu thêm về lý do tại sao bạn không nên sử dụng nó < br> Về bố cục nói chung thì bạn có thể đọc trong bài Tag br nhưng có thực sự cần thiết không? .
  3. Bạn không nên sử dụng bố cục dạng bảng cho biểu mẫu. Điều này mâu thuẫn với ngữ nghĩa của thẻ này và các công cụ tìm kiếm yêu thích mã ngữ nghĩa. Để hình thành cấu trúc trực quan của tài liệu, chúng ta chỉ cần thẻ div và thuộc tính hiển thị được chỉ định trong CSS: inline-block (sắp xếp các khối trong một hàng) và Vertical-align: top (ngăn chúng phân tán trên màn hình) , đặt chúng ở độ cao cần thiết và thì đấy, không có gì thừa và mọi thứ đều được đặt theo cách chúng ta cần.

Đối với những người muốn tiết kiệm thời gian thiết kế trang web, tôi có thể khuyên bạn nên sử dụng CSS framework khi tạo trang web, đặc biệt là những trang tự viết. Lựa chọn của tôi về vấn đề này là Twitter Bootstrap. Bạn có thể xem bài học về cách thiết kế biểu mẫu bằng cách sử dụng nó.

PHP

Chà, đã đến lúc làm cho biểu mẫu của chúng ta hoạt động.

Chúng tôi đi đến thư mục gốc của trang web và tạo tệp mail.php ở đó mà trước đây chúng tôi đã chỉ định đường dẫn trong thuộc tính hành động của thẻ biểu mẫu.

Cuối cùng, mã của anh ấy sẽ trông như thế này:

tin nhắn của bạn đã được gởi đi thành công \" javascript: history.back()\" >Quay lại

" ; nếu (! trống ($_POST [ "tên" ] ) và ! trống ($_POST [ "điện thoại" ] ) và ! trống ($_POST [ "thư" ] ) và ! trống ($_POST [ "tin nhắn" ] ) ) ( $name = cắt (strip_tags ($_POST [ "name" ] ) ) ; $phone = cắt (strip_tags ($_POST [ "điện thoại" ] ) ) ; $mail = cắt (strip_tags ($_POST [ "mail" ] ) ) ; $message = cắt (strip_tags ($_POST [ "tin nhắn" ] ) ; mail (, , "Tôi đã viết cho bạn: " . $name ."
Số của anh ấy: " . $phone ."
Thư của anh ấy: " . $mail . "
Tin nhắn của anh: ". tin nhắn $, ) ; tiếng vọng "Tin nhắn của bạn đã được gởi đi thành công!
Bạn sẽ nhận được câu trả lời ngay
$ trở lại "; lối ra ;

) khác ( echo ; exit ; ) ?>

Bạn có thể bỏ qua phần thảo luận về phần HTML và CSS của tài liệu này. Về cốt lõi, đây là một trang web thông thường mà bạn có thể thiết kế theo mong muốn và nhu cầu của mình. Hãy xem phần quan trọng nhất của nó - tập lệnh PHP để xử lý biểu mẫu:

\" javascript: history.back()\" >Quay lại

" ;

$trở lại ="

Với dòng này chúng ta tạo liên kết để quay lại trang trước. Vì chúng tôi không biết trước người dùng sẽ truy cập trang này từ trang nào nên việc này được thực hiện bằng cách sử dụng một hàm JS nhỏ. Trong tương lai, chúng ta sẽ chỉ truy cập biến này để hiển thị nó ở những nơi chúng ta cần. nếu (! trống ($_POST [ "tên" ] ) và ! trống ($_POST [ "điện thoại" ] ) và ! trống ($_POST [ "thư" ] ) và ! trống ($_POST [ "tin nhắn" ] ) ) (// phần bên trong của trình xử lý ) khác ( tiếng vang"Để gửi tin nhắn, hãy điền vào tất cả các trường! $back "

; lối ra ;

)

Ở đây chúng tôi thêm kiểm tra biểu mẫu để đảm bảo rằng các trường đã đầy. Như bạn đã đoán, trong phần $_POST["name"], trong dấu ngoặc kép, chúng ta viết giá trị của thuộc tính name của dữ liệu đầu vào.

Nếu tất cả các trường được điền thì tập lệnh sẽ bắt đầu xử lý dữ liệu ở phần bên trong của nó, nhưng nếu ít nhất một trường chưa được điền thì một thông báo sẽ hiển thị trên màn hình người dùng yêu cầu họ điền vào tất cả. các trường có dạng echo “Để gửi tin nhắn, hãy điền vào tất cả các trường! $back” và một liên kết để quay lại trang trước mà chúng tôi đã tạo ngay từ dòng đầu tiên.

Do đó, chúng tôi đã xóa dữ liệu do người dùng nhập khỏi thẻ html và khoảng trắng thừa. Điều này cho phép chúng tôi tự bảo vệ mình khỏi nhận mã độc hại trong các tin nhắn được gửi cho chúng tôi.

Việc kiểm tra có thể phức tạp hơn nhưng điều này tùy thuộc vào quyết định của bạn. Chúng tôi đã cài đặt biện pháp bảo vệ tối thiểu ở phía máy chủ. Chúng tôi sẽ thực hiện phần còn lại ở phía máy khách bằng cách sử dụng JS.

Tôi không khuyên bạn nên từ bỏ hoàn toàn tính năng bảo vệ biểu mẫu ở phía máy chủ để chuyển sang sử dụng JS, vì mặc dù cực kỳ hiếm nhưng vẫn có những tính năng duy nhất bị vô hiệu hóa JS trong trình duyệt.

Sau khi làm sạch các thẻ, thêm gửi tin nhắn:

thư ( "[email protected]", "Thư từ your_site_address", "Đã viết cho bạn: " . $tên . "
Số của anh ấy: " . $phone ."
Thư của anh ấy: " . $mail . "
Tin nhắn của anh: ". tin nhắn $ "Loại nội dung:văn bản/html;bộ ký tự=windows-1251") ;

Chính dòng này chịu trách nhiệm tạo và gửi tin nhắn cho chúng tôi. Nó được điền như sau:

  1. “[email protected]” – ở đây bạn chèn email của mình vào giữa dấu ngoặc kép
  2. “Thư từ your_site_address” là chủ đề của thư sẽ được gửi tới email của bạn. Bạn có thể viết bất cứ điều gì ở đây.
  3. "Đã viết cho bạn: ".$name." < br /> Số của anh ấy: ".$phone." < br /> Email của anh ấy: ".$mail." < br /> Thông điệp của anh ấy: ".$message – chúng tôi tự tạo văn bản tin nhắn. $name – chúng tôi chèn thông tin do người dùng điền bằng cách truy cập vào các trường từ bước trước, trong dấu ngoặc kép, chúng tôi mô tả ý nghĩa của trường này, kèm theo thẻ < br /> Chúng tôi ngắt dòng để có thể đọc được toàn bộ tin nhắn.
  4. Content-type:text/html;charset=windows-1251 - ở cuối có dấu hiệu rõ ràng về loại dữ liệu được truyền trong tin nhắn và mã hóa của nó.

QUAN TRỌNG!

Mã hóa được chỉ định trong phần “head” của tài liệu ( < meta http- equiv= "Content-Type" content= "văn bản/html; bộ ký tự=windows-1251" /> ), mã hóa từ tin nhắn Content-type:text/html;charset=windows-1251 và nói chung mã hóa của tệp PHP phải khớp nhau, nếu không, trong các tin nhắn nhận được qua thư, “từ điên” sẽ được hiển thị thay vì tiếng Nga hoặc chữ cái tiếng anh.

Nhiều người không chỉ rõ mã hóa của thư được gửi, nhưng trên một số ứng dụng email, điều này có thể gây ra sự cố trong tương lai (các email không thể đọc được sẽ được gửi đến thư), vì vậy tôi khuyên bạn nên chỉ định nó.

Kiểm tra biểu mẫu xem dữ liệu đã nhập có đầy đủ không

Để đảm bảo người dùng không vô tình bỏ sót các trường và điền chính xác mọi thứ, cần kiểm tra dữ liệu đã nhập.

Điều này có thể được thực hiện cả bằng PHP ở phía máy chủ và trong JS ở phía máy khách. Tôi sử dụng tùy chọn thứ hai, vì bằng cách này, một người có thể ngay lập tức phát hiện ra mình đã làm gì sai và sửa lỗi mà không cần thực hiện chuyển đổi trang bổ sung.

Chúng tôi dán mã tập lệnh vào cùng một tệp nơi chúng tôi có phần HTML của biểu mẫu. Đối với trường hợp của chúng tôi, nó sẽ trông như thế này:

< script>hàm checkForm(form) ( var name = form. name. value; var n = name.match(/ ^[ A- Za- zA- Jaa- z ] * [ A- Za- zA- Ja- z ] + $/ ) ; nếu (!n) ( cảnh báo( "Tên đã nhập không chính xác, vui lòng sửa lỗi") ; trả về sai; ) var phone = form. điện thoại. giá trị; var p = điện thoại. match(/ ^[ 0 - 9 + ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; nếu (! p) ( cảnh báo("Số điện thoại nhập sai" ) ; trả về sai; ) var thư = biểu mẫu. thư. giá trị; var m = thư. match(/ ^[ A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([ A- Za- z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \ ) + [ A- Za- z] + $/ ) ; nếu (! m) ( cảnh báo(

"Email đã nhập không chính xác, vui lòng sửa lỗi"

) ; trả về sai; ) trả về đúng ; ) Vâng, bây giờ là phân tích thông thường: Vì điều đó,

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

để khi bạn nhấp vào nút gửi biểu mẫu, chúng tôi sẽ kiểm tra nó


Chúng tôi đính kèm phần khởi chạy tập lệnh của mình vào thẻ biểu mẫu:

Các ấn phẩm liên quan: