Một mẫu đơn đặt hàng lý tưởng cho một cửa hàng trực tuyến. Tạo biểu mẫu phản hồi - đánh dấu php. Thông báo lỗi trên biểu mẫu được hiển thị và rõ ràng

Một trong những chức năng phổ biến nhất trên trang web là mẫu đơn đăng ký hoặc đơn đặt hàng, dữ liệu từ đó sẽ được gửi qua email đến chủ sở hữu trang web. Theo quy định, các biểu mẫu như vậy rất đơn giản và bao gồm hai hoặc ba trường để nhập dữ liệu. Làm thế nào để tạo một mẫu đơn đặt hàng như vậy? Điều này đòi hỏi phải sử dụng ngôn ngữ đánh dấu HTML và ngôn ngữ Lập trình PHP.

Bản thân ngôn ngữ đánh dấu HTML rất đơn giản; bạn chỉ cần tìm ra cách thức và vị trí đặt các thẻ nhất định. Với ngôn ngữ lập trình PHP, mọi thứ phức tạp hơn một chút.

Việc tạo ra một biểu mẫu như vậy không khó đối với một lập trình viên, nhưng HTML cho người thiết kế bố cục Một số hành động có thể có vẻ khó khăn.

Tạo biểu mẫu gửi dữ liệu bằng html

Dòng đầu tiên sẽ như sau

Đây là một yếu tố rất quan trọng của hình thức. Trong đó chúng tôi cho biết dữ liệu sẽ được truyền như thế nào và đến tệp nào. TRONG trong trường hợp này mọi thứ đều được truyền đi phương thức ĐĂNG tập tin send.php. Chương trình trong tệp này phải nhận dữ liệu theo đó, nó sẽ được chứa trong mảng post và gửi nó đến email được chỉ địnhĐịa chỉ.

Hãy trở lại hình thức. Dòng thứ hai sẽ chứa trường để nhập tên đầy đủ của bạn. Có đoạn mã sau:

Loại biểu mẫu là văn bản, nghĩa là người dùng sẽ có thể nhập hoặc sao chép văn bản tại đây từ bàn phím. Tham số tên chứa tên của biểu mẫu. Trong trường hợp này, đó là fio; dưới tên này, mọi thứ mà người dùng nhập vào trường này sẽ được truyền đi. Tham số giữ chỗ chỉ định nội dung sẽ được viết trong trường này dưới dạng giải thích.

Hàng tiếp theo:

Ở đây, hầu hết mọi thứ đều giống nhau, nhưng tên của trường là email và lời giải thích là người dùng nhập địa chỉ email của mình vào biểu mẫu này.

Dòng tiếp theo sẽ là nút "gửi":

dòng cuối cùng biểu mẫu sẽ có một thẻ

Bây giờ chúng ta hãy đặt mọi thứ lại với nhau.





Bây giờ hãy đặt các trường trong biểu mẫu là bắt buộc. Chúng tôi có đoạn mã sau:





Tạo một tệp chấp nhận dữ liệu từ biểu mẫu HTML

Đây sẽ là một tập tin có tên send.php

Trong tệp, ở giai đoạn đầu tiên, bạn cần chấp nhận dữ liệu từ mảng bài đăng. Để làm điều này, chúng tôi tạo hai biến:

$fio = $_POST["fio"];
$email = $_POST["email"];

Tên biến trong PHP được đặt trước dấu $ và dấu chấm phẩy được đặt ở cuối mỗi dòng. $_POST là một mảng mà dữ liệu từ biểu mẫu được gửi vào. Ở dạng html, phương thức gửi được chỉ định là phương thức="post". Vì vậy, hai biến được lấy từ biểu mẫu html. Để bảo vệ trang web của bạn, bạn cần chuyển các biến này qua một số bộ lọc - các hàm php.

Hàm đầu tiên sẽ chuyển đổi tất cả các ký tự mà người dùng sẽ cố gắng thêm vào biểu mẫu:

Trong trường hợp này, các biến mới không được tạo trong php mà sử dụng các biến hiện có. Những gì bộ lọc sẽ làm là chuyển đổi ký tự "<" в "<". Также он поступить с другими символами, встречающимися в html коде.

Hàm thứ hai giải mã url nếu người dùng cố gắng thêm nó vào biểu mẫu.

$fio = urldecode($fio);
$email = urldecode($email);

Với hàm thứ ba, chúng ta sẽ xóa khoảng trắng ở đầu và cuối dòng, nếu có:

$fio = cắt($fio);
$email = cắt($email);

Có các chức năng khác cho phép bạn lọc các biến php. Việc sử dụng chúng tùy thuộc vào mức độ lo ngại của bạn về việc kẻ tấn công sẽ cố gắng thêm mã chương trình vào biểu mẫu gửi email html này.

Xác thực dữ liệu được chuyển từ dạng HTML sang tệp PHP

