Các biểu mẫu được gửi đến trong HTML ở đâu?

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo một biểu mẫu liên hệ HTML và PHP đơn giản để gửi email bằng cách sử dụng mã dễ hiểu

Một trong những trang hữu ích nhất của bất kỳ trang web nào là trang biểu mẫu liên hệ HTML. Không có trang web nào không có biểu mẫu liên hệ

Cuộn xuống một chút để xem biểu mẫu của chúng tôi được tạo bằng HTML cho giao diện người dùng. Xa hơn nữa, bạn sẽ thấy mã PHP để xử lý biểu mẫu ở phía sau - mã này được sử dụng để gửi biểu mẫu và gửi cho bạn qua email

Biểu mẫu hiển thị bên dưới chỉ là phiên bản "cơ bản", tuy nhiên, nếu bạn muốn xem phiên bản đầy đủ hơn, vui lòng tải xuống biểu mẫu liên hệ miễn phí của chúng tôi

Bạn đã có biểu mẫu và cần trợ giúp?

Biểu mẫu được tạo bằng HTML

Bạn muốn tìm hiểu các nguyên tắc cơ bản của biểu mẫu liên hệ và lịch sử ngắn của biểu mẫu HTML?

Bạn có thể sao chép và dán trực tiếp vào trang HTML của mình hoặc sử dụng nó làm cơ sở cho trang liên hệ với chúng tôi của bạn

    
    
    contact form








    

    
Contact us

    
        
        

            Your name
            

                
            
        


        

            Your email address
            

                
            

        


        

            Your message
            

                
            
        


        

            Send Message
        

        

        Simple HTML email form provided by MajesticForm
        


    
    

Các kiểu CSS để sử dụng với biểu mẫu HTML ở trên

#fcf-form {
    display:block;
}

.fcf-body {
    margin: 0;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
    padding: 30px;
    padding-bottom: 10px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    max-width: 100%;
}

.fcf-form-group {
    margin-bottom: 1rem;
}

.fcf-input-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

.fcf-form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    outline: none;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.fcf-form-control:focus {
    border: 1px solid #313131;
}

select.fcf-form-control[size], select.fcf-form-control[multiple] {
    height: auto;
}

textarea.fcf-form-control {
    font-family: -apple-system, Arial, sans-serif;
    height: auto;
}

label.fcf-label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.fcf-credit {
    padding-top: 10px;
    font-size: 0.9rem;
    color: #545b62;
}

.fcf-credit a {
    color: #545b62;
    text-decoration: underline;
}

.fcf-credit a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.fcf-btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .fcf-btn {
        transition: none;
    }
}

.fcf-btn:hover {
    color: #212529;
    text-decoration: none;
}

.fcf-btn:focus, .fcf-btn.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.fcf-btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.fcf-btn-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}

