Một biểu mẫu liên hệ HTML & PHP Bootstrap làm việc – cách tạo một biểu mẫu liên hệ hoạt động trong html

Tôi sẽ chỉ cho bạn cách viết mã biểu mẫu liên hệ bằng HTML, tạo kiểu cho nó một chút, thêm xác thực thời gian thực và gửi email bằng PHP.

Bạn đang xem : cách tạo biểu mẫu liên hệ hoạt động trong html

Đã xuất bản: 22.6. Năm 2020 | Cập nhật lần cuối: 17.1.2022

Hôm nay, tôi muốn hướng dẫn bạn cách dễ dàng tạo biểu mẫu liên hệ HTML hoạt động bằng cách sử dụng Bootstrap 4 framework và AJAX với PHP . Bạn sẽ cần một số kiến ​​thức cơ bản về HTML, CSS và Bootstrap CSS framework .

Trong hướng dẫn này, tôi sẽ hướng dẫn bạn qua các phần sẽ chỉ cho bạn cách viết mã biểu mẫu liên hệ trong HTML , tạo kiểu cho nó một chút và thêm xác thực thời gian thực vào các trường bắt buộc.

Sau đó, tôi sẽ chỉ cho bạn cách dữ liệu được xử lý và email được gửi trong tập lệnh PHP .

Điều cuối cùng, bạn sẽ biết được chút ma lực của JavaScript (chúng tôi sẽ sử dụng jQuery) là cần thiết để gửi biểu mẫu qua AJAX mà không cần tải lại trang . Điều này sẽ thực sự hữu ích khi bạn có biểu mẫu liên hệ trên web một trang và bạn không muốn tải lại toàn bộ trang.

Kết quả của hướng dẫn này sẽ là biểu mẫu liên hệ đáp ứng hoạt động với xác thực trường và một số kiểu CSS cơ bản.

Bản trình diễn Tải xuống tệp

Nhiều mẫu Bootstrap miễn phí của tôi đi kèm với biểu mẫu liên hệ, vì vậy bạn có thể sử dụng giải pháp này để làm cho chúng hoạt động.

Lưu ý: Tôi đã cập nhật hướng dẫn này lên Bootstrap 4 nhưng đừng lo lắng nếu bạn vẫn đang sử dụng Bootstrap 3 trong dự án của mình. Phiên bản Bootstrap 3 cũng là một phần của quá trình tải xuống.

Mẫu HTML

Hãy bắt đầu với bố cục HTML chính của trang biểu mẫu liên hệ của chúng tôi.

Không nên có bất kỳ điều gì phức tạp đối với bạn , vì vậy bạn chỉ cần nói vài lời về nó:

  • Trong head , chúng tôi bao gồm biểu định kiểu Bootstrap, phông chữ Lato từ Google và biểu định kiểu custom.css cục bộ.
  • trước thẻ đóng & lt; body & gt; , chúng tôi bao gồm jQuery, tập lệnh Bootstrap, trình xác thực Bootstrap và tệp contact.js cục bộ sẽ xử lý việc gửi AJAX biểu mẫu
  • đối với Bootstrap, jQuery và Font Awesome, tôi đã sử dụng phiên bản CDN của chúng. Nếu bạn kiểm tra các tập lệnh mà không có kết nối Internet, đừng quên bao gồm phiên bản cục bộ của chúng.
 & lt; html & gt;
    & lt; đầu & gt;
        & lt; title & gt; Hướng dẫn Biểu mẫu Liên hệ của Bootstrapious.com & lt; / title & gt;
        & lt; meta charset = "UTF-8" & gt;
        & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
        & lt; link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" "liêm sỉ ;
        & lt; link href = 'https: //fonts.googleapis.com/css? family = Lato: 300,400,700' rel = 'stylesheet' type = 'text / css' & gt;
        & lt; link href = 'custom.css' rel = 'stylesheet' type = 'text / css' & gt;
    & lt; / head & gt;
    & lt; body & gt;

        & lt; div class = "container" & gt;

            & lt; div class = "row" & gt;

                & lt; div class = "col-xl-8 offset-xl-2 py-5" & gt;

                    & lt; h1 & gt; Biểu mẫu liên hệ Hướng dẫn từ & lt; a href = "http://bootstrapious.com" & gt; Bootstrapious.com & lt; / a & gt; & lt; / h1 & gt;

                    & lt; p class = "lead" & gt; Đây là bản demo cho hướng dẫn của chúng tôi dành riêng cho việc tạo biểu mẫu liên hệ Bootstrap hoạt động với nền PHP và AJAX. & lt; / p & gt;

                    & lt;! - Chúng ta sẽ đặt biểu mẫu ở đây trong bước tiếp theo - & gt;
                    & lt; biểu mẫu & gt; & lt; / biểu mẫu & gt;

                & lt; / div & gt;

            & lt; / div & gt;

        & lt; / div & gt;

        & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" Integrity = "sha256-FgpCb / KJQlLNfOu91ta32o / NMZxltwRo8QtmkMRdAu8 =" crossorigin = "hidden" ; & lt; / script & gt;
        & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" "liêm sỉ = "ẩn danh" & gt; & lt; / script & gt;
        & lt; script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" "liêm sỉ / script & gt;
        & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js" "liêm sỉ "& gt; & lt; / script & gt;
        & lt; script src = "contact.js" & gt; & lt; / script & gt;
    & lt; / body & gt;
& lt; / html & gt;  

Mã HTML của biểu mẫu Liên hệ

Vì đã sẵn sàng bố cục chính, chúng tôi có thể thay thế & lt; form & gt; & lt; / form & gt; trong mã HTML của mình bằng chính Biểu mẫu liên hệ Bootstrap ưa thích của chúng tôi.