Để kiểm tra xem mã này có hoạt động hay không và dữ liệu có được truyền hay không, bạn chỉ cần hiển thị nó trên màn hình bằng chức năng echo:

echo $fio;
tiếng vang "
";
echo $fio;

Dòng thứ hai ở đây là cần thiết để tách đầu ra của các biến php thành các dòng khác nhau.

Gửi dữ liệu nhận được từ biểu mẫu HTML tới email bằng PHP

Để gửi dữ liệu qua email, bạn cần sử dụng hàm mail trong PHP.

mail("gửi đến địa chỉ nào", "chủ đề của bức thư", "Thư (nội dung của bức thư)","Từ: thư được gửi từ email nào \r\n");

Ví dụ: bạn cần gửi dữ liệu đến email của chủ sở hữu hoặc người quản lý trang web [email được bảo vệ].

Chủ đề của bức thư phải rõ ràng và nội dung của bức thư phải chứa những gì người dùng chỉ định trong biểu mẫu HTML.

thư(" [email được bảo vệ]", "Ứng dụng từ trang web", "Tên đầy đủ:".$fio.". E-mail: ".$email ,"Từ: [email được bảo vệ]\r\n");

Cần phải thêm một điều kiện để kiểm tra xem biểu mẫu có được gửi bằng PHP đến địa chỉ email được chỉ định hay không.

nếu (thư(" [email được bảo vệ]", "Đặt hàng từ trang web", "Tên đầy đủ:".$fio.". E-mail: ".$email ,"Từ: [email được bảo vệ]\r\n"))
{
echo "tin nhắn đã được gửi thành công";
) khác (
}

Do đó, mã chương trình của tệp send.php, tệp này sẽ gửi dữ liệu biểu mẫu HTML tới email, sẽ trông như thế này:

$fio = $_POST["fio"];
$email = $_POST["email"];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$email = urldecode($email);
$fio = cắt($fio);
$email = cắt($email);
// tiếng vang $fio;
// tiếng vang "
";
// tiếng vang $email;
nếu (thư(" [email được bảo vệ]", "Ứng dụng từ trang web", "Tên đầy đủ:".$fio.". E-mail: ".$email ,"Từ: [email được bảo vệ]\r\n"))
( echo "tin nhắn đã được gửi thành công";
) khác (
echo "xảy ra lỗi khi gửi tin nhắn";
}?>

Ba dòng để kiểm tra xem dữ liệu có đang được chuyển vào tệp hay không sẽ được nhận xét. Nếu cần, chúng có thể được gỡ bỏ vì chúng chỉ cần thiết để gỡ lỗi.

Chúng tôi đặt mã HTML và PHP để gửi biểu mẫu trong một tệp

Trong phần bình luận cho bài viết này, nhiều người đặt câu hỏi làm thế nào để đảm bảo rằng cả biểu mẫu HTML và mã PHP để gửi dữ liệu tới email đều nằm trong một tệp chứ không phải hai tệp.

Để thực hiện công việc này, bạn cần đặt mã HTML của biểu mẫu vào tệp send.php và thêm một điều kiện sẽ kiểm tra sự hiện diện của các biến trong mảng POST (mảng này được gửi từ biểu mẫu). Nghĩa là, nếu các biến trong mảng không tồn tại thì bạn cần hiển thị cho người dùng biểu mẫu. Ngược lại, bạn cần nhận dữ liệu từ mảng và gửi đến người nhận.

Hãy xem cách thay đổi mã PHP trong tệp send.php:



Mẫu đơn từ trang web


//kiểm tra xem các biến có tồn tại trong mảng POST không
if(!isset($_POST["fio"]) và !isset($_POST["email"]))(
?>





) khác (
//hiển thị biểu mẫu
$fio = $_POST["fio"];
$email = $_POST["email"];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$email = urldecode($email);
$fio = cắt($fio);
$email = cắt($email);
nếu (thư(" [email được bảo vệ]", "Ứng dụng từ trang web", "Tên đầy đủ:".$fio.". E-mail: ".$email ,"Từ: [email được bảo vệ]\r\n"))(
echo "Tin nhắn đã được gửi thành công";
) khác (
echo "Đã xảy ra lỗi khi gửi tin nhắn";
}
}
?>

Chúng ta kiểm tra sự tồn tại của một biến trong mảng POST bằng hàm PHP isset(). Dấu chấm than trước hàm này trong điều kiện có nghĩa là phủ định. Nghĩa là, nếu biến không tồn tại thì chúng ta cần hiển thị biểu mẫu của mình. Nếu tôi không đặt dấu chấm than thì điều kiện đó sẽ có nghĩa đen là “nếu tồn tại thì hiển thị biểu mẫu”. Và điều này là sai trong trường hợp của chúng tôi. Đương nhiên, bạn có thể đổi tên nó thành index.php. Nếu đổi tên file đừng quên đổi tên tên file ở dòng

. Biểu mẫu phải liên kết đến cùng một trang, ví dụ: index.php. Tôi đã thêm tiêu đề trang vào mã.

