Bạn đang xem : định dạng 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  13 cách căn giữa các phần tử HTML theo chiều dọc với CSS - căn giữa theo chiều dọc css

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 tạo và lưu trang của bạn, 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. Mã sau là những thứ cần thiết cho một 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;
 

Vì điều này tương tự như cách viết 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 đặt hình nền trong HTML - hình ảnh dưới dạng html nền

  • 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.

Xem Thêm  Căn chỉnh theo chiều dọc CSS - Cách căn giữa một Div, Văn bản hoặc Hình ảnh [Mã ví dụ] - căn giữa một div theo chiều dọc

< 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.

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ủ đề định dạng email html

How To Embed HTML in GMAIL Email | HTML Email Campaign Guide [2021]

alt

  • Tác giả: Stewart Gauld
  • Ngày đăng: 2021-02-26
  • Đánh giá: 4 ⭐ ( 6198 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hey team, today I share how you can embed an HTML template or campaign in Gmail.

    This video is for individuals that have an email campaign/template that has been created in HTML and want to add and send this as an email campaign from Gmail.

    ► Are you interested in joining our small business community?
    Join us to receive actionable tips, tutorials and tools to grow your small business online (Subscribe to our email list here): https://mailchi.mp/71ac3fcdbfdf/stewart-gauld

    Let me know if you found this HTML email tutorial helpful. Also, if you have any questions make sure to drop them down below.

    Thanks for watching and enjoy!

    html gmail

Email HTML: Hướng dẫn tạo template đơn giản chỉ trong 4 bước

  • Tác giả: gtvseo.com
  • Đánh giá: 3 ⭐ ( 6913 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách tạo HTML Email để ai dù không có kinh nghiệm hay không rành về code thì vẫn làm được với Template có sẵn.

[Email HTML là gì?] Có nên dùng Email HTML thay cho dạng văn bản?

  • Tác giả: timviec365.vn
  • Đánh giá: 5 ⭐ ( 6553 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu như bạn đã quen thuộc với Email dạng văn bản, bạn có thể rất thắc mắc về Email HTML là gì? Tìm hiểu khái niệm và ưu nhược điểm của Email HTML nhé!

Xây dựng một Template Email bằng HTML từ đầu

  • Tác giả: webdesign.tutsplus.com
  • Đánh giá: 5 ⭐ ( 6425 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách tốt nhất để hiểu quá trình bất kỳ là tự mình thực hiện nó, từ đầu đến cuối. Hôm nay, chúng ta sẽ làm điều đó với thiết kế email, bằng cách xây dựng một template email HTML từ đầu. Nguyên liệu…

One moment, please…

  • Tác giả: blogit.vn
  • Đánh giá: 5 ⭐ ( 6389 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

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á: 5 ⭐ ( 8752 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.

Chia sẻ code kiểm tra định dạng email cực kỳ đơn giản

  • Tác giả: suntech.edu.vn
  • Đánh giá: 3 ⭐ ( 4350 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Code Javascript kiểm tra format email – Validate email với Javascript

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