Bạn đang xem : gửi email dạng html

Ảnh của Melinda Gimpel trên Unsplash < / span>

Đối phó với trải nghiệm người dùng được cải thiện có thể tốn kém thời gian và tiền bạc. Thông thường, những vấn đề mà khách truy cập trang web của bạn có những chỉnh sửa đơn giản để khắc phục. Điều này dẫn đến câu hỏi sau:

“Làm cách nào để tìm hiểu xem khách hàng có thích trải nghiệm trang web của bạn hay không?”

Câu trả lời có thể đơn giản hơn bạn nghĩ. Các biểu mẫu web được thiết kế cẩn thận, có vị trí chiến lược là rất quan trọng để giải quyết sự không hài lòng trong trải nghiệm của khách hàng và hiểu liệu họ có thực sự thích trải nghiệm mà bạn đã tạo cho họ hay không.

Nếu bạn không có biểu mẫu trên trang web của mình, bạn có thể bỏ lỡ nhiều khách hàng tiềm năng hơn, chuyển đổi cao hơn và khách hàng lâu dài hạnh phúc hơn. Chúng tôi sẽ hướng dẫn bạn cách tạo một loại biểu mẫu nhất định – loại biểu mẫu sẽ gửi email cho bạn cũng như khách hàng, để đảm bảo rằng biểu mẫu đã được nhận.

Chúng tôi sẽ phân biệt với cách cũ và bẩn, sau đó chúng tôi sẽ chỉ ra cách dễ nhất và dễ tùy chỉnh nhất bằng cách sử dụng Getform.

Cách Nhận Email từ Biểu mẫu HTML

Trước tiên, hãy bắt đầu với khái niệm cơ bản.

Option-1: Sử dụng Khái niệm cơ bản về HTML

Gửi email chỉ bằng HTML sau gửi biểu mẫu. Đây là mã mẫu để sử dụng:

  & lt;! - Mẫu HTML mẫu - & gt;
& lt; form action = "mailto: contact@yourdomain.com"
method = "POST"
enctype = "multiart / form-data"
name = "EmailForm" & gt;
    Tên: & lt; br & gt;
    & lt; input type = "text" size = "19" name = "Tên-Liên hệ" & gt; & lt; br & gt; & lt; br & gt;
    Email: & lt; br & gt;
    & lt; input type = "email" name = "Liên hệ-Email" & gt; & lt; br & gt; & lt; br & gt;
    Tin nhắn: & lt; br & gt;
    & lt; textarea name = "Liên hệ-Tin nhắn" row = "6 ″ cols =" 20 ″ & gt;
    & lt; / textarea & gt; & lt; br & gt; & lt; br & gt;
    & lt; button type = "submit" value = "Gửi" & gt; Gửi & lt; / button & gt;
& lt; / form & gt;
 

Biểu mẫu HTML đơn giản “Kích hoạt” một Email.

Mã HTML mẫu này sẽ tạo một biểu mẫu yêu cầu tên, email và tin nhắn của người liên hệ, đồng thời bao gồm một nút để gửi đến biểu mẫu.

Một điều khác cần lưu ý với mã này là nó không gửi trực tiếp đến địa chỉ email, nhưng nó sẽ mở ra một ứng dụng email hoặc cửa sổ công cụ để gửi biểu mẫu.

Mặc dù bạn có thể chỉ sử dụng HTML cơ bản, đây không phải là tùy chọn lý tưởng. Bởi vì các trình duyệt sẽ cho phép bạn định tuyến gửi biểu mẫu trực tiếp đến một địa chỉ email. Tuy nhiên, lý do họ không làm là việc gửi email trực tiếp từ một biểu mẫu web HTML sẽ tiết lộ địa chỉ email của khách truy cập, khiến người dùng dễ bị tấn công bởi các hoạt động độc hại, chẳng hạn như lừa đảo.

Một vấn đề khác với tùy chọn mailto: là nó không tương thích 100% với tất cả các trình duyệt, nó không thân thiện với người dùng và không thể kiểm soát định dạng của dữ liệu khi biểu mẫu được gửi bởi trình duyệt.

Hãy chuyển sang tùy chọn thứ hai.

Tùy chọn-2: Quản lý chương trình phụ trợ Biểu mẫu của riêng bạn. Thực sự không?

Đây là một cách kỹ thuật hơn và bẩn thỉu hơn, chắc chắn đòi hỏi các kỹ năng kỹ thuật cụ thể. Ngoài ra có thể mất thời gian và công sức của bạn. Để làm cho biểu mẫu của bạn hoạt động với máy chủ email và gửi nó đến hộp thư, khung phụ trợ, trong trường hợp này là PHP, là câu trả lời.