Các lỗi phổ biến xảy ra khi gửi biểu mẫu PHP từ trang web

Lỗi đầu tiên, có lẽ là lỗi phổ biến nhất, là khi bạn nhìn thấy một trang trắng trống không có tin nhắn. Điều này có nghĩa là bạn đã mắc lỗi trong mã trang. Bạn cần bật hiển thị tất cả các lỗi trong PHP và sau đó bạn sẽ thấy lỗi xảy ra ở đâu. Thêm vào mã:

ini_set("display_errors","Bật");
error_reporting("E_ALL");

Tệp send.php chỉ được chạy trên máy chủ, nếu không mã sẽ không hoạt động. Khuyến khích rằng đây không phải là máy chủ cục bộ vì không phải lúc nào nó cũng được cấu hình để gửi dữ liệu đến máy chủ thư bên ngoài. Nếu bạn chạy mã không phải trên máy chủ thì mã PHP sẽ được hiển thị trực tiếp trên trang.

Vì vậy, để hoạt động chính xác, tôi khuyên bạn nên đặt tệp send.php trên máy chủ lưu trữ trang web. Theo quy định, mọi thứ đã được cấu hình ở đó.

Một lỗi phổ biến khác là khi xuất hiện thông báo “Tin nhắn đã gửi thành công” nhưng thư lại không đến được qua đường bưu điện. Trong trường hợp này, bạn cần kiểm tra cẩn thận dòng:

nếu (thư(" [email được bảo vệ]", "Đặt hàng từ trang web", "Tên đầy đủ:".$fio.". E-mail: ".$email ,"Từ: [email được bảo vệ]\r\n"))

Thay vì [email được bảo vệ] phải có một địa chỉ email để gửi thư đến, nhưng thay vào đó[email được bảo vệ] phải là một email hiện có cho trang web này. Ví dụ: đối với một trang web, đây sẽ là . Chỉ trong trường hợp này, một lá thư có dữ liệu từ biểu mẫu mới được gửi.

Ngày nay, trên mọi trang web, bạn đều có thể tìm thấy biểu mẫu phản hồi, có thể là trang thương mại hoặc trang thông tin. Thật không may, hầu hết chủ sở hữu trang web tạo ra các biểu mẫu bất tiện khi điền hoặc hiển thị chúng một cách quá phức tạp, làm hỏng ấn tượng về toàn bộ công ty. Hãy cùng tìm hiểu vị trí và cách yêu cầu dữ liệu người dùng một cách chính xác để dễ dàng tương tác với trang web.

Các loại biểu mẫu chính cho trang web

