Tạo một hình thức liên lạc và gửi nó qua email. Kết nối tệp PHP và thiết lập nó. Hiệu ứng phát sáng trong jQuery

• 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ẻ

  . Để thiết lập trường với tin nhắn văn bản 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 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 nên 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 thông số nhất định thiết kế 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 phần tử 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, phải đọc khối lượng lớn văn học 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ẻ mở các hình thức. 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. Vì vậy, php và tập tin 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ỉ của bạn E-mail và chủ đề của bức thư sẽ được hiển thị trên hộp thư đến 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ó một cách đơn giản và thiết lập dễ dàng từ bảng điều khiển và cũng rất phù hợp 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

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 a, 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 để kiểm tra biểu mẫu xem dữ liệu đã nhập có đầy đủ hay không, bảo vệ đứa con tinh thần của chúng tôi khỏi thư rác, để chúng tôi Hộp thưđã không sụp đổ vì 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. Hầu hết thuộc tính quan trọngđây 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ỗ, 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 trường cụ thể mà nó đề cập đến chữ ký này. 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 cho người dùng nhập thông tin, chỉ có điều lần này trường này được thiết kế cho 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 để tiếp tục thiết kế trực quan các hình thức.

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 để 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. Không có giá trị sử dụng bố cục dạng bảng cho các hình thức. Đ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 nên cấu trúc trực quan của tài liệu, chúng ta chỉ cần thẻ div, và được họ đưa ra trong Thuộc tính CSS display: inline-block (sắp xếp các khối liên tiếp) 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 thẻ biểu mẫu.

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

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

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. Cốt lõi của nó là trang thông thường trang web 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:

$trở lại = "

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

Với dòng này chúng ta tạo link để 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.