Khi biểu mẫu được gửi, trình duyệt sẽ gửi thông tin đến chương trình phụ trợ bằng cách sử dụng liên kết được đề cập trong thuộc tính “action” của thẻ biểu mẫu, gửi dữ liệu biểu mẫu đến URL đó.

Xem Thêm  German women who give birth to puppies - nhac happy new year 2017

Sử dụng PHP để tạo một trang mới

  • Khi bạn đang tạo một trang web, thay vì sử dụng phần mở rộng “.html”, hãy nhập “.php”.
  • Bằng cách làm này, máy chủ sẽ biết lưu trữ PHP mà bạn viết. Thay vì lưu trang HTML trống như vậy, hãy lưu nó dưới dạng như sau: “subsform.php”. Sau khi trang của bạn được tạo và lưu, bạn sẽ có thể tạo biểu mẫu.

Sử dụng PHP để tạo trang mới

Trong bước này, bạn sẽ viết mã để tạo biểu mẫu. Đoạn mã sau là những thứ cần thiết cho biểu mẫu cơ bản:

  & lt;! - Mẫu HTML mẫu - & gt;
& lt; form method = "post" action = "subscriberform.php" & gt;
& lt; textarea name = "message" & gt; & lt; / textarea & gt;
& lt; input type = "submit" & gt;
& lt; / form & gt;
 

Bởi vì điều này tương tự như viết lên chỉ HTML, những dòng này cũng sẽ tạo tên cho biểu mẫu và một khu vực để người đăng ký nhập tin nhắn tùy chỉnh và gửi cho bạn.

Một điểm khác biệt quan trọng là phần “action = contact.php”. Phần mã này sẽ làm cho trang gửi biểu mẫu khi được gửi. Đây là phần được thêm vào tùy chọn đầu tiên.

Làm cho biểu mẫu gửi email.

Sau khi bạn tạo biểu mẫu và thêm tất cả các bản sửa lỗi thích hợp tùy thuộc vào tùy chọn thiết kế của bạn, đã đến lúc tạo email phần. Để cho phép gửi dữ liệu trong email, chúng tôi phải thêm mã sẽ xử lý dữ liệu. Sao chép mã sau hoặc tạo mã nào đó tương tự:

  & lt;? Php
if ($ _ POST ["Tin nhắn"]) {
mail ("john@johndoe.com", "Đây là dòng tiêu đề mẫu",
$ _POST ["Chèn tin nhắn của bạn"]. "Từ: jane@janedoe.com");
}
? & gt;
 

Nhớ lại rằng mọi thứ bên trong dòng đầu tiên và dòng cuối cùng sẽ yêu cầu trang web làm cho các chức năng này hoạt động như PHP. Mã này cũng kiểm tra xem người đăng ký có sử dụng biểu mẫu hay không. Từ đó, nó sẽ kiểm tra xem biểu mẫu đã được gửi hay chưa.

Nếu chúng tôi chia nhỏ mã ở trên.

  • Phần “mail ()” sẽ gửi biểu mẫu đã hoàn thành dưới dạng gửi email tới “john@johndoe.com” và dòng tiêu đề như sau.
  • Trong dòng tiếp theo, bạn có thể viết bản sao của email bên trong dấu ngoặc kép, được gửi từ bất kỳ địa chỉ email nào bạn chọn. Trong trường hợp này là từ “jane@janedoe.com”

Sau khi gửi biểu mẫu, trang sẽ gửi dữ liệu cho chính nó. Nếu dữ liệu đã được gửi thành công, trang sẽ gửi nó dưới dạng email. Sau đó, trình duyệt sẽ tải HTML của trang – bao gồm biểu mẫu.

Việc quản lý chương trình phụ trợ biểu mẫu của riêng bạn có thể lộn xộn và không phải là một tùy chọn tối ưu. Điều này đưa chúng ta đến tùy chọn thứ ba và là tùy chọn dễ dàng nhất.

Option-3: Sử dụng một nền tảng phụ trợ biểu mẫu như Getform

Chúng tôi biết rằng tùy chọn đầu tiên không thực sự hữu ích và tùy chọn thứ hai chắc chắn không phải là một lựa chọn dễ dàng và cũng không dành cho tất cả mọi người.

Đó là lý do tại sao các nền tảng phụ trợ biểu mẫu như Getform là một cách tuyệt vời để làm cho biểu mẫu HTML của bạn gửi email. Một ưu điểm khác của nền tảng phụ trợ biểu mẫu là chúng không có bất kỳ khuôn khổ hoặc ngôn ngữ phụ thuộc nào và hoạt động tốt với các trang web tĩnh như Hugo, Gatsby, 11ty và Jekyll.

1. Tạo biểu mẫu trên Getform

