Tạo form liên hệ có đính kèm file sử dụng php và ajax

    Rating: ★★★★☆
    View: 284
    Download: 325

    Trong ví dụ này, trang liên hệ HTML sẽ có các trường đầu vào Tên, Email, Chủ đề, Trường tin nhắn và tải lên tệp với  nhiều tùy chọn hơn. Phần đầu  trang liên hệ có biểu tượng thêm tệp đính kèm  . Bằng cách nhấp vào biểu tượng này, nhiều trường nhập tệp được thêm động vào giao diện người dùng để cho phép người dùng chọn nhiều tệp với biểu mẫu liên hệ. Khi gửi biểu mẫu, tập lệnh gửi thư PHP sẽ được thực thi để gửi dữ liệu biểu mẫu liên hệ với tệp đính kèm được chọn đến địa chỉ email người nhận được chỉ định.

    Mã html với  tùy chọn đính kèm

    <!DOCTYPE html>
    <html>
    
    <head>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"
        type="text/javascript"></script>
    <title>PHP Contact Form with Add More File Attachment Option</title>
    </head>
    
    <body>
        <h1>PHP Contact Form with Add More File Attachment Option</h1>
    
        <div class="attachment-form-container">
            <form name="mailForm" id="mailForm" method="post" action=""
                enctype="multipart/form-data"
                onsubmit="return validate()">
    
                <div class="input-row">
                    <label style="padding-top: 20px;">Name</label> <span
                        id="userName-info" class="info"></span><br /> <input
                        type="text" class="input-field" name="userName"
                        id="userName" />
                </div>
                <div class="input-row">
                    <label>Email</label> <span id="userEmail-info"
                        class="info"></span><br /> <input type="text"
                        class="input-field" name="userEmail" id="userEmail" />
                </div>
                <div class="input-row">
                    <label>Subject</label> <span id="subject-info"
                        class="info"></span><br /> <input type="text"
                        class="input-field" name="subject" id="subject" />
                </div>
                <div class="input-row">
                    <label>Message</label> <span id="userMessage-info"
                        class="info"></span><br />
                    <textarea name="userMessage" id="userMessage"
                        class="input-field" id="userMessage" cols="60"
                        rows="6"></textarea>
                </div>
                <div class="attachment-row">
                    <input type="file" class="input-field"
                        name="attachment[]">
    
                </div>
    
                <div onClick="addMoreAttachment();"
                    class="icon-add-more-attachemnt"
                    title="Add More Attachments">
                    <img src="icon-add-more-attachment.png"
                        alt="Add More Attachments">
                </div>
                <div>
                    <input type="submit" name="send" class="btn-submit"
                        value="Send" />
    
                    <div id="statusMessage">
                        <?php
                            if (! empty($message)) {
                                ?>
                        <p class='<?php echo $type; ?>Message'>
                            <?php echo $message; ?>
                        </p>
                        <?php
                            }
                            ?>
                    </div>
                </div>
            </form>
        </div>
    
    </body>
    </html>

    Mã javascript thực hiện việc kiểm tra thông tin nhập vào

    <script type="text/javascript">
            function validate() {
                var valid = true;
    
                $(".info").html("");
                var userName = document.forms["mailForm"]["userName"].value;
                var userEmail = document.forms["mailForm"]["userEmail"].value;
                var subject = document.forms["mailForm"]["subject"].value;
                var userMessage = document.forms["mailForm"]["userMessage"].value;
                
                if (userName == "") {
                    $("#userName-info").html("(required)");
                    $("#userName").css('background-color', '#FFFFDF');
                    valid = false;
                }
                if (userEmail == "") {
                    $("#userEmail-info").html("(required)");
                    $("#userEmail").css('background-color', '#FFFFDF');
                    valid = false;
                }
                if (!userEmail.match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/))
                {
                    $("#userEmail-info").html("(invalid)");
                    $("#userEmail").css('background-color', '#FFFFDF');
                    valid = false;
                }
    
                if (subject == "") {
                    $("#subject-info").html("(required)");
                    $("#subject").css('background-color', '#FFFFDF');
                    valid = false;
                }
                if (userMessage == "") {
                    $("#userMessage-info").html("(required)");
                    $("#userMessage").css('background-color', '#FFFFDF');
                    valid = false;
                }
                return valid;
            }
            
            function addMoreAttachment() {
                $(".attachment-row:last").clone().insertAfter(".attachment-row:last");
                $(".attachment-row:last").find("input").val("");
            }
    </script>

    Code Xử lý PHP sau khi nhấn nút send

    <?php
    if(!empty($_POST["send"])) {
        require_once ('phpmailer/class.phpmailer.php');
        
        $mail = new PHPMailer();
        $mail->IsSMTP();
        $mail->SMTPDebug = 0;
        $mail->SMTPAuth = TRUE;
        
        $mail->Port = 587;
        
        $mail->Username = "YOUR SMTP USERNAME";
        $mail->Password = "YOUR SMTP PASSWORD";
        
        $mail->Mailer = "smtp";
        
        if (isset($_POST["userEmail"])) {
            $userEmail = $_POST["userEmail"];
        }
        if (isset($_POST["userName"])) {
            $userName = $_POST["userName"];
        }
        if (isset($_POST["subject"])) {
            $subject = $_POST["subject"];
        }
        if (isset($_POST["userMessage"])) {
            $message = $_POST["userMessage"];
        }
        $mail->SetFrom($userEmail, $userName);
        $mail->AddReplyTo($userEmail, $userName);
        $mail->AddAddress("YOUR RECIPIENT EMAIL"); // set recipient email address
        
        $mail->Subject = $subject;
        $mail->WordWrap = 80;
        $mail->MsgHTML($message);
        
        $mail->IsHTML(true);
        
        $mail->SMTPSecure = 'tls';
        $mail->Host = 'smtp.gmail.com';
        
        if (! empty($_FILES['attachment'])) {
            $count = count($_FILES['attachment']['name']);
            if ($count > 0) {
                // Attaching multiple files with the email
                for ($i = 0; $i < $count; $i ++) {
                    if (! empty($_FILES["attachment"]["name"])) {
                        
                        $tempFileName = $_FILES["attachment"]["tmp_name"][$i];
                        $fileName = $_FILES["attachment"]["name"][$i];
                        $mail->AddAttachment($tempFileName, $fileName);
                    }
                }
            }
        }
        if (! $mail->Send()) {
            $message = "Problem in sending email";
            $type = "error";
        } else {
            $message = "Mail sent successfully";
            $type = "success";
        }
    }

     

    loading Đang tải...

    api được ưa chuộng