Cuối cùng, biểu mẫu của chúng tôi sẽ trông như thế này:

 & lt; form id = "contact-form" method = "post" action = "contact.php" role = "form" & gt;

    & lt; div class = "tin nhắn" & gt; & lt; / div & gt;

    & lt; div class = "control" & gt;

        & lt; div class = "row" & gt;
            & lt; div class = "col-md-6" & gt;
                & lt; div class = "form-group" & gt;
                    & lt; label for = "form_name" & gt; Firstname * & lt; / label & gt;
                    & lt; input id = "form_name" type = "text" name = "name" class = "form-control" placeholder = "Vui lòng nhập tên đầu tiên của bạn *" Required = "required" data-error = "Tên đầu tiên là bắt buộc." & gt ;
                    & lt; div class = "help-block with-error" & gt; & lt; / div & gt;
                & lt; / div & gt;
            & lt; / div & gt;
            & lt; div class = "col-md-6" & gt;
                & lt; div class = "form-group" & gt;
                    & lt; label for = "form_lastname" & gt; Họ * & lt; / label & gt;
                    & lt; input id = "form_lastname" type = "text" name = "surname" class = "form-control" placeholder = "Vui lòng nhập họ của bạn *" Required = "required" data-error = "Họ là bắt buộc." & gt ;
                    & lt; div class = "help-block with-error" & gt; & lt; / div & gt;
                & lt; / div & gt;
            & lt; / div & gt;
        & lt; / div & gt;
        & lt; div class = "row" & gt;
            & lt; div class = "col-md-6" & gt;
                & lt; div class = "form-group" & gt;
                    & lt; label for = "form_email" & gt; Email * & lt; / label & gt;
                    & lt; input id = "form_email" type = "email" name = "email" class = "form-control" placeholder = "Vui lòng nhập email của bạn *" Required = "required" data-error = "Email hợp lệ là bắt buộc." & gt;
                    & lt; div class = "help-block with-error" & gt; & lt; / div & gt;
                & lt; / div & gt;
            & lt; / div & gt;
            & lt; div class = "col-md-6" & gt;
                & lt; div class = "form-group" & gt;
                    & lt; label for = "form_need" & gt; Vui lòng nêu rõ nhu cầu của bạn * & lt; / label & gt;
                    & lt; select id = "form_need" name = "need" class = "form-control" required = "required" data-error = "Vui lòng nêu rõ nhu cầu của bạn." & gt;
                        & lt; option value = "" & gt; & lt; / option & gt;
                        & lt; option value = "Yêu cầu báo giá" & gt; Yêu cầu báo giá & lt; / option & gt;
                        & lt; option value = "Yêu cầu trạng thái đơn đặt hàng" & gt; Trạng thái đơn đặt hàng yêu cầu & lt; / option & gt;
                        & lt; option value = "Yêu cầu bản sao hóa đơn" & gt; Yêu cầu bản sao hóa đơn & lt; / option & gt;
                        & lt; option value = "Khác" & gt; Khác & lt; / option & gt;
                    & lt; / select & gt;
                    & lt; div class = "help-block with-error" & gt; & lt; / div & gt;
                & lt; / div & gt;
            & lt; / div & gt;
        & lt; / div & gt;
        & lt; div class = "row" & gt;
            & lt; div class = "col-md-12" & gt;
                & lt; div class = "form-group" & gt;
                    & lt; label for = "form_message" & gt; Tin nhắn * & lt; / label & gt;
                    & lt; textarea id = "form_message" name = "message" class = "form-control" placeholder = "Tin nhắn cho tôi *" row = "4" required = "Required" data-error = "Vui lòng để lại tin nhắn cho chúng tôi. "& gt; & lt; / textarea & gt;
                    & lt; div class = "help-block with-error" & gt; & lt; / div & gt;
                & lt; / div & gt;
            & lt; / div & gt;
            & lt; div class = "col-md-12" & gt;
                & lt; input type = "submit" class = "btn btn-success btn-send" value = "Gửi tin nhắn" & gt;
            & lt; / div & gt;
        & lt; / div & gt;
        & lt; div class = "row" & gt;
            & lt; div class = "col-md-12" & gt;
                & lt; p class = "text-muted" & gt;
                    & lt; mạnh & gt; * & lt; / strong & gt; Các trường này là bắt buộc. Mẫu biểu mẫu liên hệ của
                    & lt; a href = "https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form" target = "_ blank" & gt; Bootstrapious & lt; / a & gt;. & lt; / p & gt;
            & lt; / div & gt;
        & lt; / div & gt;
    & lt; / div & gt;

& lt; / form & gt;  

Chà, cái này đã có vẻ thú vị hơn một chút rồi, vì vậy chúng ta hãy xem tất cả các phần của câu đố bây giờ:

  • Chúng tôi sẽ gửi các giá trị của biểu mẫu liên hệ qua POST tới tập lệnh PHP được gọi là contact.php . Vì có thể có nhiều biểu mẫu hơn trên trang (tìm kiếm, v.v.), chúng tôi đánh dấu biểu mẫu của mình bằng id # contact-form để giải quyết nó một cách chính xác trong JavaScript sau này. Ngoài ra còn có một div trống .messages sẽ giúp chúng tôi hiển thị thông báo thành công hoặc lỗi sau khi gửi biểu mẫu qua AJAX.
  • Tiêu chuẩn Đánh dấu biểu mẫu Bootstrap được sử dụng – hàng, cột, nhóm biểu mẫu. Nhóm biểu mẫu là trình trợ giúp Bootstrap chăm sóc khoảng cách dọc thích hợp trong biểu mẫu. Để tìm hiểu thêm về các cột và hàng trong Bootstrap, hãy xem hướng dẫn này .
  • Đừng quên chỉ định đúng các label cho các trường bằng thuộc tính for của chúng. Điều này phải chứa id của phần tử biểu mẫu mà nó tham chiếu đến.
  • Để xác thực các trường , chúng tôi sẽ sử dụng Trình xác thực Bootstrap . Quy tắc xác thực được chỉ định trên các đầu vào biểu mẫu thông qua các thuộc tính HTML5 tiêu chuẩn. Trong trường hợp của chúng tôi, đây là bắt buộc type = "email" .
  • Chúng tôi sẽ sử dụng thông báo lỗi tùy chỉnh cho từng trường, được chuyển tới tập lệnh trong thuộc tính data-error .
  • Để hiển thị các lỗi có thể xảy ra, có một khối & lt; div class = "help-block with-error" & gt; & lt; / div & gt; được thêm vào mỗi khối form-group < / code>
  • Ngoài ra, lưu ý các đầu vào type = "email" type = "tel" sẽ nâng cao trải nghiệm người dùng , đặc biệt đối với người dùng sử dụng một thiết bị di động.