Hãy cùng xem xét đặc điểm của từng loại để bạn có thể chọn những loại phù hợp với trang web của mình hoặc sử dụng danh sách làm danh sách kiểm tra để không quên đặt tất cả chúng.

  1. Mẫu đơn đặt hàng gọi lại

    Chúng tôi khuyên tất cả các trang web thương mại nên sử dụng biểu mẫu này. Vị trí lý tưởng là tiêu đề trang web, bên cạnh số điện thoại. Hơn nữa, bạn không nên hiển thị các trường nhập ngay lập tức; tốt hơn hết bạn nên ẩn chúng dưới nút “Đặt cuộc gọi” và hiển thị chúng sau khi nhấp chuột. Không cần thiết phải làm cho nút sáng; ở dạng liên kết, nó sẽ hiển thị rõ ràng:

    Trong phiên bản mở rộng, hai trường “Điện thoại” và “Tên” là đủ và chỉ cần điền trường đầu tiên:

    Bạn chỉ có thể để lại một trường để nhập số điện thoại, đây cũng là một tùy chọn hoàn toàn hoạt động, mặc dù trước tiên bạn sẽ phải hỏi tên của từng khách hàng khi gọi:

    Ngoài ra, biểu mẫu gọi lại cũng hữu ích ở phần chân trang của trang web; đặt nó bên cạnh thông tin liên hệ. Bằng cách này, sau khi xem trang, khách hàng sẽ không phải quay lại từ đầu.

  2. Hình thức tư vấn

    “Biểu mẫu cứu hộ” dành cho những người dùng trang web của bạn không thể tìm thấy thông tin cần thiết trên trang nhưng muốn đặt hàng. Tốt hơn là đặt nó ở một trong hai tùy chọn: thu gọn ở góc dưới bên phải màn hình hoặc mở rộng - ở cuối Trang chủ và trên các trang của danh mục sản phẩm hoặc dịch vụ.

    Tùy chọn vị trí đầu tiên (ví dụ từ trang web Tango và Cash):

    Tùy chọn vị trí thứ hai (ví dụ từ trang web Okna-dpa):

    Hình thức này thường được thay thế bởi một nhà tư vấn trực tuyến, về cơ bản là giống nhau, nhưng bạn cần hiểu rằng bạn sẽ cần một nhân viên hỗ trợ nó.

    Biểu mẫu này cũng nên được đặt trên trang liên hệ. Hãy nhớ thêm trường nhận xét để người dùng có thể cho bạn biết họ đang liên hệ với công ty về vấn đề gì.

    Mẫu phản hồi trên trang liên hệ YouDesign:

  3. Mẫu đơn đặt hàng dịch vụ

    Rõ ràng, biểu mẫu phải được đặt trên trang dịch vụ, tốt nhất là ở cuối trang, sau phần mô tả công việc, kết quả và giá cả, để hướng dẫn người dùng điền đơn sau khi đọc thông tin. Bạn có thể hiển thị các trường biểu mẫu ngay lập tức, mở rộng chúng sau khi nhấp vào nút hoặc chuyển hướng chúng đến tài khoản cá nhân của bạn đến trang thích hợp.

    Thông thường, các trang dịch vụ bao gồm biểu mẫu yêu cầu gọi lại hoặc tư vấn, điều này không hoàn toàn chính xác. Khách hàng đã chọn một trang dịch vụ, thậm chí có thể là biểu giá và được hiển thị dưới dạng chung không có thông tin được chọn. Thật là mất phương hướng. Chúng tôi khuyên bạn nên chỉ định các trường sau:

    • “Loại dịch vụ” hoặc “Biểu phí” - tốt hơn là bạn nên tự động điền vào trường này hoặc đặt nó dưới dạng văn bản ở đầu biểu mẫu
    • "Tên"
    • “Điện thoại” - bắt buộc phải nhập trường này
    • “Email” - để sao chép thông tin đơn hàng cho khách hàng
    • “Nhận xét” - có lẽ khách hàng có giải thích rõ ràng

    Mỗi doanh nghiệp là cá nhân và bạn có thể cần các thông số bổ sung, nhưng chúng tôi khuyên bạn nên đặt không quá 5-7 trường để không khiến khách hàng xa lánh. Nếu bạn vẫn không thể tránh được số lượng lớn các trường thì hãy nhóm chúng theo chủ đề một cách trực quan để giảm thiểu sai sót khi nhập thông tin. Một ví dụ về mẫu đơn đặt hàng đơn giản trên trang web của công ty Stroya:

  4. Mẫu đơn đặt hàng sản phẩm

    Tốt hơn là hiển thị biểu mẫu này cho người dùng trên trang giỏ hàng khi họ đã quyết định lựa chọn sản phẩm. Nếu bạn có tài khoản cá nhân trên trang web của mình, bạn sẽ phải lập hai hình thức: dành cho người dùng được ủy quyền và trái phép.

    Dành cho khách hàng mới.Đừng ép họ phải đăng ký để quay lại đơn hàng. Điều này sẽ chỉ đẩy họ đi. Tất cả những gì bạn cần làm là thêm một vài trường có thông tin liên hệ. Hỏi tên, số điện thoại, email và địa chỉ giao hàng. Bằng cách này, người dùng sẽ không phải thực hiện các hành động không cần thiết và bạn sẽ có được một khách hàng mới. Bằng email, bạn có thể thực hiện đăng ký tự động và gửi cho khách hàng mật khẩu qua email.

    Ví dụ về cách đặt các trường trong biểu mẫu cho người dùng mới trên Ozon:

    Đối với khách hàng cũ. Những người đặt hàng lại đã cung cấp đầy đủ thông tin liên hệ nên ngoài danh sách hàng hóa, trong mẫu chỉ nên có các lựa chọn giao hàng và thanh toán. Và nếu bạn sử dụng mã khuyến mại, hãy thêm trường để nhập chúng, nhưng không có gì hơn thế. Không cần phải yêu cầu lại thông tin liên hệ của khách hàng.

    Một mẫu đơn đặt hàng cho Wildberries, thậm chí còn hiển thị lựa chọn phương thức giao hàng và thanh toán trước đó (nhưng để lại tùy chọn thay đổi chúng):

    Nhiều người chia việc nhập địa chỉ giao hàng thành nhiều ô, yêu cầu riêng mã zip, tên thành phố, tên đường, số nhà… trông rất rườm rà. Ví dụ phản đối từ trang web Angorochka:

    Người dùng mắc lỗi ngay cả trong các biểu mẫu như vậy, vì vậy tốt hơn là nên để lại một trường nhập địa chỉ chung và kiểm tra tính chính xác của dữ liệu với khách hàng mới qua điện thoại.

    Các trường bắt buộc để nhập phải là thông tin liên hệ, địa chỉ giao hàng, lựa chọn phương thức giao hàng và thanh toán. Biểu mẫu có thể được hiển thị theo từng giai đoạn nhưng không được phép hiển thị tất cả các trường cùng một lúc. Điều chính là phân chia chúng một cách trực quan thành các nhóm ngữ nghĩa.

  5. Mẫu đăng ký

    Chúng tôi khuyên bạn nên tách nó khỏi biểu mẫu ủy quyền vì nhiều khách hàng mới nhầm lẫn với nút “Đăng nhập”. Hai link cạnh nhau sẽ không chiếm nhiều dung lượng và giảm thời gian tìm kiếm. Ngoài ra, biểu mẫu phải luôn hiển thị, vì vậy tốt hơn là đặt nó trong tiêu đề của trang web. Tùy chọn phổ biến nhất nằm ở góc trên bên phải dưới dạng liên kết (ví dụ từ Aqua-Viva):

    Nói chung, biểu mẫu phải chứa các trường giống như biểu mẫu đặt hàng (và các trường nhập bắt buộc giống nhau), vì vậy chúng tôi khuyên bạn không nên nạp quá nhiều mục không cần thiết vào biểu mẫu và tạo một trường chung cho địa chỉ. Hãy nhớ rằng đăng ký là một bước bổ sung cho khách hàng, vì vậy đừng trì hoãn anh ta với một danh sách dài. Bạn có thể yêu cầu ngày sinh để gửi lời chúc mừng và giảm giá, nhưng việc buộc khách hàng đặt biệt hiệu hoặc cho biết số điện thoại hoặc địa chỉ bổ sung là không cần thiết.

    Đó là một cách thực hành tuyệt vời để cung cấp cho khách hàng đăng ký qua mạng xã hội. Bằng cách này, khách hàng sẽ không phải nhập mật khẩu và nói chung, việc đăng ký sẽ nhanh hơn. Một ví dụ về việc sử dụng tính năng này trên trang web Asos:

    Cửa hàng trực tuyến này của nước ngoài nên sẽ hiển thị các mạng xã hội phổ biến của các quốc gia đó. Đối với khán giả nói tiếng Nga, tốt hơn hết bạn nên xóa Twitter và thêm các nút cho VKontakte, Odnoklassniki.

    Tài khoản cá nhân phù hợp nhất cho các cửa hàng trực tuyến để lưu trữ thông tin liên hệ của khách hàng, lịch sử đặt hàng, thông tin về giảm giá và tiền thưởng. Cũng thích hợp cho các dịch vụ đăng ký, chẳng hạn như nếu bạn cung cấp quyền truy cập để xem phim ở chế độ gốc.

    Đồng thời, nếu bạn bán hàng công nghiệp, khi mỗi đơn hàng đều kèm theo cuộc gọi từ chuyên gia thì giỏ hàng hay mẫu đăng ký cũng chẳng ích gì. Các trang web cung cấp dịch vụ, chẳng hạn như thiết kế hoặc cải tạo căn hộ, cũng thường không cần tài khoản cá nhân.

  6. Hình thức uỷ quyền

    Việc khôi phục mật khẩu thường được thực hiện qua email, gửi cho khách hàng một liên kết đến biểu mẫu để nhập mật khẩu mới. Việc tạo mật khẩu “tạm thời” tự động buộc người dùng phải tự tìm biểu mẫu thay đổi mật khẩu, điều này gây bất tiện và chỉ gây rắc rối không cần thiết cho khách hàng. Tốt hơn hết là đừng để điều này xảy ra.

  7. Mẫu đăng ký nhận bản tin

    Chúng tôi đã nhiều lần viết về lợi ích của tiếp thị qua email và đưa ra lời khuyên về sự phát triển của nó, chẳng hạn như bài viết này và phần thứ hai chứa thông tin chi tiết nhất. Vì vậy, hình thức đăng ký là thứ bắt buộc phải có nếu bạn muốn sử dụng kênh thu hút khách hàng này.

    Biểu mẫu phải được đặt trên Trang chủ để người dùng có thể thấy ngay rằng có cơ hội như vậy. Sẽ tốt hơn nếu có tất cả các thông tin cơ bản ở cuối trang (ví dụ từ Lavkalavka):

    Nếu trang web có blog và trong thư, ngoài hàng hóa và dịch vụ, bạn thông báo các bài viết mới thì bạn có thể thêm biểu mẫu trên trang chung của phần, chẳng hạn như ở bên phải bài viết, như Vkusnosti của Mado đã làm:

    Tất nhiên, biểu mẫu đăng ký cần có trường “Email” và bạn cũng có thể yêu cầu tên để làm cho email được cá nhân hóa hơn.

