"Thiết lập email nhận, trả lời tự động và thông báo với JotForm"

(Traidatmui.com) – Trước đây mình đã hướng dẫn các bước cơ bản để tạo một form liên hệ với JotForm, tuy nhiên mình chỉ dừng lại ở chỗ hình thành nên các trường của form chưa đề cập đến việc hoạt động của form. Và cũng có một số bạn hỏi mình về vấn đề này nhưng chưa có dịp giải đáp, hôm nay xin chia sẻ cùng các bạn vấn đề này. Vấn đề hoạt động của form là làm thế nào để nhận được những thông tin của người dùng nhập vào form qua email của mình, làm sao để tạo tính năng trả lời tự động đến mail người dùng và làm thế nào để hiển thị thông báo gửi thành công khi người dùng đã gửi thông tin. Và bài viết này mình sẽ hướng dẫn các bạn cách tạo nó, nếu bạn chưa biết cách tạo các trường của form có thể xem lại tại đây, ở đây mình xem như các bạn đã hoàn tất hình thức của form.

Như các bạn biết giao diện thiết kế Form sẽ như thế này, tại đây bạn chọn mục Setup & Embed.

A. Thiết lập email nhận thông tin và tự động trả lời tới email người dùng

Thiết lập email nhận thông tin

Để thiết lập email nhận thông tin mà người dùng nhập vào form bạn chọn Email Alerts và chọn Add new Email.
Một cửa sổ lightbox hiện ra, bạn chọn Notification Email và chọn Next để đi tiếp
Đến bước này chúng ta sẽ thiết lập email nhận và thông tin người dùng mà bạn muốn thấy trong email. Ở phần Sender name bạn chọn trường Họ và tên, Sender E-mail chọn trường địa chỉ email và phần Recipient E-mail phía dưới là email mà bạn muốn nhận thông tin của form này. Xong bạn nhấn Next.
Đến đây là bước thiết lập hình thức trình bày nội dung mà bạn muốn nhận trong email của mình. Hình thức mặc định của JotForm như bên dưới
Bây giờ chúng ta sẽ thiết kế lại. Tại đây bạn chọn HTML, nếu bạn thành thạo HTML thì có thể tự thiết kế cho mình hoặc bạn có thể copy và dán code mình thiết lập bên dưới vào HTML Source Editor sau đó chọn Update

<div style="background: #ccc; border: 1px solid #ccc;">
<table border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#fdfa9d">
<tbody>
<tr>
<td style="border-bottom: 1px dashed #333; padding: 4px ! important; text-align: center;" width="170" bgcolor="#fac904"><span style=" "><strong>Nội i dung bạn {hoVa} gửi</strong></span></td>
</tr>
<tr>
<td style="padding: 5px ! important;" width="170">
<p><span >Họ và tên: {hoVa}<br /></span></p>
<p><span style="font-size: 12px;">Địa chỉ email: {diaChi9}<br /></span></p>
<p><span >Địa chỉ web/blog: {diaChi}<br /></span></p>
<p><span style="font-size: 12px;">Chủ đề: {chuD}<br /></span></p>
<p><span >Nội dung: {niDung}<br /></span></p>
</td>
</tr>
</tbody>
</table>
</div>

Kết quả sẽ như hình bên dưới, bạn có thể thiết kế lại theo ý thích của mình. Xong chọn Finish.
Lưu ý: Mỗi form tên trường sẽ khác, bạn thay thế tên trường cho phù hợp. Tên trường của bạn phải chính xác thì bạn mới có thể nhận được thông tin của trường đó, đối với tên trường bạn hãy click vào tên trường ở khung Form Fields.

Thiết lập nội dung tra lời tự động

Cũng giống như trên sau khi bạn chọn Add new Email, bạn chọn Autoresponder Email.
Bây giờ chúng ta thiết lập ngược lại với trên vì bây giờ chúng ta sẽ là người gửi bạn thiết lập như ảnh bên dưới. Xong chọn Next để tiếp tục
Đến đây cũng giống như bạn thiết kế hình thức nhận mail ở trên, bước này bạn tự thiết kế nhé, xong bạn chọn Finish để hoàn tất

B. Tạo thông báo gửi thành công

Sau khi bạn chọn Setup & Embed, bạn chọn tiếp Thank You, hộp lightbox hiện ra, tại đây sẽ có 3 tùy chọn.
- Default Thank You page: Đây là trang thông báo mặc định của JotForm
- Custom URL: Đây là đường dẫn trang mà bạn muốn redirect tới sau khi người dùng gửi thông tin.
- Thank You message: Phần này là phần bạn tự quyền quyết định mẫu thông báo và nó sẽ hiển thị ngay trên trang bạn đặt Form. Mình sẽ hướng dẫn bạn làm phần này, bạn chọn mục này sau đó chọn Next để tiếp tục.
Nó cũng hiện ra các công cụ giúp bạn thiết kế nội dung của thông báo, bạn vẫn có thể sử dụng và chỉnh sửa mã HTML theo ý bạn như đã hướng dẫn ở trên. Phần này tùy theo ý thích của mỗi người bạn hãy tự thiết kế cho mình nhe.
Bạn yên tâm không cần phải lấy code nhúng lại vào blog nữa, mọi thay đổi sẽ được cập nhật ngay trong blog của bạn.

Địa chỉ bài viết: http://www.traidatmui.com/2010/02/internet.html#ixzz2YBBNUsz6
Nguồn: TRAIDATMUI.com