Hộp cảnh báo được sử dụng để hiển thị thông báo cảnh báo cho người dùng. Như bạn đã biết rằng PHP không có tính năng bật lên hộp thông báo cảnh báo nhưng bạn có thể sử dụng mã javascript trong mã PHP để hiển thị hộp thông báo cảnh báo. Bằng cách này, bạn có thể hiển thị hộp thông báo cảnh báo của Javascript trong PHP
JavaScript có ba loại hộp bật lên, đó là những loại sau
Trong bài viết này, bạn sẽ tìm hiểu về hộp cảnh báo, hộp xác nhận và hộp nhắc với các ví dụ
1. Hiển thị hộp cảnh báo trong PHP
Hộp cảnh báo không là gì ngoài hộp cửa sổ bật lên trên màn hình của bạn với một số thông báo hoặc thông tin cần sự chú ý của người dùng.
Hộp cảnh báo là hộp thoại JavaScript được trình duyệt hỗ trợ
PHP là ngôn ngữ phía máy chủ và không hỗ trợ thông báo cảnh báo bật lên. Trình duyệt của khách hàng đưa ra cảnh báo
Để bật một thông báo cảnh báo qua PHP, chúng tôi cần kết xuất mã JavaScript bằng PHP và gửi nó tới trình duyệt. JavaScript là ngôn ngữ phía máy khách
cú pháp
alert["Nhập tin nhắn của bạn tại đây"];
Thí dụ. Sử dụng hộp cảnh báo JavaScript
JavaScript Alert Box by PHP
';
echo ' alert["JavaScript Alert Box by PHP"]'; //not showing an alert box.
echo '';
?>
Mã vận hành
đầu ra
Thí dụ. Sử dụng hàm PHP
JavaScript Alert Box by PHP
alert['$msg'];";
}
?>
Mã vận hành
đầu ra
2. Hiển thị hộp xác nhận trong PHP
Hộp xác nhận chủ yếu được sử dụng để nhận sự chấp thuận của người dùng để xác minh hoặc chấp nhận một giá trị
cú pháp
confirm["Nhập tin nhắn của bạn tại đây"];
Thí dụ. Sử dụng hộp bật lên xác nhận Javascript
JavaScript Alert Box by PHP
';
echo ' function openulr[newurl] {';
echo ' if [confirm["Are you sure you want to open new URL"]] {';
echo ' document.location = newurl;';
echo ' }';
echo '}';
echo '';
}
?>
Open new URL
Mã vận hành
đầu ra
JavaScript Alert Box by PHP
Open new URL
3. Hiển thị hộp nhắc trong PHP
Hộp nhắc chủ yếu được sử dụng, khi muốn người dùng nhập liệu, người dùng cần điền dữ liệu vào trường đã cho hiển thị trong hộp bật lên và phải nhấp vào ok hoặc hủy để tiếp tục
Biểu mẫu liên hệ là một yếu tố quan trọng trong trang web của bạn. Nó khuyến khích giao tiếp và hoạt động như một cầu nối giữa bạn và người dùng của bạn. Nó cho phép người dùng đăng phản hồi, nhận xét, câu hỏi của họ và hơn thế nữa
Nó giúp bạn có được những ý tưởng và quan điểm dẫn dắt doanh nghiệp của bạn phát triển. Đó là một trong những khía cạnh quan trọng sẽ quyết định sự thành công của bạn
Có rất nhiều plugin biểu mẫu liên hệ bật lên có sẵn trực tuyến. Các plugin này giúp thêm biểu mẫu liên hệ trong ứng dụng của bạn với triển vọng hiện đại. Bạn nên chọn chúng cẩn thận
Xem bản trình diễn
Phát triển một biểu mẫu liên hệ PHP là một công việc đơn giản. Chúng ta đã thấy rất nhiều ví dụ để tạo biểu mẫu liên hệ trong PHP. Ví dụ về biểu mẫu liên hệ đơn giản có khung mã cơ bản. Nó có các trường tối thiểu và một tập lệnh gửi thư đơn giản
Nói chung, biểu mẫu liên hệ có tên, email, tin nhắn và nhiều trường khác. Các trường có thể khác nhau tùy theo tính chất của ứng dụng hoặc mục đích của ứng dụng
Trong một số ứng dụng, có thể có biểu mẫu liên hệ dài với danh sách phức tạp các trường điện thoại, fax, v.v. Tuy nhiên, các hình thức bóng bẩy với đầu vào tối thiểu khuyến khích người dùng tương tác
Nếu bạn muốn biết thêm thông tin, hãy thực hiện thông qua các trường tùy chỉnh tùy chọn. Biểu mẫu liên hệ với các trường tùy chỉnh sẽ giúp người dùng không phản đối việc cung cấp thêm dữ liệu
Trong bài viết này, chúng tôi sẽ hướng dẫn cách viết mã để hiển thị biểu mẫu liên hệ PHP dưới dạng hộp thoại bật lên. Tôi đã sử dụng lõi jQuery để hiển thị hộp thoại bật lên với biểu mẫu liên hệ HTML
Bên trong là gì?
Có nhiều cách khác nhau để cho phép người dùng liên hệ với bạn qua giao diện ứng dụng của bạn. Biểu mẫu liên hệ là một trong những thành phần phổ biến của ứng dụng. Nó cho phép người dùng liên hệ với chủ sở hữu trang web hoặc quản trị viên
Nói chung, các biểu mẫu liên hệ giúp người dùng gửi suy nghĩ, nghi ngờ của họ. Một số mục đích chính của giao diện biểu mẫu liên hệ này ở đây như được liệt kê bên dưới
- Để thu thập thông tin phản hồi, nhận xét từ người dùng hoặc khách hàng
- Để có được những lợi thế của sự tương tác của người dùng với ứng dụng của bạn
- Để nhận yêu cầu hỗ trợ của người dùng
- Để cho phép người dùng gửi yêu cầu về các dịch vụ trả phí hoặc tùy chỉnh
- Để nhận dữ liệu sinh học, bằng chứng và nhiều tài liệu tham khảo khác dưới dạng tệp đính kèm
Trong khi tạo biểu mẫu liên hệ trong ứng dụng của bạn, bạn phải nhớ những điều sau. Những điểm này sẽ giúp tạo liên hệ an toàn cho giao diện cho ứng dụng của bạn
QUAN TRỌNG - Đọc này
- Bảo vệ nền tảng của bạn khỏi bot. Đúng. Internet đầy các bot tự động muốn phát tán thư rác
- Ngăn chặn các lần truy cập thường xuyên bất thường có thể gây căng thẳng cho máy chủ của bạn
- Đảm bảo vệ sinh dữ liệu trước khi xử lý dữ liệu người dùng
- Kiểm tra nguồn gốc yêu cầu để ngăn phần mềm tự động đăng dữ liệu biểu mẫu
- Xác thực ở cả phía máy khách và máy chủ
- Không có thiết kế là thiết kế. Đừng đẩy giao diện người dùng vào người dùng, hãy tập trung vào giao tiếp tốt và dễ sử dụng
Vì internet là một thế giới mở, nó cho phép người dùng ẩn danh. Vì vậy, có khả năng truy cập độc hại. Vì vậy, loại biện pháp an toàn này sẽ làm giảm rủi ro
Nó không chỉ áp dụng cho biểu mẫu liên hệ mà còn cho tất cả các giao diện lấy dữ liệu từ người dùng cuối
Biểu mẫu liên hệ bật lên để thu thập tên, email, chủ đề và tin nhắn từ người dùng. Trong khi chạy ví dụ này, trang đích sẽ không hiển thị cửa sổ bật lên khi tải trang. Thay vào đó, nó hiển thị biểu tượng liên hệ có thể nhấp được
Bằng cách nhấp vào biểu tượng này, một biểu mẫu liên hệ sẽ bật lên với tên, email và nhiều trường khác. Để hiển thị giao diện popup, tôi đã sử dụng các hàm thư viện jQuery. Nó sẽ thêm một lớp phủ trên đầu trang web trong khi hiển thị cửa sổ bật lên
Trong ví dụ này, tất cả các chi tiết liên hệ là bắt buộc. Tôi đã thêm một tập lệnh xác thực tối thiểu trong JavaScript để xác thực dữ liệu biểu mẫu. Tập lệnh này là để kiểm tra tính khả dụng của dữ liệu liên hệ trước khi đăng nó lên phía máy chủ
Khi người dùng gửi biểu mẫu, mã PHP sẽ nhận được dữ liệu biểu mẫu đã đăng. Sau đó, nó xử lý chức năng thư với thông tin liên hệ này
Trong ví dụ này, tôi đã sử dụng chức năng thư PHP để gửi email liên hệ. Nếu bạn muốn gửi email bằng SMTP, bài viết được liên kết có mã để thực hiện nó
Ưu điểm và nhược điểm của hộp thoại biểu mẫu liên hệ bật lên
Có cả ưu điểm và nhược điểm của việc hiển thị hộp thoại biểu mẫu liên hệ bật lên
Ưu điểm là cho phép người dùng ở lại trang hiện tại của mình với bất kỳ điều hướng hoặc làm mới trang nào. Giao diện hộp thoại bật lên sẽ mang đến một triển vọng hiện đại cho ứng dụng của bạn
Một số người dùng web ghét cửa sổ bật lên. Đây là nhược điểm chính. Ngoài ra, cần một chút nỗ lực để làm cho giao diện bật lên thân thiện với thiết bị di động
Cấu trúc tệp
Ảnh chụp màn hình bên dưới hiển thị cấu trúc tệp của ví dụ biểu mẫu liên hệ PHP này. Nó hiển thị các tệp và thư viện tùy chỉnh được sử dụng trong mã này
Nó có một lượng mã động rất nhỏ để gửi email liên hệ. Ngoài ra, nó có nhiều mã HTML, CSS, JavaScript hơn
chỉ mục. php là trang đích chứa HTML để hiển thị biểu tượng liên hệ có thể nhấp. Nó cũng có một bộ chứa biểu mẫu liên hệ ẩn và tập lệnh jQuery để bật biểu mẫu
Thư mục nhà cung cấp chứa nguồn thư viện jQuery
Phần này là để tìm hiểu cách tạo HTML để hiển thị giao diện biểu mẫu liên hệ trong một cửa sổ bật lên jQuery
Nó có mã để hiển thị biểu tượng liên hệ bật lên biểu mẫu liên hệ trong sự kiện nhấp chuột của nó. Sự kiện nhấp chuột ở bên ngoài bố cục biểu mẫu liên hệ sẽ đóng hộp thoại bật lên
Tôi đã thêm tập lệnh CSS và jQuery để phản ánh các thay đổi giao diện người dùng phù hợp dựa trên sự kiện hành động nhấp chuột của người dùng. Nó giúp chuyển đổi hộp thoại bật lên biểu mẫu liên hệ và xác nhận người dùng tương ứng
How to display PHP contact form popup using jQuery
Contact Us
Name:
Email:
Subject:
Message:
Mã bên dưới hiển thị các kiểu được tạo cho UI biểu mẫu liên hệ PHP này. Tôi đã sử dụng rất ít CSS cho ví dụ này để làm cho nó trở nên chung chung cho bất kỳ chủ đề nào. Bạn có thể ghi đè kiểu bên dưới để tùy chỉnh thiết kế biểu mẫu cho chủ đề trang web của mình
body {
color: #232323;
font-size: 0.95em;
font-family: arial;
}
div#success {
text-align: center;
box-shadow: 1px 1px 5px #455644;
background: #bae8ba;
padding: 10px;
border-radius: 3px;
margin: 0 auto;
width: 350px;
}
.inputBox {
width: 100%;
margin: 5px 0px 15px 0px;
border: #dedede 1px solid;
box-sizing: border-box;
padding: 15px;
}
#contact-popup {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: rgba[0, 0, 0, 0.5];
display: none;
color: #676767;
}
.contact-form {
width: 350px;
margin: 0px;
background-color: white;
font-family: Arial;
position: relative;
left: 50%;
top: 50%;
margin-left: -210px;
margin-top: -255px;
box-shadow: 1px 1px 5px #444444;
padding: 20px 40px 40px 40px;
}
#contact-icon {
padding: 10px 5px 5px 12px;
width: 58px;
color: white;
box-shadow: 1px 1px 5px grey;
border-radius: 3px;
cursor: pointer;
margin: 60px auto;
}
.info {
color: #d30a0a;
letter-spacing: 2px;
padding-left: 5px;
}
#send {
background-color: #09F;
border: 1px solid #1398f1;
font-family: Arial;
color: white;
width: 100%;
padding: 10px;
cursor: pointer;
}
#contact-popup h1 {
font-weight: normal;
text-align: center;
margin: 10px 0px 20px 0px;
}
.input-error {
border: #e66262 1px solid;
}
jQuery Script để hiển thị cửa sổ bật lên biểu mẫu Liên hệ và xác thực các trường biểu mẫu
Tập lệnh bên dưới hiển thị chức năng gọi lại jQuery được thêm cho sự kiện sẵn sàng cho tài liệu
Nó có hai chức năng xử lý sự kiện. Một là hiển thị hộp thoại bật lên biểu mẫu liên hệ trong sự kiện nhấp chuột của biểu tượng liên hệ
Cách khác là xử lý biểu mẫu gửi để xác thực dữ liệu liên hệ do người dùng nhập
Tập lệnh xác thực tập trung vào các thiết bị lọc tối giản. Nó giúp ngăn người dùng gửi biểu mẫu có dữ liệu trống hoặc định dạng dữ liệu [email] không hợp lệ
________số 8Có nhiều cách gửi email trong PHP. Trong ví dụ này, tôi đã sử dụng chức năng thư có sẵn để gửi email liên hệ
Trước khi gửi thư, chúng ta phải đặt tiêu đề, người nhận và các thông số khác
Tập lệnh PHP bên dưới lấy dữ liệu biểu mẫu liên hệ đã đăng bằng cách sử dụng mảng yêu cầu $_POST. Trong PHP nó đặt dữ liệu From với tiêu đề mail dùng tên, email đăng qua form
Trong mã này, chúng ta có thể thấy bộ lọc PHP_var[] được áp dụng để làm sạch dữ liệu biểu mẫu trước khi xử lý
Sau khi email được gửi đi, hàm PHP mail[] sẽ trả về giá trị boolean true. Nếu vậy, nó hiển thị một thông báo thành công cho người dùng
\r\n";
if [mail[$toEmail, $subject, $message, $mailHeaders]] {
?>
Your contact information is received successfully!
Trong bài viết trước chúng ta đã xem một ví dụ gửi email bằng Gmail SMTP sử dụng thư viện PHPMailer
Cửa sổ bật lên biểu mẫu liên hệ PHP với Đầu ra jQuery
Hình này hiển thị ảnh chụp màn hình của hộp thoại bật lên biểu mẫu liên hệ. Bạn có thể thấy biểu tượng có thể nhấp ở phía sau lớp phủ
Tôi đã chụp ảnh màn hình này bằng cách gửi biểu mẫu có thông báo trống và định dạng email không hợp lệ. Trong ảnh chụp màn hình sau, bạn có thể thấy thông báo lỗi tương ứng trong hộp thoại bật lên. Đây là cách biểu mẫu này cảnh báo người dùng về dữ liệu không phù hợp do họ nhập
Sau khi gửi email liên hệ, thông báo này giúp xác nhận người dùng. Xác nhận này sẽ tắt cửa sổ bật lên biểu mẫu liên hệ
Sự kết luận
Biểu mẫu liên hệ trong ứng dụng của bạn sẽ giúp thu thập thông tin từ người dùng. Nó sẽ cung cấp cho bạn thông tin phản hồi, ý tưởng có giá trị từ người dùng cuối để phát triển doanh nghiệp của bạn
Chúng tôi đã thấy những ưu điểm và nhược điểm của việc có giao diện biểu mẫu liên hệ bật lên trong một ứng dụng. Ngoài ra, chúng ta đã thấy nhiều thông tin về mục đích, nhu cầu cơ bản để tích hợp form liên hệ trong ứng dụng
Mã ví dụ chúng tôi đã tạo cho bài viết này sẽ giúp bạn giảm bớt nỗ lực tạo biểu mẫu liên hệ cho ứng dụng của mình. Đó là một giải pháp cơ bản cho người muốn triển khai một phương tiện để tương tác với người dùng trang web