Bây giờ chúng ta đã quyết định những biểu mẫu nào cần được đặt và vị trí trên trang web, hãy tìm cách làm cho chúng thuận tiện hơn để điền vào.

  1. Các biểu mẫu trong cửa sổ bật lên (phương thức). Chúng chỉ được hiển thị sau khi người dùng nhấp vào liên kết hoặc nút mong muốn. Không có “cửa sổ bật lên” khi mở Trang chủ hoặc khi khách hàng cố gắng rời khỏi trang web. Nhà tư vấn trực tuyến cũng không nên “bật lên”, đề nghị bắt đầu trò chuyện. Những điều như vậy gây khó chịu và đẩy lùi người dùng. Ví dụ phản đối từ Delicat-Servis (hiện tại các anh chàng đã khắc phục được sự cố này và biểu mẫu chỉ mở sau khi nhấp vào):
  2. Sử dụng hoạt hình. Hãy đánh dấu điều này như một mục riêng biệt vì đây là một vấn đề phổ biến. Biểu mẫu không được nhấp nháy, nhảy qua màn hình hoặc nổi vào giữa màn hình để thu hút sự chú ý. Hoạt ảnh như vậy khiến người dùng không thể nghiên cứu nội dung chính của trang và trở nên khó chịu khi xem trong thời gian dài. Làm cho các nút trên các biểu mẫu có độ tương phản và khách hàng chắc chắn sẽ không bỏ lỡ chúng.
  3. Tên của biểu mẫu. Luôn ký vào các biểu mẫu để người dùng có thể thấy những gì họ đang điền. Đúng khi ghi tên biểu giá hoặc dịch vụ trong tiêu đề, nhưng nếu tiêu đề quá dài thì hãy thêm thông tin này dưới dạng văn bản bên dưới, như Fullhousedesign đã làm:

  4. Tên của các trường biểu mẫu. Tốt nhất là đặt tên trường phía trên nó và chỉ ra ví dụ về cách điền vào bên trong trường. Nếu bạn đặt tên bên trong trường, nó sẽ bị xóa khi điền vào, điều này không hoàn toàn thuận tiện. Đây cũng là một lựa chọn tồi khi tiêu đề ở bên trái và lề bên phải; mắt phải tương quan giữa các cột với nhau (một ví dụ tồi về biểu mẫu trên trang web của Nhà sách Moscow):

    Một tùy chọn thuận tiện để sắp xếp chữ ký và mẹo (trên trang web Xarakiri.ru):

  5. Phần bắt buộc. Luôn đánh dấu * các trường bắt buộc. Ở trên, khi mô tả các biểu mẫu, chúng tôi đã chỉ ra những biểu mẫu nên chọn. Ngoại lệ là các biểu mẫu có một trường - và rõ ràng là nó là bắt buộc. Một ví dụ về đánh dấu các trường bắt buộc từ Izto:
  6. Lỗi trong các hình thức. Người dùng thường mắc lỗi và không để ý, vì vậy, chúng tôi khuyên bạn nên thêm phần kiểm tra đầu vào cho thông tin liên hệ và các trường bắt buộc. Tốt hơn là hiển thị thông báo lỗi dưới dạng văn bản bên cạnh trường tương ứng. Chúng không được biến mất hoặc chồng chéo các trường đầu vào. Bạn có thể đánh dấu trường bằng khung màu đỏ nhưng cũng phải có thông báo. Ví dụ về thông báo lỗi rõ ràng từ Aristo:
  7. Xác nhận gửi dữ liệu. Sau khi khách hàng điền vào tất cả các trường và nhấp vào nút gửi, bạn cần hiển thị thông báo xác nhận nổi bật để họ không cố gắng điền lại biểu mẫu. Bạn có thể sử dụng cửa sổ phương thức hoặc, nếu biểu mẫu đã có trong cửa sổ bật lên, hãy đặt văn bản thích hợp bên dưới nút gửi. Thông báo cũng phải cho biết chính xác thời điểm các chuyên gia sẽ liên hệ với khách hàng hoặc khách hàng nên làm gì tiếp theo. Một câu “Cảm ơn, dữ liệu đã được gửi” đơn giản là không đủ. Một ví dụ về xác nhận lô hàng chi tiết từ công ty Cable Systems:

  8. Sử dụng hình ảnh xác thực. Chúng tôi khuyên bạn không nên sử dụng robot kiểm tra trong biểu mẫu vì nó buộc người dùng thực hiện những hành động không cần thiết và thậm chí có thể khiến họ rời khỏi trang web. Sử dụng các phương pháp bảo mật mà người dùng không thể nhìn thấy, ví dụ: theo dõi thời gian điền biểu mẫu trên máy chủ (nếu quá ngắn nghĩa là biểu mẫu đang được robot điền), thêm các trường ẩn (chỉ robot mới có thể điền vào) ), sử dụng dịch vụ chống thư rác để xác minh, v.v. Phương án cuối cùng là bạn có thể sử dụng xác thực đầu vào của Google:

  9. Đang lưu dữ liệu. Có lẽ khách hàng đã vô tình đóng biểu mẫu, xảy ra lỗi hoặc xảy ra khởi động lại và để không phải nhập lại dữ liệu, hãy lưu nó trước khi gửi. Lời khuyên này đặc biệt áp dụng cho các hình thức dài.
  10. Nút reset. Không bao giờ đặt nó bên cạnh nút gửi để người dùng không vô tình nhấp vào nó. Đặt nó vào một phần khác của biểu mẫu hoặc loại bỏ nó hoàn toàn. Một ví dụ về vị trí nút kém trên trang web Avarit:

  11. Luật về dữ liệu cá nhân.Để tránh bị phạt khi thu thập dữ liệu cá nhân từ khách hàng, cần chuẩn bị các văn bản quy định và viết về nó trên trang web.