if (! 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"] chúng ta viết giá trị trong dấu ngoặc kép thuộc tính tênđầu vào của chúng tôi.

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.

Tiếp theo chúng ta dán vào phần bên trong của trình xử lý biểu mẫu:

$name = cắt (strip_tags ($_POST [ "name" ] ) ); $phone = cắt(strip_tags($_POST["phone"])); $mail = cắt(strip_tags($_POST["mail"])); $message = Trim(strip_tags($_POST["message"]));

Bằng cách này, chúng tôi đã xóa đầu vào của người dùng khỏi thẻ html Và khoảng trống thừa. Điều này cho phép chúng ta tự bảo vệ mình khỏi việc nhận được mã độc trong các tin nhắn 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 ."
Email 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ừ thông báo Content-type:text/html;charset=windows-1251 và mã hóa nói chung tập tin PHP phải khớp nhau, nếu không các tin nhắn nhận được qua email sẽ hiển thị “krakozyabry” thay vì các chữ cái tiếng Nga hoặc tiếng Anh.

Nhiều người không chỉ ra rõ ràng mã hóa của tin nhắn được gửi, nhưng trên một số ứng dụng thư khách Vì điều này, các vấn đề có thể phát sinh trong tương lai (những bức thư không đọc được sẽ được gửi qua đường bưu điện), vì vậy tôi khuyên bạn vẫn nên chỉ rõ điều đó.

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 tiếp 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 đó, để 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:

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

Bây giờ chúng ta hãy xem danh sách kiểm tra từng điểm một:

Như bạn có thể thấy, một tấm séc nhỏ như vậy được viết cho từng trường của chúng tôi. Tôi đã đánh dấu kiểm tra một trường trong ảnh chụp màn hình bằng 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 cần thêm hoặc xóa trường đó, giờ đây bạn có thể dễ dàng thực hiện việc này.

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 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 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 thì 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 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ẽ thông báo cho người dùng về hoạt động thành công, hoặc một 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 lại xem các trường của chúng tôi có trống không (để tránh cơ hội khác spam), chúng tôi sẽ gửi tin nhắn qua email và thông báo cho người dùng về kết quả. Kết quả này được truyền dưới dạng phản hồi tới 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à nhiều nhất ví dụ cơ bản công việc 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 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 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.

Bây giờ thật khó để tưởng tượng một trang web không có biểu mẫu phản hồi.

Vì vậy, nếu tài nguyên của bạn không có phần liên hệ thì bạn nên cài đặt nó. Hãy tìm ra cách để làm điều này.

Giải pháp tổ chức phản hồi

Đương nhiên, hiện nay có một số cách để sắp xếp phản hồi trên trang web: từ các tập lệnh phổ biến trong PHP đến plugin và mô-đun cho CMS. Nghĩa là, như bạn có thể thấy, không cần phải viết mã theo cách thủ công.

Bạn có thể sử dụng các giải pháp phổ quát sau:

• sử dụng dịch vụ dịch vụ trực tuyến miễn phí, tự động tạo mã biểu mẫu HTML thông tin liên lạc. Nhưng đồng thời tập tin xử lý php bạn sẽ cần phải viết và tự mình dàn dựng nó. Đây là một trong những tài nguyên cho những mục đích này
• Tìm kiếm trợ giúp từ các dịch vụ trực tuyến miễn phí tạo mã HTML và cung cấp bộ xử lý dữ liệu bằng PHP, thường được lưu trữ trên máy chủ của các dịch vụ này. Một ví dụ về các tài nguyên đó
• Tìm các tập lệnh miễn phí trên Internet để thiết lập biểu mẫu phản hồi. Tùy chọn này có thể áp dụng cho những người biết HTML và PHP ở một mức độ nhất định, vì trong mọi trường hợp, tập lệnh sẽ phải được điều chỉnh cụ thể cho trang web của họ.

Tuy nhiên, người dùng thường không cần kiến ​​​​thức sâu rộng về phát triển trang web - tính linh hoạt và nhiều lựa chọn giải pháp cho phép bạn thiết lập hình thức phản hồi mong muốn bằng bất kỳ phương pháp nào ở trên.

Dễ dàng cài đặt các biểu mẫu phản hồi trong HTML

Hãy xem xét một trong chương trình phổ biếnđể viết và cài đặt các biểu mẫu phản hồi HTML có hình ảnh xác thực. Ví dụ, nhiều lựa chọn trong số chúng được trình bày trên trang web này. Trang web này bằng tiếng Nga, bạn sẽ dễ dàng lựa chọn và quá trình cài đặt sẽ không quá ba phút.

Nhưng trước tiên bạn nên nhớ sửa đổi tập tin chuẩn config.php - bạn cần thay đổi mã hóa và viết đúng địa chỉ email người nhận.

Thư mục chứa các tệp đã sửa phải được sao chép vào thư mục gốc của trang web, nhưng trước đó, hãy hạn chế lập chỉ mục của nó trong tệp Robots.txt ( Không cho phép: /sendmail-zakaz).

Trên thực tế, chỉ có vậy - nếu các hành động được thực hiện chính xác, mẫu đã hoàn thành sẽ trông như thế này:

Có những trình tạo biểu mẫu phản hồi không yêu cầu hỗ trợ PHP. Hãy xem xét một trong số họ. Sau khi nhấp vào liên kết, bạn sẽ thấy một cửa sổ nơi bạn có thể tạo biểu mẫu mong muốn bằng cách thực hiện cài đặt.

Sau tất cả mọi thứ thông số bắt buộcđã nhập, bạn nên nhập hình ảnh xác thực xác minh và nhấp vào nút "Tạo", sau đó "Nhận mã".

Mã kết quả chỉ cần được sao chép vào trang đã chọn của trang web.

Bạn có thể tự tạo một mẫu liên hệ đơn giản. Để thực hiện việc này, bạn cần tạo một tệp form.php và lưu đoạn mã sau vào đó:

Để biểu mẫu hoạt động, cần có tệp xử lý. Hãy gọi nó là mail.php và lưu nó vào đoạn mã sau:

Mẫu phản hồi trong Joomla

Cái này khá hệ thống phổ quát kiểm soát, biểu mẫu phản hồi có thể được cấu hình bằng cách sử dụng thành phần “Danh bạ”. Nó khá đơn giản, tuy nhiên chức năng của nó khá đủ cho hoạt động binh thương các hình thức.

Vì vậy, để định cấu hình thành phần, hãy đi tới bảng điều hành và chọn tab “Thành phần/Danh bạ/Danh mục liên hệ”.

Một trang sẽ mở ra sẽ không có bất kỳ danh mục nào. Để tạo nó, hãy nhấp vào nút “Mới”.

Hệ thống sẽ nhắc bạn điền vào ô “Tiêu đề” và “Biệt hiệu”. Sau khi thực hiện việc này, bạn cần đánh dấu vào ô “Có” trong dòng “Đã xuất bản”.

Các cài đặt phải được lưu bằng cách nhấp vào nút cùng tên ở bên phải góc trên cùng cửa sổ. Có một danh mục, tất cả những gì còn lại là tạo một trang có biểu mẫu liên hệ. Để thực hiện việc này, hãy chuyển đến tab “Danh bạ” và nhấp vào nút “Mới” ở góc trên bên phải.

Điền vào hộp thoại mở ra. Hãy nhớ điền vào dòng “Tên” và dòng “Biệt hiệu”. Chọn hộp “Có” trong dòng “Đã xuất bản” và cho biết danh mục liên hệ này. Di chuyển xuống thấp hơn một chút, chúng ta sẽ tìm thấy cửa sổ “Liên hệ với người dùng”, nơi bạn cần chỉ định người liên hệ sẽ nhận tin nhắn.

Trường “Thông tin” cũng phải được điền, trong đó bạn phải cho biết vị trí của biểu mẫu trên trang web và địa chỉ email của người nhận. Các mục menu còn lại có thể được điền theo ý muốn.

Biểu mẫu phản hồi đã được định cấu hình, tất cả những gì còn lại là đặt nó trên trang web. Đối với những mục đích này, bạn cần đi tới bảng quản trị và bằng cách chọn tab “Menu”, quyết định vị trí mục sẽ được hiển thị.

Trong menu này chúng ta tạo vật phẩm mới. Để thực hiện việc này, hãy nhấp vào nút “Tạo” và chọn “Danh bạ/Trang liên hệ” trong menu mở ra.

Một trang sẽ mở ra nơi bạn cần đặt tên của mục menu, nhập bí danh của nó, bật phản ánh của nó và trong trường tham số chính “Chọn liên hệ”, chỉ định thông tin liên hệ mà mục menu này sẽ được liên kết. Lưu cài đặt.

Truy cập trang web, tìm mục "Danh bạ" và nhấp vào nó. Trang sau sẽ mở ra:

Phản hồi cho WordPress

Trong hệ thống này, bạn có thể tạo biểu mẫu phản hồi bằng cách sử dụng plugin. Phổ biến và có nhiều chức năng nhất là plugin Contact Form 7.

Sau đó, bạn cần chuyển đến tab “Trang/Thêm mới” và bật chế độ HTML, dán mã biểu mẫu phản hồi đã sao chép trước đó

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

Tạo form phản hồi trên website

Trong quá trình quảng bá website, cùng với việc nghiên cứu số liệu thống kê về lượng khách truy cập, thông tin về website từ chính khách truy cập có tầm quan trọng đặc biệt. Một trong những điều nhất những cách đơn giảnđể có được thông tin như vậy là đặt một trang trên trang web với mẫu phản hồi. Khách truy cập để lại tin nhắn và nó sẽ được gửi đến địa chỉ email của bạn hoặc bất kỳ địa chỉ nào khác mà bạn chỉ định. Trong trường hợp này, khách truy cập không cần sử dụng chương trình thư, anh ấy thậm chí không cần phải có e-mail riêng.

Ví dụ đơn giản nhất Biểu mẫu này được hiển thị trong Hình 1. (Đây là một mẫu hoàn toàn có thể sử dụng được và bạn có thể sử dụng nó để gửi cho tôi lời cảm ơn.)

Hình.1. Mẫu phản hồi đơn giản

Để đặt biểu mẫu phản hồi như vậy trên trang web, bạn chỉ cần thông tin cơ bản về HTML và khả năng vận hành hai lệnh - Sao chép Và Chèn. Hãy xem xét chuỗi hành động để tạo biểu mẫu phản hồi (Hình 1) trên trang HTML của trang web.

1. Kiểm tra xem Kế hoạch thuế quan dịch vụ lưu trữ của bạn (văn phòng nơi trang web của bạn được lưu trữ) hỗ trợ PHP. Nếu không, rất có thể bạn sẽ phải trả thêm tiền để chuyển sang gói cước khác hỗ trợ cùng PHP này. Bạn không cần phải tìm ý nghĩa của từ viết tắt này vì bạn không cần kiến ​​thức về PHP.

Như bạn có thể thấy, toàn bộ biểu mẫu được tạo bởi thẻ