Điều này về cơ bản sẽ thực hiện đối với phần HTML của biểu mẫu và chúng ta có thể chuyển sang tập lệnh PHP.

Đừng quên tải xuống và bao gồm các tệp JavaScript của trình xác thực Bootstrap nếu bạn đang tự viết mã và không sử dụng phiên bản CDN. Tải xuống chúng từ đây.

Tập lệnh PHP

Tập lệnh PHP sẽ xử lý gửi email nằm trong tệp contact.php .

Trong phần đầu tiên của tập lệnh, chúng tôi định cấu hình các biến cơ bản mà chúng tôi sẽ cần. Đó là:

  • $ from - địa chỉ email sẽ có trong trường Từ của email. Quan trọng: Để tránh bị đánh dấu là spam hoặc thậm chí có thể gửi nó từ máy chủ lưu trữ web của bạn, hãy sử dụng email hiện có trên miền của bạn. Nếu bạn sẽ sử dụng biểu mẫu trên mygreatsite.com, hãy sử dụng 'info@mygreatsite.com' trong biến này. Nếu bạn muốn sử dụng, ví dụ: địa chỉ Gmail của mình, thì nhà cung cấp dịch vụ lưu trữ web của bạn có thể chặn các email này.
  • $ sendTo - địa chỉ email sẽ nhận email cùng với đầu ra của biểu mẫu. Nó có thể là địa chỉ cá nhân của bạn hoặc có thể giống với địa chỉ như trong biến $ from . Đảm bảo rằng email này tồn tại.
  • $ topic - chủ đề của email
  • $ fields - một loạt các tên điều khiển biểu mẫu và các tên tương tự tiếng Anh của chúng. Nếu chúng tôi có thông tin đầu vào là tên & lt; input name = "name" & gt; , chúng tôi có thể gọi nó trong email của mình, ví dụ: Tên khách hàng như sau: 'name' = & gt; 'Tên khách hàng'
  • $ okMessage - văn bản tin nhắn hiển thị trên trang web khi tin nhắn được gửi thành công
  • $ errorMessage - văn bản của thông báo được hiển thị trong trường hợp có lỗi

Chúng tôi sẽ bọc toàn bộ khối mã trong khối try / catch , khối này sẽ bắt tất cả các lỗi có thể xảy ra.

Mã chuẩn bị và gửi email dựa trên các giá trị biểu mẫu hoạt động như sau:

  1. nếu mảng ĐĂNG nơi các giá trị biểu mẫu được lưu trữ không trống, hãy tiếp tục. Ngược lại, nếu (count ($ _ POST) == 0) , hãy đưa ra thông báo lỗi
  2. Sau đó, chúng tôi bắt đầu xây dựng nội dung email trong biến $ emailText .
  3. Chúng tôi lặp lại qua $ _POST (mảng chứa tất cả các giá trị được gửi qua yêu cầu POST).
  4. Nếu chúng tôi phát hiện ra rằng khóa của mục từ mảng $ _POST cũng tồn tại trong mảng $ fields của chúng tôi, chúng tôi đưa nó vào văn bản của tin nhắn trong $ emailText .
  5. Chúng tôi gửi email qua hàm mail () nội bộ của PHP. Chúng tôi thêm một số tiêu đề quan trọng vào email bằng cách sử dụng mảng $ headers (mã hóa, từ tiêu đề, trả lời đến, v.v.).
  6. Cập nhật: Dựa trên nhu cầu của bạn, tôi đã thêm email của người dùng ( $ _POST ['email'] ) làm địa chỉ trả lời trong mảng $ headers . Khi bạn nhấn trả lời trong ứng dụng email của mình ngay bây giờ, email sẽ chuyển đến email của người dùng.
  7. Chúng tôi tạo biến $ responseArray để được gửi dưới dạng phản hồi JSON trở lại index.html của chúng tôi. $ responseArray sẽ được xử lý bởi hàm JavaScript của chúng tôi và được hiển thị dưới dạng hộp cảnh báo Bootstrap.
  8. Nếu yêu cầu đến qua AJAX (bạn kiểm tra điều này trong PHP bằng điều kiện if (! blank ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) & amp; & amp; strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') ), chúng tôi gửi phản hồi JSON. Nếu không, chúng tôi chỉ hiển thị thông báo (trường hợp này hiếm gặp - ví dụ: đối với người dùng bị vô hiệu hóa JavaSript)
 & lt;? php
/ *
 * CẤU HÌNH MỌI THỨ TẠI ĐÂY
 * /

// địa chỉ email sẽ nằm trong trường Từ của email.
$ from = 'Mẫu liên hệ demo & lt; demo@domain.com>';

// địa chỉ email sẽ nhận email với đầu ra của biểu mẫu
$ sendTo = 'Mẫu liên hệ demo & lt; demo@domain.com>';

// chủ đề của email
$ subject = 'Tin nhắn mới từ biểu mẫu liên hệ';

// tên trường và bản dịch của chúng.
// tên biến mảng = & gt; Văn bản xuất hiện trong email
$ fields = array ('name' = & gt; 'Name', 'surname' = & gt; 'Surname', 'phone' = & gt; 'Phone', 'email' = & gt; 'Email', 'message' = & gt ; 'Thông điệp');

// thông báo sẽ được hiển thị khi mọi thứ đều ổn :)
$ okMessage = 'Đã gửi thành công biểu mẫu liên hệ. Cảm ơn bạn, tôi sẽ liên hệ lại với bạn sớm thôi! ';

// Nếu xảy ra sự cố, chúng tôi sẽ hiển thị thông báo này.
$ errorMessage = 'Đã xảy ra lỗi khi gửi biểu mẫu. Vui lòng thử lại sau';

/ *
 * HÃY LÀM VIỆC GỬI
 * /

// nếu bạn không gỡ lỗi và không cần báo cáo lỗi, hãy tắt tính năng này bằng error_reporting (0);
error_reporting (E_ALL & amp; ~ E_NOTICE);

thử
{

    if (count ($ _ POST) == 0) ném new \ Exception ('Mẫu trống');
            
    $ emailText = "Bạn có tin nhắn mới từ biểu mẫu liên hệ \ n ============================= \ n";

    foreach ($ _POST dưới dạng $ key = & gt; $ value) {
        // Nếu trường tồn tại trong mảng $ fields, hãy đưa nó vào email
        if (Isset ($ fields [$ key])) {
            $ emailText. = "$ fields [$ key]: $ value \ n";
        }
    }

    // Tất cả các tiêu đề cần thiết cho email.
    $ headers = array ('Loại-Nội dung: văn bản / trơn; charset = "UTF-8";',
        'Từ: ' . $ từ,
        'Trả lời: ' . $ _POST ['email'],
        'Đường dẫn trở lại:'. $ từ,
    );
    
    // Gửi email
    mail ($ sendTo, $ subject, $ emailText, implode ("\ n", $ headers));

    $ responseArray = array ('type' = & gt; 'success', 'message' = & gt; $ okMessage);
}
bắt (\ Exception $ e)
{
    $ responseArray = array ('type' = & gt; 'risk', 'message' = & gt; $ errorMessage);
}


// nếu được yêu cầu bởi AJAX, hãy trả về phản hồi JSON
if (! blank ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) & amp; & amp; strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $ encoded = json_encode ($ responseArray);

    header ('Content-Type: application / json');

    echo $ được mã hóa;
}
// khác chỉ hiển thị thông báo
khác {
    echo $ responseArray ['message'];
}
 

