Làm cách nào để tạo hộp bật lên trong PHP?

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ệ

Có 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

Làm cách nào để tạo hộp nhắc trong PHP?

Làm cách nào để tạo thông tin đăng nhập bật lên trong PHP?

Làm cách nào để tạo biểu mẫu liên hệ bật lên bằng jquery và PHP?