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

Xin chào độc giả thân mến, hôm nay tôi muốn cho bạn biết 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, nằm trong cấu trúc của trang đích. Rốt cuộc, đâ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.

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ệ:

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

Nếu bạn có bất kỳ câu hỏi nào về đánh dấu, hãy hỏi họ trong phần bình luận, tôi sẽ cố gắng giải đáp chi tiết, và trong bài viết tôi sẽ không mô tả từng yếu 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 tôi và đưa nó đến có thể đọc được:

/ * Kiểu biểu mẫu * / #application (width: 475px; margin: 0 auto;) / * Kiểu trường nhập * / #applicationName, #applicationEmail, #applicationTelephone (width: 100%; height: 73px; background: none; margin - top: 25px; border: 1px solid #fff; border-radius: 40px; text-align: center; color: #fff; font-size: 24px;) / * Các kiểu trường khi được nhấp vào * / #applicationName: focus, #applicationEmail : focus, #applicationTelephone: focus (border: 1px solid # 30ad64;) / * Tạo kiểu văn bản được hiển thị trong placeholder * / :: - 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);) / * Các kiểu nút * / .applicationButton (margin-top: 25px; background: # 30ad64; border: none; width: 100%; height: 73px; border-radius: 40px; color: #fff; font-size: 24px; text -formation: uppercase; font-family: "PT Sans", sans-serif; con trỏ : pointer;) .applicationButton: hover (background: # d68c18;)

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

Chuyển tiếp: .6s;

Trong đó .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 tôi đã có được một cái nhìn đẹp, bây giờ nó trông như thế này:

Tạo biểu mẫu phản hồi - php markup

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

Nó có cấu trúc tương tự như một cái bình thường. tệp 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 "

Tức 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 hoàn chỉnh và bạn nên thiết kế nó cho phù hợp.

"; $ msg. ="

Tin nhắn trang web

\ r \ n "; $ msg. ="

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

\ r \ n "; $ msg. ="

Thư:". $ usermail."

\ r \ n "; $ msg. ="

Địa điểm:". $ usertel."

\ r \ n "; $ msg. =" "; // gửi tin nhắn if (@mail ($ sendto, $ subject, $ msg, $ headers)) (echo"

";) else (tiếng vọng"

"; } ?>

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

$ send = " [email được bảo vệ]"; // thư sẽ được gửi thư $ username = $ _POST [" name "]; // lưu dữ liệu nhận được từ trường với tên $ usertel = $ _POST [" phone "]; // 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 một biến

Ở đây, tôi nghĩ nó rõ ràng.

Bây giờ chúng ta hãy tạo tiêu đề của lá thư.

$ subject = "Tin nhắn mới"; $ headers = "Từ:". dải_tag ($ usermail). "\ r \ n"; $ headers. = "Reply-To:". dải_tag ($ usermail). "\ r \ n"; $ headers. = "MIME-Phiên bản: 1.0 \ r \ n"; $ headers. = "Content-Type: text / html; charset = utf-8 \ r \ n";

Hàng $ subject = "Tin nhắn mới";- chịu trách nhiệm về chủ đề của bức thư, có thể viết ở đó: “Ứng dụng 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 bức thư đến từ địa chỉ được chỉ định trong trường input type = "email". Đó là, từ cái mà người dùng đã nhập khi điền vào biểu mẫu. Để làm điều này, hãy viết những dòng sau:

$ headers = "Từ:". dải_tag ($ 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ờ chúng ta hãy thiết lập vẻ bề ngoài bức thư. Bạn có thể tạo kiểu cho nó theo cách bạn thích, nhưng tôi đề xuất cấu trúc sau:

$ msg = " "; $ msg. ="

Tin nhắn 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 là phông chữ của bức thư. Thứ hai - chúng tôi hiển thị một thông báo, ví dụ: "Đơn đăng ký từ biểu mẫu Phản hồi trên màn hình đầu tiên. Trên dòng thứ ba, thứ tư và thứ năm, chúng tôi chuyể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 một bức thư với chức năng mail và xác định điều gì sẽ xảy ra khi bức thư được gửi thành công và không thành công:

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

";) else (tiếng vọng"

"; } ?>

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

Một vài giây sau khi hình ảnh được hiển thị, tôi chuyển hướng (tự động chuyển hướng) đến trang chủ. Bạn có thể làm điều này bằng cách thêm dòng sau vào giữa các thẻ head;

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

Tôi không phải là chuyên gia về php - đây là một ngôn ngữ lập trình back-end, tôi đã bị cuốn hút vào việc học front-end trong suốt cuộc đời mình. Do đó, không nên phán xét một cách nghiêm khắc. Có, ở đây bạn có thể 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 ai đó có đề xuất về cách cải thiện mã này, vui lòng viết trong phần nhận xét hoặc qua thư, tôi sẽ sửa bài học, cảm ơ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ể ai đó chưa hiểu rõ về 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ì chắc chắn biểu mẫu liên hệ sẽ hiệu quả với bạn. Nếu bạn có bất kỳ câu hỏi nào - hãy viết trong phần bình luận, tôi sẽ cố gắng giải đáp! Hẹn gặp lại các bạn trên blog!

P.s. Vì tôi bắt đầu nhận được câu hỏi rất thường xuyên về lý do tại sao biểu mẫu không hoạt động và thư không đến được thư, tôi quyết định mô tả một số lý do phổ biến nhất tại sao đ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 biểu mẫu lưu trữ trả phí.
Bạn thử nghiệm biểu mẫu trên một máy chủ 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 đến thư của bạn.

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

23/07/2014 12/07/2018

dimadv7

Bất kỳ trang web nào cũng nên có một biểu mẫu phản hồi, vì vậy sớm hay muộn, mỗi chúng ta hãy nghĩ về sự phát triển của nó. Có rất nhiều tùy chọn trên mạng, ai đó sử dụng các plugin phổ biến, ai đó có kinh nghiệm cá nhân của riêng họ, nhưng hầu hết tìm kiếm giải pháp. Trong mọi trường hợp, biểu mẫu phản hồi trang web sẽ hoạt động và hoạt động, và tất cả điều này theo thứ tự.

HTML

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

Mỗi đầu vào chúng tôi có đều có tên riêng tên, chúng tôi sẽ cần nó sau này để 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 liệu mà còn có thể chọn vùng văn bản. Chỉ cần đừng quên đặt tên riêng của từng người, chúng tôi sẽ sử dụng tên này khi gửi thông tin qua đường bưu điện. Để thuận tiện, tôi đã thêm một thuộc tính bắt buộc vào mỗi trường, nhờ đó trình duyệt sẽ không cho phép người dùng gửi giá trị trống và thông báo cho bạn về sự cần thiết phải hoàn thành chúng.

css

Khi biểu mẫu đã sẵn sàng, bạn có thể thay đổi một chút. Tất cả cũng phụ thuộc vào nhu cầu và tưởng tượng của bạn. Để rõ ràng, tôi đã phác thảo một vài phong cách cho mỗi phần tử để mọi thứ trông không quá phẳng. Nhưng nếu bạn quá lười hoặc không biết cách làm, thì bạn có thể sử dụng phiên bản của tôi:

Đầu vào biểu mẫu (max-width: 400px; width: 100%; margin: 0 auto;) (box-sizing: border-box; display: block; border: none; box-shadow: inset 0px 0px 4px 1px rgba (0, 0, 0, 0,11); padding: 10px 20px; width: 100%; margin: 10px 0; outline: none;) input (background: red; border: none; box-shadow: 0px 2px 0 1px # C50909; border- bán kính: 5px; màu: trắng; văn bản-biến đổi: chữ hoa; phông chữ-weight: 600; chiều rộng: 200px; con trỏ: con trỏ; chuyển tiếp: 0,3 giây;) input: hover (background: black; box-shadow: 0px 2px 0 1px màu đen;)

Phía khách hàng

Đến đây thì hiểu chi tiết hơn là đã có giá trị rồi, lựa chọn cho mình sẽ chính xác hơn lựa chọn phù hợp. Để gửi tin nhắn đến mail, chúng ta cần sử dụng ngôn ngữ php, I E. tạo ra tập tin riêng biệt, mà 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. Do đó, chúng tôi 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 phải chỉnh sửa một chút html trên cùng và đặt giá trị thuộc tính phương thức của biểu mẫu (post hoặc get). Tất cả phụ thuộc vào cách bạn muốn gửi dữ liệu từ biểu mẫu. Và cũng đừng quên ghi hành động, hành động này sẽ chỉ ra đường dẫn đến tệp php.

Và chúng tôi sẽ đi với 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, đồng thời nhận được phản hồi từ máy chủ, chúng tôi sẽ cung cấp cho người dùng thông báo về hoạt động thành công hoặc lỗi. Tuy nhiên, chúng tôi cũng cần 2 tệp, giả sử contact.php và custom.js.

Trước hết, đừng quên đưa vào thư viện Jquery, với sự trợ giúp của nó, chúng tôi sẽ giảm mã nhiều lần và sẽ 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 có sẵn.

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

Bây giờ chúng ta hãy xem sơ đồ các 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, sự kiện này 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ó vào tệp contact.php. Tại đây, chúng tôi một lần nữa kiểm tra xem các trường có trống không (để tránh một khả năng khác là spam), hãy gửi tin nhắn tới email và thông báo cho người dùng về kết quả, được chuyển dưới dạng phản hồi cho custom.js.

If (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 =" Feedback "; $ subject =" =? utf-8? b? ". base64_encode ($ subject)."? = "; $ headers =" From: Mẫu ví dụ<$fromMail>\ n "; $ headers. =" Loại nội dung: text / trơn; charset = "utf-8" \ r \ n "; $ headers. =" MIME-Version: 1.0 \ r \ n "; $ headers. =" Date: ". date (" D, d MY h: i: s O ")." \ R \ n "; // nội dung tin nhắn $ body =" Đã nhận được email từ trang web ". $ Site." \ n \ nTên: ". $ txtname." \ nĐiện thoại: ". $ txtphone." \ ne-mail: ". $ txtemail." \ nTin nhắn: ". $ txtmessage; mail ($ emailTo, $ subject, $ body, $ headers); echo "ok";)

Đâ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 php, tạo các 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à hoạt động mà bạn có thể sử dụng trên trang web của mình.

bản giới thiệu

các tập tin

Các plugin sẵn sàng

Vì bạn đang ở trên Blog WordPress, thì bạn có thể đã 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à một người hoàn thiện 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à thậm chí tôi có thể đưa một trong số chúng ra để bạn chú ý cho rõ ràng. Mục đích của đoạn này không phải là một đề xuất, mà chỉ là một ví dụ, vì tôi đã sử dụng plugin Mâu liên hệ 7 trong nhiều dự án.

Nó rất dễ thiết lập 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 đó. Bạn chỉ cần thêm các trường cần thiết vào hàm khởi tạo, dịch và thay đổi thông báo về lỗi và gửi thành công theo cách của riêng bạn là xong. Sau đó, sao chép mã ngắn và dán vào đúng vị tríđầu ra biểu mẫu.

Tôi chưa bao giờ gặp sự cố với plugin và nếu bạn cần nhanh chóng và giải pháp chìa khóa trao tay, vậy là xong. Nếu bạn có các yêu cầu về chức năng và thiết kế của riêng mình cho biểu mẫu, thì tốt hơn là 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, biểu mẫu phản hồi sẽ có trên mỗi trang web. Hôm nay tôi sẽ đưa ra 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 có thể được sao chép vào trang web của bạn. Ngoài ví dụ làm sẵn, có rất nhiều plugin cũng rất phổ biến. Trên nhiều trang web, biểu mẫu này đã được tích hợp sẵn trong chủ đề, nhưng đôi khi cần thêm một 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ùng sục trên Internet để tìm kiếm câu trả lời cho câu hỏi này. Đã sửa đổi số lượng nhiều hơn các trang web và blog, tôi tìm thấy rất ít câu trả lời chất lượng cao về việc chèn biểu mẫu phản hồi vào một trang web. Hầu hết các tài liệu được viết về cách làm việc với các plugin. Trong một số bài báo, nó không hoàn toàn rõ ràng nên làm gì và làm như thế nào, mã không hoạt động, thư không đến ... và vân vân.

Chắc chắn có những câu trả lời tốt, nhưng chúng rất ít. Tôi sẽ đưa ra một ví dụ đơn giản mà không cần nhiều trí óc. Kiến thức đặc biệt trong php là không cần thiết, hay đúng hơn là chúng không cần thiết. Cần thay đổi những gì và ở đâu, tôi sẽ viết chi tiết khi cần thiết. Hình thức hoạt động tốt, không bị treo. Tôi có một mẫu ví dụ tại. Trong ví dụ đã hoàn thành, tôi đã thêm một số kiểu để làm đẹp, để biểu mẫu trông không "tồi tàn" chút nào. 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 trang web trên html

V ví dụ này, biểu mẫu phản hồi cho trang web bao gồm Mã HTML. Bạn chèn một ví dụ như vậy về mã html trên hoàn toàn bất kỳ trang nào của trang web, bất kể bạn sử dụng ở đâu và làm gì. Cùng một mã 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.

< form action = "/wp-content/themes/xmarkup/form.php" method = "post" name = "form"> 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ã, trong dòng đầu tiên, bạn phải chỉ định đường dẫn của mình đến tập tin php form.php (về nó sau một chút). Không có gì khác cần được thay đổi. 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 biểu mẫu, bạn luôn có thể thêm những cái mới hoặc thay đổi những cái cũ. Bạn cũng có thể thêm phong cách của mình trực tiếp vào tòa trong bảng. Nếu tùy chọn này không thuận tiện cho bạn, hãy đặt các lớp mới và chỉ sau đó thêm các kiểu thông qua tệp style.css của bạn

Ai chưa biết cách thì vào bảng quản trị trang, vào trình soạn thảo và mở tệp style.css. Thêm mã này vào cuối trang định kiểu. Do đó, mã biểu mẫu sẽ được chèn vào trang và phong cách cssđến bảng style.css

Inp (padding: 10px; border: 1px solid # E5E5E5; width: 200px; color: # 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;)

inp (

padding: 10px

viền: 1px solid # 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 - hộp - bóng: rgba (0, 0, 0, 0,1) 0px 0px 8px;

Sau khi thực hiện xong các thao tác, bạn sẽ nhận được một biểu mẫu phản hồi như vậy trên trang. Đừng mang theo quá nhiều, hình thức của bạn nên đơn giản và thuận tiện nhất có thể. Không có thêm trường bổ sung ... tên, email, chủ đề và tin nhắn. Nếu muốn, bạn có thể xóa ngay cả Chủ đề của tin nhắn.

mã biểu mẫu php

Chúng tôi đã quyết định đánh dấu biểu mẫu, mang lại vẻ đẹp, bây giờ chúng tôi cần tạo một tệp với phần mở rộng php và thêm mã sau vào nó. Thêm tệp 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, loại bỏ tập tin đã cho trong thư mục chủ đề của bạn. Địa chỉ và tên của tệp này, ban đầu bạn phải đăng ký trong 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 đủ cho một ví dụ, để rõ ràng những gì và nơi để chèn.

(

Bản thân mã 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)) (
$ address = " [email được bảo vệ]" ;
$ mes = "Tên: $ name \ nE-mail: $ email \ nĐề tài: $ temma \ nText: $ massage";
$ send = mail ($ address, $ temma, $ mes, "Loại nội dung: văn bản / trơn; charset = UTF-8 \ r \ nTừ: $ email") ;
if ($ send == "true")
(tiếng vang "Đã gửi tin nhắn"; }
khác (tiếng vang "Ồ, đã xảy ra lỗi"; }
khác
tiếng vang "Đ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. $ address = " [email được bảo vệ]»- trong dòng này, chúng tôi cho biết địa chỉ e-mail của bạn, những lá thư nào sẽ được gửi đến. Không có gì khác cần phải thay đổi, mọi thứ đã được thiết lập và hoạt động. Nếu bạn gặp khó khăn gì trong quá trình cài đặt, hãy ghi vào bình luận, chắc chắn mình sẽ giải đáp.

Chèn phản hồi trong wordpress

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

Ví dụ: bạn có thể tạo trang "Tác giả liên hệ" hoặc "Tác giả" và tải lên biểu mẫu của bạn ở đó. Trên một số blog, tôi đã nhận thấy một hàng các 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ả ở cuối mỗi biểu mẫu. Nếu bạn muốn, bạn có thể lặp lại tương tự. Biểu mẫu liên hệ trên blog của tôi hoạt động, cá nhân tôi đã kiểm tra nó bằng ví dụ của riêng mình. Nếu bạn không nhận được email, thì đó là một vấn đề ở phía bạn.

Các plugin cho 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 dạng như vậy cho trang web. Vào bảng quản trị, nhấp vào Plugins - thêm mới. Chọn bất kỳ mà 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.

Biểu mẫu liên hệ an toàn nhanh chóng.

Mẫu liên hệ bằng cách Liên hệ với TÔI.

Formcraft.

Trình tạo biểu mẫu trực quan.

nForms - Trình tạo biểu mẫu WordPress.

Các hình thức trọng lực.

Chúng ta lần lượt cài đặt từng cái và xem xét từng cái riêng biệt. Hãy chú ý ngay đến hiệu suất của plugin, đến việc loại bỏ một 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 theo sở thích và màu sắc của mình.

Hãy lấy cái đầu tiên làm ví dụ. Chúng tôi thêm một plugin Contact Form 7. Plugin này rất đơn giản, không có vấn đề gì khi làm việc với nó. Nhiều người viết blog sử dụng plugin này cho các biểu mẫu nhỏ bổ sung trên trang web của họ. Đi tới bảng điều khiển bên trái mục Liên hệ với Biểu mẫu 7 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, hãy chọn và đặt tên cho các trường sẽ hiện diện. Không cần phải tạo một biểu mẫu quá lớn, hãy thêm tên, thư, chủ đề, tin nhắn và nút gửi. Trong tab "Thư", chúng tôi cho biết hộp thư điện tử của bạn mà thư sẽ được gửi đến. "Bạn không nên gặp bất kỳ khó khăn cụ thể nào, mọi thứ đều trực quan.

Sau khi được tạo, plugin sẽ cung cấp cho bạn một shortcode ngắn mà bạn sẽ cần phải chèn vào đúng vị trí trên trang web chẳng hạn. Sau khi dá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ẽ theo một cách rất khủng khiếp. Bạn không nên quá khó chịu. Chúng tôi đi qua ftp đến đị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 mình một cách an toàn để biểu mẫu của bạn đẹp và dễ gây 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 hình thức như vậy. Có những dịch vụ đặc biệt mà bạn có thể tạo một biểu mẫu mới một cách nhanh chóng và không cần nhiều kiến thức. Ngoài ra còn có một mặt khác của đồng xu. Các dịch vụ như vậy cũng cần được kiểm tra về hiệu suất và quan trọng nhất là chi phí của những niềm vui đó. Một số trong số chúng là miễn phí, nhưng cũng có các tùy chọn trả phí. Viết tên của một trong số họ trên Yandex.

người thiết kế biểu mẫu;

livetools.uiparade;

Google Biểu mẫu

iFormbuilder;

vui vẻ.

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 đó. Từ bạn chỉ cần chọn các trường cho biểu mẫu, thêm nút "gửi" và đăng ký tất cả các mục nhập 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 vào trang của bạn và kiểm tra kết nối để biết khả năng hoạt động.

Giao tiếp với chủ sở hữu của 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ụ của các 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 tăng lên. Rất thuận tiện khi khách hàng vào trang web và có thể liên hệ trực tiếp với quản trị viên của cửa hàng trực tuyến bất cứ lúc nào.

Ngày nay, có một số lượng lớn các loại hình dịch vụ như vậy 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. Các nhà 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 để tạo sự thuận tiện cho việc giao tiếp với khách hàng. Hãy lấy dịch vụ livetex làm ví dụ, điểm trừ duy nhất của nó có lẽ là giá cả. Thời gian sử dụng ba tháng có giá 4200 rúp cho một cửa hàng. Luôn có một tùy chọn để thử thời gian dùng thử.

Giao tiếp trực tiếp với khách hàng.

Máy phát điện chì.

Các tiện ích gọi lại khác nhau.

Thống kê trực tuyến.

Giám sát trực tuyến.

Nếu bạn có bất kỳ câu hỏi nào về cách thiết lập phản hồi trên trang web, hãy hỏi họ trong phần nhận xét. Hãy chia sẻ bài viết lê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. Tobish viết mã HTML của nó, thiết kế nó bằng CSS, tạo một tập lệnh PHP sẽ 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 một tập lệnh JS sẽ kiểm tra biểu mẫu về tính đầy đủ của dữ liệu đầu vào, bảo vệ con đẻ từ thư rác, để hộp thư của chúng tôi không bị sập vì các cuộc tấn công của bot.

Tất cả các điểm trên sẽ được chúng tôi xem xét và nhận xét chi tiết.

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

HTML

Trước hết, chúng tôi viết mã HTML, nó thiết lập các trường mà người dùng sẽ điền vào. Chúng sẽ được phát triển 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" >Nhắn: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "gửi" />

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

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

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ó cả một tập hợp 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 tiêu chuẩn cho biểu mẫu) và hành động (cho biết đường dẫn đến tệp trình 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 thư, 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 tôi 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 ta cần (type = "text" chỉ ra rằng nó 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 trường biểu mẫu nhất định. Thuộc tính quan trọng nhất là name - nó chỉ định tên của một trường cụ thể. Chính bởi những cái tên này mà tập lệnh PHP sẽ xử lý thêm thông tin đi 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 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ỏ qua trình giữ chỗ. Nhãn trường thông thường, thuộc tính for cho biết trường mà nhãn đã cho tham chiếu đến. Giá trị cho biết tên của lĩnh vực mà chúng tôi quan tâm.

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

Cũng giống như đầu vào, nó được dùng để người dùng nhập thông tin, chỉ có điều lần này trường được làm sắc nét đối với các tin nhắn dài. Các hàng chỉ định kích thước của trường tính bằng dòng, cols tính bằng ký tự. Nói chung, họ thiết lập chiều cao và chiều rộng của 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à một nút để gửi biểu mẫu và giá trị chỉ định văn bản sẽ ở bên trong nút này.

< div class = "right" >

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

css

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

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

biểu mẫu (background: # f4f5f7; padding: 20px;). trái, biểu mẫu. biểu mẫu right (display: inline- block; vertical- align: top; width: 458px;). đầu vào right (padding- left: 20px;) label (display: block; font- size: 18px; text- align: center; margin: 10px 0px 0px 0px;), textarea (border: 1px solid # 82858D; padding: 10px; font- size: 16px; width: 436px;) textarea (height: 98px; margin- bottom: 32px;) input [type = "submit"] (width: 200px; float: right; border: none; background: # 595B5F; color: #fff; text-biến đổi: chữ hoa;)

Tôi không hiểu rõ vấn đề trong việc mô tả CSS một cách chi tiết, tôi sẽ chỉ thu hút sự chú ý của bạn đến những điểm chính:

Không nhất thiết phải viết thiết kế cho mỗi thẻ trong biểu mẫu. Cố gắng xây dựng bộ chọn của bạn theo cách mà bạn có thể tạo kiểu tất cả các yếu tố bạn cần trong một vài dòng mã.

Không sử dụng thẻ phụ theo loại để ngắt dòng và tạo thụt lề < br>, < p> và như vậy, những tác vụ này được CSS xử lý hoàn hảo với hiển thị thuộc tính: khối và lề với phần đệm. Tìm hiểu thêm về lý do tại sao bạn không nên sử dụng < br> về bố cục, nói chung, bạn có thể đọc thẻ br trong bài viết, nhưng nó có thực sự cần thiết không? .

Không sử dụng bố cục dạng bảng cho biểu mẫu. Điều này đi ngược lạ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, thẻ div là đủ đối với chúng ta và các thuộc tính display: inline-block được đặt trong CSS (sắp xếp các khối trong một hàng) và vertical-align: top (ngăn chúng lan rộng trên màn hình ), chúng tôi đặt cho chúng chiều cao cần thiết và thì đấy, không có gì thừa và mọi thứ được sắp xếp như chúng tôi cần.

Đối với những ai muốn tiết kiệm thời gian thiết kế site, tôi có thể khuyên bạn sử dụng CSS framework khi tạo site, đặc biệt là những site tự viết. Sự lựa chọn của tôi trong vấn đề này là Twitter Bootstrap. Có thể xem một bài học về 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 có thể hoạt động được.

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 đó 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 ta 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 = trim (strip_tags ($ _POST ["name"]))); $ phone = trim (dải_tags ($ _POST ["phone"])); $ mail = trim (dải_tags ($ _POST ["mail"] )); $ message = trim (strip_tags ($ _POST ["message"])); mail (, "Đã gửi cho bạn:". $ name. "
Số của anh ấy: ". $ Phone."
Thư của anh ấy: ". $ Mail. "
Thông điệp của anh ấy: ". $ tin nhắn,); tiếng vang "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 trong thời gian ngắn
$ trở lại "; lối ra; ) khác (echo; exit;)?>

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

$ trở lại = "
\ "javascript: history.back () \"> Quay lại
" ;

Với dòng này, chúng tôi tạo một 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 tôi sẽ chỉ đơn giản là tham chiếu đến biến này để hiển thị nó ở những nơi chúng tôi 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ý) else (tiếng vang "Vui lòng điền vào tất cả các trường để gửi tin nhắn! $ Back"; lối ra; )

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

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 trong 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ẽ được hiển thị trên màn hình của người dùng với yêu cầu điền vào tất cả các trường của biểu mẫu 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 bằng dòng đầu tiên.

Tiếp theo, dán nó vào bên trong của trình xử lý biểu mẫu:

$ name = trim (dải_tag ($ _POST ["tên"])); $ phone = trim (dải_tag ($ _POST ["phone"])); $ mail = trim (dải_tag ($ _POST ["thư"])); $ message = trim (dải_tag ($ _POST ["nội dung"]));

Do đó, chúng tôi đã xóa thông tin đầu vào của người dùng khỏi các thẻ html và các 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 việc 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, nhưng tùy thuộc vào bạn. Chúng tôi đã đặt 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ủ để ủng hộ JS, bởi vì mặc dù nó cực kỳ hiếm nhưng vẫn có những người duy nhất bị vô hiệu hóa JS trong trình duyệt.

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

thư ( "[email protected]", "Email từ your_site_address", "Đã viết cho bạn:". $ tên. "
Số của anh ấy: ". $ Phone."
Thư của anh ấy: ". $ Mail. "
Thông điệp của anh ấy: ". $ tin nhắn, "Content-type: text / html; charset = windows-1251") ;

Chính dòng này đã tham gia vào việc hình thành và gửi một thông điệp cho chúng ta. Nó được điền như sau:

"[email protected]" - chèn thư của bạn vào giữa các dấu ngoặc kép tại đây

"Email từ your_site_address" là chủ đề của thư sẽ được gửi đến thư. Bạn có thể viết bất cứ điều gì ở đây.

"Đã viết cho bạn:". $ Name. " < br /> Số của anh ấy là: ". $ Phone." < br /> Thư của anh ấy: ". $ Mail." < br /> Thông điệp của nó: ". $ Message - chúng tôi tạo thành văn bản của chính thông báo. $ Name - chúng tôi chèn thông tin được người dùng điền thông qua việc truy cập 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, với thẻ < br /> chúng ta ngắt dòng để có thể đọc được toàn bộ thư.

Loại nội dung: text / html; charset = windows-1251 - ở cuối có chỉ báo rõ ràng về kiểu dữ liệu được truyền trong thư và mã hóa của nó.

QUAN TRỌNG!

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

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

Kiểm tra biểu mẫu về tính đầy đủ của dữ liệu đầu vào

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

Điều này có thể được thực hiện trong cả PHP ở phía máy chủ và JS ở phía máy khách. Tôi sử dụng tùy chọn thứ hai, bởi vì theo 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 tiếp trang bổ sung.

Mã tập lệnh được chèn trong cùng một tệp mà chúng ta 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ẽ giống như sau:

< script>function checkForm (form) (var name = form. name. value; var n = name. match (/ ^ [A- Za- zA- Za-z] * [A- Za- zA- Za-z] + $ / ); if (! n) (alert ( "Tên đã được 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. khớp (/ ^ [0 - 9 +] [0 - 9 -] * [0 - 9 -] + $ /); if (! p) (alert ( "Điện thoại được nhập không chính xác"); trả về sai; ) var mail = biểu mẫu. thư. giá trị; var m = thư. khớp (/ ^ [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] + $ /); if (! m) (alert ( "Email đã nhập không chính xác, vui lòng sửa lỗi"); trả về sai; ) trả về true; )

Vâng, bây giờ là phân tích thông thường:

Vì, để khi bạn nhấp vào nút gửi của biểu mẫu, chúng tôi đã xác thực nó chúng tôi treo phần khởi chạy tập lệnh của mình trên thẻ biểu mẫu:

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

Bây giờ, từng điểm một, chúng ta xem xét thành phần của séc:

Như bạn có thể thấy, một séc nhỏ như vậy được viết cho mỗi trường của chúng ta. Tôi đã đánh dấu kiểm tra cho một trường trong ảnh chụp màn hình bằng một hình vuông màu đỏ, đối với các trường khác, nó có cấu trúc tương tự và nếu bạn cần thêm hoặc xóa trường, bạn có thể dễ dàng thực hiện việc đó.