Yêu cầu kỹ thuật đối với PHP là:

  • PHP & gt; = 5,3
  • thiết lập máy chủ email

Kiểm tra và sử dụng cục bộ: Nếu bạn đang kiểm tra biểu mẫu liên hệ trên máy tính của mình, tập lệnh PHP và toàn bộ quy trình sẽ hoạt động, nhưng bạn sẽ không nhận được email trong hộp thư đến của mình. Để có thể nhận được email, bạn cần tải tập lệnh lên máy chủ lưu trữ web của mình.

Bạn có cần một máy chủ web không? Xem BlueHost ($ 3 / tháng cho khách hàng mới).

< / p>

Một chút JavaScript

Phần JavaScript của hướng dẫn này sẽ xử lý xác thực biểu mẫu gửi biểu mẫu qua AJAX . Chúng tôi sẽ lưu nó vào contact.js .

Đầu tiên, chúng tôi sẽ chạy tập lệnh trình xác thực trên biểu mẫu liên hệ của chúng tôi.

Sau đó, chúng tôi sẽ thêm một số JavaScript sẽ giúp chúng tôi thực hiện yêu cầu gửi biểu mẫu qua AJAX .

Nó hoạt động như thế này:

  1. Khi biểu mẫu có id # contact-form được gửi, chúng tôi thực hiện yêu cầu ĐĂNG tới tập lệnh contact.php . < / li>
  2. Theo yêu cầu thành công, chúng tôi làm việc với đối tượng JSON được trả về bởi tập lệnh PHP . Đối tượng chỉ có hai thuộc tính - kiểu và thông báo
  3. Chúng tôi sử dụng loại và thông báo để xây dựng thông báo hiển thị cho người dùng - trong trường hợp xảy ra lỗi, chúng tôi hiển thị alert-risk ; trong trường hợp thành công, chúng tôi hiển thị alert-success
  4. Chúng tôi hiển thị thông báo , đặt lại đầu vào biểu mẫu và trả về false; để ngăn việc gửi biểu mẫu thông thường
 $ (function () {

    // init trình xác thực
    // các tệp trình xác thực được bao gồm trong gói tải xuống
    // nếu không, hãy tải xuống từ http://1000hz.github.io/bootstrap-validator

    $ ('# contact-form'). validator ();


    // khi biểu mẫu được gửi
    $ ('# contact-form'). on ('submit', function (e) {

        // nếu trình xác thực không ngăn việc gửi biểu mẫu
        if (! e.isDefaultPrevented ()) {
            var url = "contact.php";

            // ĐĂNG các giá trị trong nền URL tập lệnh
            $ .ajax ({
                gõ: "ĐĂNG",
                url: url,
                dữ liệu: $ (this) .serialize (),
                thành công: hàm (dữ liệu)
                {
                    // đối tượng data = JSON mà contact.php trả về

                    // chúng tôi nhận được loại thông báo: thành công x nguy hiểm và áp dụng nó vào
                    var messageAlert = 'alert-' + data.type;
                    var messageText = data.message;

                    // hãy soạn HTML hộp cảnh báo Bootstrap
                    var alertBox = '& lt; div class = "alert' + messageAlert + 'alert-dictable" & gt; & lt; button type = "button" class = "close" data-dict = "alert" aria-hidden = "true" & gt ; & amp; lần; & lt; / nút & gt; ' + messageText + '& lt; / div & gt;';
                    
                    // Nếu chúng ta có messageAlert và messageText
                    if (messageAlert & amp; & amp; messageText) {
                        // đưa cảnh báo vào .messages div trong biểu mẫu của chúng tôi
                        $ ('# contact-form'). find ('. messages'). html (alertBox);
                        // làm trống biểu mẫu
                        $ ('# contact-form') [0] .reset ();
                    }
                }
            });
            trả về sai;
        }
    })
});  