Kết quả

Mỗi hình thức nên được tiếp cận riêng lẻ nên không thể mô tả hết tất cả các trường hợp trong một bài viết. Nguyên tắc chính cần được tuân theo là tối thiểu các trường. Tốt hơn hết bạn nên gọi điện cho khách hàng và làm rõ chi tiết bằng lời nói hơn là buộc họ phải điền vào những mẫu đơn dài dòng. Có lẽ khách hàng có thêm một số câu hỏi, khi đó chỉ cần một cuộc gọi, bạn sẽ giải quyết được hai vấn đề.

Chúng tôi hy vọng rằng các đề xuất của chúng tôi sẽ giúp bạn tạo các biểu mẫu thuận tiện trên trang web của mình và thu thập thêm đơn đặt hàng. Đối với những người muốn phân tích cá nhân về khả năng sử dụng của biểu mẫu, chúng tôi khuyên bạn nên sử dụng dịch vụ này.

tái bút Nếu bạn cần thông tin về cách tạo biểu mẫu (khía cạnh kỹ thuật của vấn đề), bạn cần các đề xuất về mã, các hàm tạo thuận tiện, v.v., sau đó viết câu hỏi trong phần bình luận, chúng tôi sẽ tạo một bài viết riêng về chủ đề này.

Lợi nhuận của bất kỳ cửa hàng trực tuyến nào chủ yếu phụ thuộc vào mức độ thoải mái của các điều kiện trên trang web. Bất kỳ người mua nào cũng muốn tìm thấy thứ họ đang tìm kiếm càng nhanh càng tốt, đồng thời dành ít công sức nhất. Theo thống kê, hầu hết khách hàng không thích quá trình thanh toán. Đó là lý do tại sao, nếu muốn tăng số lượng bán hàng, bạn cần đơn giản hóa hệ thống đặt hàng trên website của mình.