.fcf-btn-primary:focus, .fcf-btn-primary.focus {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.fcf-btn-lg, .fcf-btn-group-lg>.fcf-btn {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
}

.fcf-btn-block {
    display: block;
    width: 100%;
}

.fcf-btn-block+.fcf-btn-block {
    margin-top: 0.5rem;
}

input[type="submit"].fcf-btn-block, input[type="reset"].fcf-btn-block, input[type="button"].fcf-btn-block {
    width: 100%;
}

Mã PHP chụp và gửi email mẫu trang web của bạn

Mã PHP bên dưới rất cơ bản - nó sẽ nắm bắt các trường biểu mẫu được chỉ định trong biểu mẫu HTML ở trên (Tên, Email và Tin nhắn). Các trường sau đó được gửi đến địa chỉ email của bạn ở dạng văn bản thuần túy

Ghi chú. Bạn cần chỉnh sửa 2 phần của đoạn script bên dưới. Bạn cần đặt địa chỉ email của mình (địa chỉ này sẽ không có sẵn cho bất kỳ ai xem, nó chỉ được máy chủ sử dụng để gửi email của bạn). Bạn cũng có thể chỉ định dòng chủ đề email (hoặc chỉ để lại dòng tiêu đề ở đó)

";
        echo $error . "

";
        echo "Please go back and fix these errors.

";
        die();
    }

    // validation expected data exists
    if (
        !isset($_POST['Name']) ||
        !isset($_POST['Email']) ||
        !isset($_POST['Message'])
    ) {
        problem('We are sorry, but there appears to be a problem with the form you submitted.');
    }

    $name = $_POST['Name']; // required
    $email = $_POST['Email']; // required
    $message = $_POST['Message']; // required

    $error_message = "";
    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

    if (!preg_match($email_exp, $email)) {
        $error_message .= 'The Email address you entered does not appear to be valid.
';
    }

    $string_exp = "/^[A-Za-z .'-]+$/";

    if (!preg_match($string_exp, $name)) {
        $error_message .= 'The Name you entered does not appear to be valid.
';
    }

    if (strlen($message) < 2) {
        $error_message .= 'The Message you entered do not appear to be valid.
';
    }

    if (strlen($error_message) > 0) {
        problem($error_message);
    }

    $email_message = "Form details below.\n\n";

    function clean_string($string)
    {
        $bad = array("content-type", "bcc:", "to:", "cc:", "href");
        return str_replace($bad, "", $string);
    }

    $email_message .= "Name: " . clean_string($name) . "\n";
    $email_message .= "Email: " . clean_string($email) . "\n";
    $email_message .= "Message: " . clean_string($message) . "\n";

    // create email headers
    $headers = 'From: ' . $email . "\r\n" .
        'Reply-To: ' . $email . "\r\n" .
        'X-Mailer: PHP/' . phpversion();
    @mail($email_to, $email_subject, $email_message, $headers);
?>

    

    Thank you for contacting us. We will be in touch with you very soon.

Lưu các tập tin trên. Khi bạn chỉnh sửa biểu mẫu để phù hợp với thiết kế của mình, bạn đã sẵn sàng dùng thử

Biểu mẫu HTML sẽ trông như thế nào

Phiên bản dưới đây chứa nhiều tính năng nâng cao hơn

Tải xuống Mẫu liên hệ Pro

Ví dụ về trường biểu mẫu HTML

Để thêm các trường mới vào biểu mẫu của bạn, chỉ cần sao chép và dán loại trường bạn cần từ các ví dụ bên dưới.
Chúng tôi đã bao gồm bảng phân tích các thẻ Biểu mẫu HTML khác nhau.

Tìm hiểu thêm về các trường biểu mẫu HTML5 trên hướng dẫn cụ thể mới của chúng tôi

Thẻ biểu mẫu HTML

Các biểu mẫu trang web HTML phải được đặt bên trong các thẻ MẪU. Có nhiều tùy chọn tham số khác nhau, những tùy chọn phổ biến nhất là.
hành động - điều này cho phép bạn cho biết biểu mẫu sẽ đi đâu sau khi được gửi (thường là tên tệp của tập lệnh sẽ đọc và xử lý dữ liệu biểu mẫu đã được gửi).
name - bạn nên đặt tên cho biểu mẫu của mình, tên này được sử dụng để nhận dạng duy nhất biểu mẫu của bạn trên một trang nhất định.
phương thức - giá trị của phương thức này phải là POST hoặc GET. Các biểu mẫu thường được đặt để sử dụng POST (vì GET sẽ đính kèm dữ liệu biểu mẫu vào URL của trang, điều này hầu như luôn là một ý tưởng tồi vì lý do bảo mật). Có một số phương pháp khác có sẵn, nhưng chúng tôi sẽ không thảo luận về chúng ở đây.

 
  Example form field: 
 

Trường văn bản HTML - Một dòng

Đây chắc chắn là lĩnh vực phổ biến nhất mà bạn sẽ tìm thấy

 
  Enter your name: 
 

Vùng văn bản HTML (trường văn bản nhiều dòng )

Trường văn bản nhiều dòng (thường được gọi là trường vùng văn bản) phù hợp hơn để lấy khối văn bản lớn hơn từ khách truy cập của bạn. Điều này là lý tưởng cho các tin nhắn

Biểu mẫu HTML được gửi như thế nào?

Điều gì xảy ra khi biểu mẫu được gửi trong HTML?

Thuộc tính nào chỉ định nơi gửi biểu mẫu trong HTML?