Kết thúc

Vì vậy, đó là tất cả cho ngày hôm nay. Bạn phải có biểu mẫu liên hệ tuyệt vời đang hoạt động sẵn sàng triển khai trên trang web của mình.

Như mọi khi, có thể có các sửa đổi khác được thực hiện, ví dụ: triển khai Captcha - Tôi sẽ cố gắng đưa một số sửa đổi này vào một trong các bản cập nhật tiếp theo của hướng dẫn này. Tôi đã tạo một hướng dẫn về chủ đề này: xem Bootstrap & amp; Hướng dẫn biểu mẫu ReCaptcha . Nếu bạn chưa làm được điều đó, hãy xem cả các chủ đề Bootstrap miễn phí của tôi.

Nếu bạn thích bài viết - mọi chia sẻ đều được đánh giá cao, như mọi khi.

Cảm ơn!

Cập nhật: Các sửa đổi bổ sung cho biểu mẫu liên hệ Bootstrap của chúng tôi

Bài viết này là một trong những bài viết được đọc nhiều nhất trên Bootstrapious và cho đến nay, dựa trên phản hồi của bạn, đã giúp rất nhiều người.

Tôi thường chỉ cập nhật các bài viết của mình với các bản sửa lỗi nhỏ, nhưng tôi quyết định dành sự quan tâm đặc biệt cho bài viết này.

Hôm nay, tôi muốn chỉ cho bạn một số sửa đổi khác có thể đưa các chức năng của biểu mẫu đi xa hơn một chút. Nhiều người trong số họ dựa trên nhận xét hoặc câu hỏi của bạn. Tôi hy vọng bạn sẽ thấy nó hữu ích.

PHPMailer