Trong các cửa hàng trực tuyến, để mua sản phẩm, khách hàng phải điền vào mẫu đơn đặt hàng, được cài đặt trên trang web bằng cách sử dụng các tập lệnh, mô-đun hoặc plugin đặc biệt. Khi tạo mẫu đơn đặt hàng, hãy tuân thủ các quy tắc sau.

1. Sự đơn giản là chìa khóa của hiệu quả.

Như thực tế cho thấy, nếu người mua gặp phải bất kỳ vấn đề nào khi đặt hàng, anh ta thường rời khỏi nguồn vì sợ gặp lại vấn đề này. Nếu mẫu đơn đặt hàng của bạn có một vài bước đơn giản và dễ điền, bạn sẽ được đảm bảo doanh số bán hàng ổn định. Điều đáng chú ý là điều chính là không lạm dụng nó một cách đơn giản; luôn tính đến các chi tiết cụ thể của dự án của bạn. Mẫu đơn đặt hàng trên trang web phải thu thập thông tin cần thiết tối thiểu để hoàn thành đơn hàng.

2. Sử dụng ví dụ rõ ràng.

Một người luôn cần một ví dụ rõ ràng, đặc biệt là khi điền vào mẫu đơn đặt hàng. Cố gắng tạo một biểu mẫu web mà ngay cả người mới bắt đầu cũng có thể điền vào.

3. Tổng cộng, hãy hiển thị tiến trình của đơn đặt hàng cho khách hàng của bạn.

Khách hàng phải luôn xem mình đã hoàn thành bao nhiêu giai đoạn và bao nhiêu giai đoạn vẫn chưa hoàn thành. có tầm quan trọng đặc biệt xét về mặt tâm lý học. Quá trình đặt hàng cổ điển diễn ra trong 3-4 giai đoạn. Giai đoạn đầu tiên là khi người dùng tạo danh sách đơn hàng. Giai đoạn thứ hai - người mua nhập thông tin liên hệ của mình. Giai đoạn thứ ba là xác minh thông tin. Giai đoạn thứ tư là thỏa thuận.

4. Xóa tan mọi nghi ngờ của khách hàng.

Ở nước ta, luật bảo vệ dữ liệu cá nhân gần đây đã có hiệu lực nhưng nhiều người dùng chưa biết. Trong mẫu đơn đặt hàng html, hãy đảm bảo chỉ ra việc không tiết lộ thông tin cá nhân. Điều này sẽ làm tăng đáng kể sự tin tưởng của khách hàng.

5. Không! đăng ký.