Bất kỳ biểu mẫu nào được tạo trên Getform đều có thể dễ dàng gửi email đến nhiều người nhận. Hãy thiết lập một biểu mẫu gửi email đến nhiều người nhận.

  • Đăng nhập vào bảng điều khiển biểu mẫu của bạn và tạo một biểu mẫu có tên “HTML Email Form”. Đây là cách trang tổng quan của bạn trông như thế nào sau khi bạn tạo biểu mẫu:
Xem Thêm  Cách thêm các biểu tượng truyền thông xã hội trong Html - cách thêm các biểu tượng mạng xã hội vào chân trang html

  • Getform tự động tạo một điểm cuối của biểu mẫu duy nhất và hiển thị một mã biểu mẫu HTML đơn giản với nó.
  • Chúng tôi sẽ thay đổi một chút HTML của mình để nó có thể sử dụng được trên mọi HTML trang. Mã mẫu dưới đây là mã biểu mẫu gồm 3 trường cơ bản; các trường tên đầy đủ, email và tin nhắn.
  • Tại thời điểm này, chúng tôi đã sẵn sàng điền vào biểu mẫu mẫu của mình để bắt đầu nhận được những nội dung gửi đầu tiên.
  • Sau khi chúng tôi điền đầy đủ thông tin và nhấp vào “Gửi”, dữ liệu của bạn sẽ tự động được gửi đến Getform và có dạng như sau:

2. Thiết lập thông báo qua email cho biểu mẫu của bạn

Chúng tôi đã nhận được thành công lần gửi đầu tiên. Nhưng biểu mẫu của chúng tôi vẫn không gửi cho chúng tôi một email. Hãy thiết lập thông báo qua email.

  • Đi tới “Cài đặt” và chọn “Thông báo”.
  • Trong phần “Thông báo qua email”, bạn có một trường văn bản mà bạn có thể nhập địa chỉ email mà bạn muốn nhận thông báo gửi. Đối với trường hợp của chúng tôi, chúng tôi đã nhập “info@getform.io” và “help@getform.io”. Nhấp vào “Lưu thay đổi” để hoàn tất bước này.

  • Hãy gửi một bài gửi khác tới biểu mẫu của chúng tôi và xem liệu các địa chỉ email này có nhận được dữ liệu gửi dưới dạng email không
  • Và quan trọng hơn, email gửi đến địa chỉ email chúng tôi. đã gia nhập!

Chúng tôi đã tạo một biểu mẫu HTML để gửi cho bạn một email với một vài cú nhấp chuột. Thật dễ dàng và miễn phí!

3. Thiết lập thông báo email tùy chỉnh

Nếu bạn muốn có toàn quyền kiểm soát email mà bạn đang gửi từ biểu mẫu HTML của mình, Getform có tùy chọn “Thông báo email tùy chỉnh”.

Sau khi bạn nhận được thành công lần gửi biểu mẫu đầu tiên, phần mẫu email tùy chỉnh của bạn sẽ có các trường email, tên và biểu mẫu tin nhắn dưới dạng các thẻ có thể nhúng. Bạn nên sử dụng dấu ngoặc kép với các trường liên quan. Ví dụ: nếu bạn có thông tin đầu vào có tên là email, bạn có thể thêm giá trị của nó bằng cách viết {{email}} vào mẫu.

Lưu ý: Nếu bạn muốn lấy tên biểu mẫu của bạn, bạn có thể nhúng {{@form_name}} vào trong mẫu của mình.

  • Khi bạn nhận được một bản gửi mới cho biểu mẫu của mình, thông báo qua email của bạn sẽ được gửi đến email đã đăng ký cùng với thiết lập mới của bạn. Mẫu email mẫu sẽ có dạng như sau:

4. Thiết lập trả lời tự động cho người gửi biểu mẫu

Tương tự như Mẫu email tùy chỉnh, bạn cũng có thể gửi email trả lời tự động cho người gửi biểu mẫu của mình bằng cách đặt email tự động trả lời.

Sau khi bạn nhận được thành công gửi biểu mẫu đầu tiên, phần mẫu email trả lời tự động của bạn sẽ có các trường email, tên và biểu mẫu tin nhắn dưới dạng thẻ có thể nhúng. Xin lưu ý rằng biểu mẫu của bạn cần phải chứa trường type = “email” để có thể nhận được địa chỉ email để gửi thư trả lời tự động.

  • Khi bạn nhận được một bản gửi mới cho biểu mẫu của mình, phản hồi tự động của bạn email sẽ được gửi đến người gửi biểu mẫu của bạn. Mẫu trả lời tự động sẽ có dạng như sau:

Tùy chọn 3 cung cấp một giải pháp dễ dàng hơn nhiều để gửi email cơ bản từ biểu mẫu HTML của bạn và cũng cung cấp cho bạn khả năng thiết lập thông báo email tùy chỉnh và trả lời tự động tùy chỉnh để giúp bạn tạo trải nghiệm biểu mẫu hoàn chỉnh.