Trong các bản nâng cấp sau (# 1 và # 2), chúng tôi sẽ thay thế hàm mail () tiêu chuẩn và cơ bản PHP bằng < strong> một thư viện gửi email phức tạp PHPMailer .

Có một gói PHPMailer được bao gồm trong bản tải xuống, nhưng tôi khuyên bạn nên tải xuống bản phát hành thực tế từ GitHub của nó. (Bài viết này sử dụng PHPMailer 5, nếu bạn đang sử dụng PHPMailer 6 mới nhất, có thể cần một số thay đổi mã).

Ngoài việc bao gồm tệp tự động tải PHPMailer, chúng tôi sẽ cần thực hiện một số thay đổi đối với phần cấu hình của tập lệnh PHP.

  & lt;? php
/ *
TẬP TIN NÀY SỬ DỤNG PHPMAILER INSTEAD CỦA CHỨC NĂNG PHP MAIL ()
* /

yêu cầu 'PHPMailer-master / PHPMailerAutoload.php';

/ *
* CẤU HÌNH MỌI THỨ TẠI ĐÂY
* /

// địa chỉ email sẽ nằm trong trường Từ của email.
$ fromEmail = 'demo@domain.com';
$ fromName = 'Mẫu liên hệ demo';

// địa chỉ email sẽ nhận email với đầu ra của biểu mẫu
$ sendToEmail = 'demo@domain.com';
$ sendToName = 'Mẫu liên hệ demo';

// chủ đề của email
$ subject = 'Tin nhắn mới từ biểu mẫu liên hệ';

// tên trường và bản dịch của chúng.
// tên biến mảng = & gt; Văn bản xuất hiện trong email
$ fields = array ('name' = & gt; 'Name', 'surname' = & gt; 'Surname', 'phone' = & gt; 'Phone', 'email' = & gt; 'Email', 'message' = & gt ; 'Thông điệp');

// thông báo sẽ được hiển thị khi mọi thứ đều ổn :)
$ okMessage = 'Đã gửi thành công biểu mẫu liên hệ. Cảm ơn bạn, tôi sẽ liên hệ lại với bạn sớm thôi! ';

// Nếu xảy ra sự cố, chúng tôi sẽ hiển thị thông báo này.
$ errorMessage = 'Đã xảy ra lỗi khi gửi biểu mẫu. Vui lòng thử lại sau ';  

Bạn có thể nhận thấy rằng chúng tôi đã phải thay thế $ từ các biến $ sendTo bằng một cặp giá trị $ fromName $ fromEmail . Lý do là chúng tôi sẽ phải chuyển riêng tên và email cho PHPMailer.

Bây giờ, chúng tôi đã sẵn sàng mọi thứ cho lần chỉnh sửa đầu tiên của biểu mẫu.

Tinh chỉnh # 1 Gửi email HTML

Bạn cũng có thể gửi email HTML bằng hàm mail () , nhưng nó không phải là giải pháp lý tưởng vì bạn không thể dễ dàng tạo một phần văn bản thuần túy của thư . Chúng tôi sẽ sử dụng PHPMailer thay thế .

Đầu tiên, chúng tôi sẽ soạn nội dung email HTML .

Về cơ bản, nó được thực hiện theo cách tương tự như trong phiên bản văn bản thuần túy.

Chúng tôi chỉ thêm một vài thẻ nữa như tiêu đề, đoạn văn có chữ ký và chúng tôi sẽ xuất các biến biểu mẫu thành phần tử & lt; table & gt; .

  $ emailTextHtml = "& lt; h1 & gt; Bạn có một tin nhắn mới từ biểu mẫu liên hệ của mình & lt; / h1 & gt; & lt; hr & gt;";
$ emailTextHtml. = "& lt; bảng & gt;";

foreach ($ _POST dưới dạng $ key = & gt; $ value) {
    // Nếu trường tồn tại trong mảng $ fields, hãy đưa nó vào email
    if (Isset ($ fields [$ key])) {
        $ emailTextHtml. = "& lt; tr & gt; & lt; th & gt; $ fields [$ key] & lt; / th & gt; & lt; td & gt; $ value & lt; / td & gt; & lt; / tr & gt;";
    }
}
$ emailTextHtml. = "& lt; / table & gt; & lt; hr & gt;";
$ emailTextHtml. = "& lt; p & gt; Chúc một ngày tốt lành, & lt; br & gt; Tốt nhất, & lt; br & gt; Ondrej & lt; / p & gt;";  

Sau đó, chúng tôi sẽ tạo một phiên bản của lớp PHPMailer trong một biến $ mail.

Chúng tôi sẽ đặt địa chỉ từ cho email $ mail- & gt; setFrom () và cả người nhận email bằng $ mail- & gt; addAddress () .

Cả hai hàm đều chấp nhận hai tham số. Thông tin đầu tiên là địa chỉ email (tham số bắt buộc) và địa chỉ thứ hai là tên của người gửi / người nhận (tùy chọn).

  $ mail = new PHPMailer;

$ mail- & gt; setFrom ($ fromEmail, $ fromName);
$ mail- & gt; addAddress ($ sendToEmail, $ sendToName); // bạn có thể thêm nhiều địa chỉ hơn bằng cách thêm một dòng khác có $ mail- & gt; addAddress ();
$ mail- & gt; addReplyTo ($ from);  

Sau đó, chúng tôi chỉ cần nói với PHPMailer rằng chúng tôi sẽ gửi một email HTML bằng $ mail- & gt; isHTML (true); . Sau đó, chúng ta chỉ cần chuyển $ emailText mà chúng ta đã tạo trước vào một hàm $ mail- & gt; msgHTML () . Chức năng này cũng sẽ tự động tạo phiên bản văn bản thuần túy của email.

Hoàn hảo, phải không?

  $ mail- & gt; isHTML (true);

$ mail- & gt; Subject = $ subject;
$ mail- & gt; msgHTML ($ emailTextHtml); // điều này cũng sẽ tạo một phiên bản văn bản thuần túy của email HTML, rất tiện dụng  

Bước cuối cùng chúng ta cần làm chỉ là gọi $ mail- & gt; send () . Chúng tôi cũng giám sát đầu ra của nó và khi nó trả về FALSE (! $ Mail- & gt; send () ), chúng tôi sẽ đưa ra một ngoại lệ.

  if (! $ mail- & gt; send ()) {
    ném new \ Exception ('Tôi không thể gửi email.'. $ mail- & gt; ErrorInfo);
}  

Tinh chỉnh này cũng được bao gồm trong gói tải xuống dưới dạng contact-2.php .

Tinh chỉnh # 2 Gửi email qua SMTP

Tôi thường gửi email từ cùng một máy chủ, nhưng có thể có những trường hợp bạn muốn email được gửi từ một máy chủ email khác (tài khoản email của riêng bạn, miền khác hoặc Gmail của bạn).

Trong phần này, tôi sẽ hướng dẫn bạn cách gửi nó một cách dễ dàng.

Chúng tôi sẽ sử dụng lại PHPMailer.

Đầu tiên, chúng tôi sẽ thêm một phần mới vào phần cấu hình của contact.php. Sẽ có 3 biến mới :

  • $ smtpHost (thường là smtp.yourdomain.com; đối với Gmail, đó là smtp.gmail.com)
  • $ smtpUsername (thường là email của bạn)
  • $ smtpPassword (thường là mật khẩu email của bạn).
  // thông tin đăng nhập và máy chủ smtp

$ smtpHost = 'smtp.domain.com';
$ smtpUsername = 'hello@domain.com';
$ smtpPassword = 'MẬT KHẨU';  

Sau đó, chúng tôi chỉ cần khởi tạo gửi SMTP bằng đoạn mã này. Thông thường, điều này hoạt động tốt với phần lớn các nhà cung cấp dịch vụ lưu trữ web.

 $ mail = new PHPMailer;

... - đặt từ, người nhận, tin nhắn ...

$ mail- & gt; isSMTP ();

// Bật gỡ lỗi SMTP
// 0 = off (để sử dụng trong sản xuất)
// 1 = tin nhắn khách hàng
// 2 = thông báo máy khách và máy chủ
$ mail- & gt; SMTPDebug = 0;
$ mail- & gt; Debugoutput = 'html';

// Đặt tên máy chủ của máy chủ thư
// sử dụng
// $ mail- & gt; Host = gethostbyname ('smtp.gmail.com');
// nếu mạng của bạn không hỗ trợ SMTP qua IPv6
$ mail- & gt; Host = gethostbyname ($ smtpHost);

// Đặt số cổng SMTP - 587 cho TLS đã xác thực, còn gọi là gửi SMTP RFC4409
$ mail- & gt; Cổng = 587;

// Đặt hệ thống mã hóa để sử dụng - ssl (không dùng nữa) hoặc tls
$ mail- & gt; SMTPSecure = 'tls';

// Có sử dụng xác thực SMTP hay không
$ mail- & gt; SMTPAuth = true;

// Tên người dùng sử dụng để xác thực SMTP - sử dụng địa chỉ email đầy đủ cho gmail
// Chúng tôi đã định cấu hình biến này trong phần cấu hình
$ mail- & gt; Tên người dùng = $ smtpHost;

// Mật khẩu sử dụng để xác thực SMTP
// Chúng tôi đã định cấu hình biến này trong phần cấu hình
$ mail- & gt; Mật khẩu = $ smtpPassword;


if (! $ mail- & gt; send ()) {
    ném new \ Exception ('Tôi không thể gửi email.'. $ mail- & gt; ErrorInfo);
}  

Mọi thứ có thể gặp một chút vấn đề với Gmail và các biện pháp bảo mật cao của Gmail. Tập lệnh sẽ hoạt động tốt với PHP 5.5+; với phiên bản thấp hơn, bạn có thể không làm cho nó hoạt động.

Nếu bạn gặp khó khăn với việc đưa Gmail hoạt động với PHPMailer, hãy xem hướng dẫn gỡ rối của PHPMailer hoặc xem một ví dụ đầy đủ về việc triển khai Gmail của họ .

Tinh chỉnh này cũng được bao gồm trong gói tải xuống dưới dạng contact-3.php .

Tinh chỉnh # 3 Thực tế là một loạt các tinh chỉnh nhỏ hơn

3.1. Thêm nhiều người nhận hơn

Nếu bạn đang sử dụng hàm PHP mail () : Chỉ cần sao chép hàng với hàm mail () và thêm địa chỉ email mới .

  mail ($ sendTo, $ subject, $ emailText, implode ("\ n", $ headers));
mail ('new@emailaddress.com ', $ subject, $ emailText, implode ("\ n", $ headers));  

Nếu bạn đang sử dụng PHPMailer: Gọi $ mail- & gt; addToAdress () lần nữa:

  $ mail- & gt; addAddress ($ sendToEmail, $ sendToName);
$ mail- & gt; addAddress ('newemail@domain.com ',' Johnny ');  

3.2. Soạn thư email của riêng bạn

Tôi đang sử dụng lặp qua $ _POST để soạn email nhằm đơn giản hóa mọi thứ một chút . Nhưng việc soạn tin nhắn của riêng bạn dễ dàng không phải là vấn đề.

Tin nhắn văn bản thuần túy

Thay thế đoạn mã này

  $ emailText = "Bạn có một tin nhắn mới từ biểu mẫu liên hệ của mình \ n ====================== ======= \ n ";

foreach ($ _POST dưới dạng $ key = & gt; $ value) {
// Nếu trường tồn tại trong mảng $ fields, hãy đưa nó vào email
if (Isset ($ fields [$ key])) {
$ emailText. = "$ fields [$ key]: $ value \ n";
}
}  

Bằng một thứ gì đó tương tự như thế này:

  $ emailText = "Bạn có một tin nhắn mới từ biểu mẫu liên hệ của mình \ n
============================= \ n
Một số văn bản khác \ n
Tên: $ _POST [tên] \ n
Tin nhắn: $ _POST [tin nhắn] \ n
Thêm các trường biểu mẫu khác hoặc văn bản tùy chỉnh .... ";  

Lưu ý rằng chúng tôi đang truy cập trực tiếp các giá trị trong mảng $ _POST và bạn cũng cần sử dụng \ n cho các dòng mới.

Thông báo HTML

Nếu bạn đang sử dụng thông báo HTML với PHPMailer, giải pháp sẽ thay thế điều này:

  $ emailTextHtml = "& lt; h1 & gt; Bạn có một tin nhắn mới từ biểu mẫu liên hệ của mình & lt; / h1 & gt; & lt; hr & gt;";
$ emailTextHtml. = "& lt; bảng & gt;";

foreach ($ _POST dưới dạng $ key = & gt; $ value) {
// Nếu trường tồn tại trong mảng $ fields, hãy đưa nó vào email
if (Isset ($ fields [$ key])) {
$ emailTextHtml. = "& lt; tr & gt; & lt; th & gt; $ fields [$ key] & lt; / th & gt; & lt; td & gt; $ value & lt; / td & gt; & lt; / tr & gt;";
}
}
$ emailTextHtml. = "& lt; / table & gt; & lt; hr & gt;";
$ emailTextHtml. = "& lt; p & gt; Chúc một ngày tốt lành, & lt; br & gt; Tốt nhất, & lt; br & gt; Ondrej & lt; / p & gt;";  

bởi một cái gì đó tương tự như sau:

 $ emailTextHtml = "& lt; style type = 'text / css' & gt; body {font-family: Roboto, sans-serif; font-size: 13px;} & lt; / style & gt; "
$ emailTextHtml. = "& lt; body & gt;";
$ emailTextHtml. = "& lt; h1 & gt; Bạn có một tin nhắn mới từ biểu mẫu liên hệ của mình & lt; / h1 & gt; & lt; hr & gt;";
$ emailTextHtml. = "& lt; bảng & gt;";
$ emailTextHtml. = "& lt; tr & gt; & lt; th & gt; Một số thông báo tùy chỉnh & lt; / th & gt; & lt; td & gt; $ _ POST [name] & lt; / td & gt;";
$ emailTextHtml. = "& lt; tr & gt; & lt; th & gt; Một số nội dung tùy chỉnh & lt; / th & gt; & lt; td & gt; $ _ POST [họ] & lt; / td & gt;";
$ emailTextHtml. = "& lt; tr & gt; & lt; th & gt; ... & lt; / th & gt; & lt; td & gt; .... & lt; / td & gt;";
$ emailTextHtml. = "& lt; / table & gt;";
$ emailTextHtml. = "& lt; p & gt; Chúc một ngày tốt lành, & lt; br & gt; Tốt nhất, & lt; br & gt; Ondrej & lt; / p & gt;";
$ emailTextHtml. = "& lt; / body & gt;";  

Như bạn có thể thấy, tôi cũng đã thêm một số kiểu cơ bản vào & lt; style & gt; yếu tố. Tuy nhiên, tôi sẽ không đi vào chi tiết quá nhiều vì việc tạo kiểu email là một chương hoàn toàn mới.

3.3 Chuyển hướng người dùng đến một trang khác; không sử dụng AJAX

Có thể bạn sẽ không cần biểu mẫu AJAX để gửi trong nền, nhưng bạn hoan nghênh khả năng chuyển hướng người dùng đến một trang khác . Đây là phương pháp hay nhất thường bị lãng quên để chuyển hướng sau khi gửi biểu mẫu.

Tất cả chúng ta đều biết những câu hỏi khó chịu của trình duyệt rằng bạn sắp gửi lại dữ liệu biểu mẫu, v.v., điều này xảy ra nếu bạn không chuyển hướng người dùng sau khi gửi biểu mẫu.

Ngoài ra, như vậy, bạn loại trừ khả năng nhận được biểu mẫu nhiều lần .

Giải pháp cho điều này sẽ như sau:

1. Xóa đoạn mã sau khỏi contact.js.

  // khi biểu mẫu được gửi
// xóa TẤT CẢ NHỮNG ĐIỀU NÀY
$ ('# contact-form'). on ('submit', function (e) {
....
})  

2. Sau đó, ở cuối contact.php của bạn, hãy thay thế đoạn mã sau

  // nếu được yêu cầu bởi AJAX, hãy trả về phản hồi JSON
if (! blank ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) & amp; & amp; strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
...
}
// khác chỉ hiển thị thông báo
khác {
...
}  