Hầu hết tất cả người mua đều có thái độ tiêu cực đối với bất kỳ đăng ký nào, do thực tế là quá trình này có thể mất nhiều thời gian (theo ý kiến ​​​​của họ). Do đó, ngay cả khi bạn đăng ký trên trang web của mình mà không xác nhận hồ sơ của mình, hãy xóa nó hoặc cung cấp quy trình đặt hàng cho người dùng chưa đăng ký. Điều đáng chú ý là trong một số trường hợp, ngược lại, việc đăng ký là cần thiết. Ví dụ: khi bạn có ý định tạo cơ sở khách hàng chất lượng. Trong trường hợp này, hãy đăng ký trên trang web thông qua mạng xã hội. Nó rất đơn giản.

Tất cả các quy tắc và mẹo ở trên chắc chắn sẽ làm tăng hiệu quả của biểu mẫu đặt hàng trên trang web, nhưng bạn nên luôn nhớ rằng điều đó phụ thuộc rất nhiều vào chi tiết cụ thể của chủ đề. Chỉ bằng cách thử và sai, bạn mới có thể thực sự tăng chuyển đổi trên trang web.

Các trang web bán bất kỳ mặt hàng nào thường được tạo bằng hệ thống chuyên dụng (cms). Các cửa hàng trực tuyến chính thức phải có giỏ hàng đầy đủ chức năng và khả năng thanh toán mua hàng từ xa. Nhưng phải làm gì nếu phạm vi sản phẩm của bạn không đủ lớn để mở toàn bộ cửa hàng. Điều gì sẽ xảy ra nếu bạn đang bán sách, đào tạo hoặc một số kỹ thuật độc đáo? Ngay cả khi bạn có một cửa hàng trực tuyến được tự động hóa hoàn toàn, nút “Mua trong vài cú nhấp chuột” hoặc “Đặt hàng trong 5 giây” sẽ rất hữu ích.

Các nghiên cứu được thực hiện cho thấy rằng khi sử dụng khả năng đặt hàng nhanh, tỷ lệ chuyển đổi tăng lên tới +56%. Nếu chúng ta xem xét quy trình đặt hàng cổ điển, tỷ lệ thất bại là khoảng 7%. Khi sử dụng đơn hàng 1 click, số lần từ chối lên tới 20% (cứ đơn hàng thứ 5 lại chứa dữ liệu khách hàng “giả mạo”). Mặc dù vậy, vẫn có phần lớn các đơn đặt hàng chuyển phát nhanh. Điều này có nghĩa là nếu sử dụng đúng chức năng này, số lượng bán hàng có thể tăng lên đáng kể.

Đây là cách giá trị chuyển đổi thay đổi tại các cửa hàng thử nghiệm của chúng tôi trong suốt một tháng ở mỗi giai đoạn. Ban đầu chỉ có một nút “Thêm vào giỏ hàng”. Trong thử nghiệm đầu tiên, một liên kết mua hàng nhanh đã được thêm vào. Kết quả thật tuyệt vời. Sau đó, trong thử nghiệm thứ hai, chúng tôi quyết định đặt giao dịch mua hàng bằng 1 cú nhấp chuột vào nút chính và đưa sản phẩm thêm vào giỏ hàng vào liên kết. Tỷ lệ chuyển đổi cao hơn so với lần đầu, nhưng thử nghiệm đầu tiên vẫn mang lại hiệu quả cao hơn. Đây là những gì chúng tôi khuyên khách hàng của chúng tôi.

  • WIX

Bước 1. Thiết kế mẫu đơn đặt hàng chuyển phát nhanh

Hãy xem các biểu mẫu đặt hàng bằng một cú nhấp chuột được tạo sẵn từ các ví dụ trong trình thiết kế.

Mẫu chuẩn để đặt hàng từ trang web. Nút hoặc liên kết đến nút đó có thể được đặt bên cạnh nút “Thêm vào giỏ hàng” hoặc được sử dụng riêng. Tên của sản phẩm sẽ được gửi trong trường ẩn (ẩn) của biểu mẫu. Trong ví dụ này, trường sản phẩm được hiển thị, để bạn có thể theo dõi các thay đổi của trường. Trong mẫu thiết kế, trường ẩn dành cho sản phẩm có mã nhận dạng sản phẩm . Để trường này được điền tự động tùy thuộc vào nút/liên kết nào được nhấp vào, bạn cần thêm thuộc tính giả data-product="Product Name" vào liên kết hoặc nút.

Mua iPhone 5S Mua Samsung S5 Mua HTC Desire

Biểu mẫu mở rộng với các trường bổ sung sẽ cho phép bạn chỉ định chính xác hơn kích thước và phương thức phân phối. Bạn có thể thêm các trường hoặc xóa những trường không cần thiết hoặc thay đổi mục đích của chúng. Ví dụ: thay vì kích thước, bạn có thể chỉ định màu sắc, v.v. Loại hình này chỉ phù hợp nếu tất cả các sản phẩm đều có đặc tính giống nhau (giao hàng, kích thước). Hoặc tạo một biểu mẫu riêng với thuộc tính riêng cho từng nhóm sản phẩm. Dạng mở rộng sẽ thuận tiện cho các trang web bán khóa học, kỹ thuật, v.v.