< h2 id = "final-Thought"> Kết luận

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách dễ nhất để gửi email từ biểu mẫu HTML. Nếu bạn thích bài viết này, vui lòng chia sẻ và theo dõi chúng tôi trên Facebook Twitter để biết thêm thông tin cập nhật từ blog của chúng tôi.

Xem Thêm  HTML - Thẻ meta - thêm thẻ meta trong html

Sẵn sàng để bắt đầu?

Hãy bắt đầu bằng cách tạo biểu mẫu đầu tiên của bạn và gửi email đến nhiều người nhận chỉ với vài cú nhấp chuột.

Cảm ơn bạn đã đọc ! Chúng tôi tiếp tục nâng cao Getform bằng cách lắng nghe bạn, để lại cho chúng tôi các yêu cầu về tính năng của bạn tại https://getform.nolt.io hoặc bỏ phiếu cho các yêu cầu hiện có.

Hãy xem của chúng tôi Trang Codepen , trang Codesandbox, trang Github Tài liệu để biết thêm thông tin và mẫu.

Mertcan from Getform
Nền tảng phụ trợ biểu mẫu dành cho các nhà thiết kế và nhà phát triển


Xem thêm những thông tin liên quan đến chủ đề gửi email dạng html

HTML Form to Mail | Create Full Functional HTML Form Without Any Back-end

alt

  • Tác giả: WEB CIFAR
  • Ngày đăng: 2020-08-14
  • Đánh giá: 4 ⭐ ( 7597 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This is the day-19 of 30days30submits. Today we are going to make a fully functional html form without any back-end. Hope you will like it.

    🔔subscribe and turn on the notification bell.
    👉 Formspree: https://formspree.io/
    👉 source code: https://codepen.io/Web_Cifar/pen/gOrrPpO
    👉 30days30submits : https://github.com/ShaifArfan/30days30submits

    ✨ Like our works and want to support us? 🚀
    We’d really appreciate a coffee: https://www.buymeacoffee.com/shaifarfan08

    ▶ Also Watch :
    Make a full website with HTML & CSS: https://youtu.be/ZFQkb26UD1Y
    HTML & CSS Landing Page : https://youtu.be/6SCV-JXNvXI
    Mini Project for HTML & CSS : https://youtu.be/7ylX8R0RENo
    How To Make A WordPress website: https://youtu.be/DtHDhDJYOfA

    🌐 Join The Community :
    Our website : https://webcifar.com/
    Facebook Page : https://facebook.com/webcifar
    Facebook group : http://bit.ly/fb-group-webcifar
    Instagram : https://www.instagram.com/web_cifar/
    twitter : https://twitter.com/webcifar
    Github: https://github.com/WebCifar

    30days30submits form htmlForm

HTML, Văn bản thuần túy và Văn bản có dạng thức

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

Email Link trong HTML

  • Tác giả: hoclaptrinh.vn
  • Đánh giá: 5 ⭐ ( 7185 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Email Link trong HTML. Không khó để đặt một Email Link trong HTML trên trang web của bạn nhưng điều này có thể gây ra các vấn đề về spam cho tài khoản email của bạn. Có một số người có thể chạy các chương trình để thu thập các email này và sau đó sử dụng chúng để spam theo các cách khác nhau.

Cách gửi email dạng HTML

  • Tác giả: quynap.com
  • Đánh giá: 3 ⭐ ( 9234 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có thể thay đổi định dạng của một thư khi bạn trả lời hoặc chuyển tiếp nó. Ví dụ, nếu ai đó gửi cho bạn …

Gửi mail với Python

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 3142 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn cần gì để gửi email với Python? Chỉ một chút kiến thức lập trình web sử dụng Python cơ bản. Hướng dẫn này sẽ hướng dẫn bạn qua các bước cần thiết nhất để gửi email qua máy chủ SMTP: * Cấu hình một…

Thay đổi định dạng thư thành HTML, Văn bản có Định dạng hay văn bản thuần

  • Tác giả: support.microsoft.com
  • Đánh giá: 4 ⭐ ( 7036 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chuyển định dạng của email, mà định dạng này kiểm soát các tùy chọn định dạng sẵn dùng chẳng hạn như màu, phông và bảng.

Gửi email định dạng HTML có attachment

  • Tác giả: www.ddth.com
  • Đánh giá: 3 ⭐ ( 8754 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hi all,
    Vấn đề chung của khá nhiều lập trình viên PHP là làm sao send email HTML và có attachment (đính kèm) cộng với BCC, header và vân vân.
    Richard Heyes viết ra công cụ rất hữu ích sau:
    http://www.phpguru.org/static/mime.mail.html
    Bài này viết dựa trên HTMLMimeMail5, tuy nhiên vẫn có bản tương thích PHP4 trên site đó.
    Cách sử dụng của nó khá đơn giả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

By ads_php