với một cái gì đó tương tự như:

  if ($ responseArray ['type'] == 'thành công') {
// chuyển hướng thành công

header ('Vị trí: http://www.example.com/success.html ");
}
khác {
// chuyển hướng lỗi
header ('Vị trí: http://www.example.com/error.html');
}  

Kết thúc # 2

Đây thực sự là nó. Tôi hy vọng bạn đã học được điều gì đó mới hôm nay và hướng dẫn này đã giúp bạn trong hành trình thiết kế web của mình.

Cảm ơn bạn đã đọc.

Lưu ý

Phát triển trên máy tính của bạn

Nếu bạn muốn phát triển biểu mẫu trên máy tính của mình , bạn sẽ cần một máy chủ cục bộ có hỗ trợ PHP . Một trong những giải pháp phổ biến nhất, ít nhất là trên Windows, là, ví dụ: XAMPP (bản thân tôi đã từng sử dụng), nhưng còn nhiều giải pháp khác.

Giải pháp localhost, có thể là XAMPP hoặc tương tự, hầu hết có thể sẽ không có bất kỳ máy chủ thư nào đang hoạt động được bao gồm . Để có thể gỡ lỗi / phát triển email, có tiện ích mô phỏng máy chủ thư hành vi và thay vì gửi email, chúng lưu mã đầu ra / mã nguồn của gửi email vào ổ cứng của bạn. Nếu bạn đang sử dụng XAMPP, nó đi kèm với một tiện ích có tên là mailtodisk và các email sẽ được lưu trong xamppfolder / mailoutput . Một trong những giải pháp tương tự có thể là, ví dụ: MailCatcher , nhưng tôi không có bất kỳ kinh nghiệm cá nhân nào về nó.

Để có thể gửi thư email thực, bạn cần đặt tập lệnh / trang trên internet . Để đặt mua dịch vụ lưu trữ web tuyệt vời, hãy xem BlueHost - một trong những máy chủ web lớn nhất trên thị trường. Nếu bạn chưa quen với chúng, bạn cũng sẽ được giảm giá 80% + nhiều tiện ích bổ sung. Nếu bạn đang mua sắm xung quanh, hãy đặt GoDaddy ($ 1 / tháng cho khách hàng mới) hoặc Fat Cow ($ 3 / tháng cho khách hàng mới) trong danh sách so sánh của bạn.

Phiên bản PDF

Ngoài ra còn có phiên bản PDF miễn phí 11 trang của bài viết này

Tải xuống tệp PDF miễn phí của bạn


Xem thêm những thông tin liên quan đến chủ đề cách tạo một biểu mẫu liên hệ hoạt động trong html

Create A Contact Form with PHP That Can Actually Send Mails!

  • Tác giả: Mr Coder
  • Ngày đăng: 2021-07-25
  • Đánh giá: 4 ⭐ ( 2777 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video, we are going to create a contact form with HTML, CSS, and PHP. After watching this video, you'll understand how to create a working PHP form that actually can send emails.

    👉 Source Code on Github:
    https://github.com/iamsofiullah/simple-php-contact-form

    Timestamps:
    0:00 - Overview
    1:30 - HTML
    4:15 - CSS
    12:42 - The PHP
    19:38 - Redirect Page
    22:21 - Uploading on Server
    24:47 - Last Thoughts

    mrcoder php

Trang Liên hệ sử dụng Google Biểu mẫu – Init HTML

  • Tác giả: www.inithtml.com
  • Đánh giá: 5 ⭐ ( 1284 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ở template-contact.php lần trước, chúng ta còn Biểu mẫu liên hệ chưa hoạt động. Bài viết này giới thiệu cách nhúng Google Biểu mẫu vào...

Hướng dẫn tạo form liên hệ bằng HTML, CSS

  • Tác giả: quachquynh.com
  • Đánh giá: 3 ⭐ ( 4805 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách Tạo Contact Form Bằng HTML, CSS

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 4 ⭐ ( 2865 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngày hôm nay chúng ta sẽ đi vào thực hành HTMl, CSS thông qua việc tạo form contact(liên hệ) cho trang web nhé!

Làm cách nào để tạo nút HTML hoạt động như một liên kết?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 7273 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] HTML Cách HTML đơn giản là đặt nó vào vị trí
    mà bạn chỉ định URL…

Cách tạo biểu mẫu liên hệ Divi linh hoạt bằng cách sử dụng logic có điều kiện

  • Tác giả: codewatchers.com
  • Đánh giá: 3 ⭐ ( 3796 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Không phải mọi khách truy cập vào trang web của bạn đều có cùng mục đích. Bạn rất có thể cung cấp nhiều mặt hàng hoặc dịch vụ khác nhau cho khách hàng và khách hàng, thay vì chỉ đơn giản là một. Đó...

Cách tạo biểu mẫu liên hệ bằng Formspree

  • Tác giả: funix.edu.vn
  • Đánh giá: 3 ⭐ ( 8427 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thêm một biểu mẫu liên hệ vào trang web của bạn, ngay cả khi nó tĩnh. Tìm hiểu cách Formspree có thể giúp giải quyết các yêu cầu thu thập dữ liệu của bạn.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Chuỗi Java là gì? Cách khai báo mảng chuỗi trong Java với ví dụ - cách khai báo mảng chuỗi java