Thứ Tư, 26 tháng 3, 2014

Tạo trang liên lạc (Contact us) và nhúng vào web/blog dễ dàng với JotForm


Tôi có một cái máy quay phim, một cái máy chụp hình, một cái máy nghe nhạc mp3. Tất cả được tích hợp trong cái điện thoại…cùi bắp ! Hehe. Pin nó yếu xìu, cứ nói chuyện là pin xuống trầm trọng, đôi khi chưa kịp nghe là tắt nguồn cái bụp ! Giờ chỉ dùng được để…nhắn tin mà thôi, tức điên người ! Nhiều lúc đang nói chuyện bỗng dưng chả nghe gì, tưởng đầu dây bên kia không nói nên mình cố sức “Alo, alo, có nghe gì không, alo, alo…” -> nhìn lại thì thấy cái điện thoại tối thui, nó đã tắt nguồn từ lâu -> làm tôi bị chửi là đồ…bất lịch sự mấy lần luôn : “Sao tự nhiên đang nói chuyện mà mày cắt cái bụp vậy ?”. Không biết LG có bán pin cho dòng LG CU920 không nhỉ ?

Nãy giờ tôi đã xài thử qua JotForm, nó là một công cụ chạy trên nền web, giúp bạn tạo ra các form liên lạc và nhúng vào trang web hay các blog như WordPress, Blogger, Joomla, TypePad…v…v…Nếu bạn không muốn nhúng cũng được, nó sẽ cho bạn một đường link trực tiếp đến form Contact của bạn.

JotForm - Tao form lien lac Contact us de dang

Hồi trước, có nhiều bạn hỏi tôi làm cách nào để liên lạc, tôi cho địa chỉ email và giờ cái địa chỉ mail đó nhận được quá trời…spam luôn, hichic. Chính vì vậy mà hôm nay tôi tìm cách tạo ra một trang liên lạc như hình minh họa bên dưới, nó giúp bạn liên lạc với quản trị của blog một cách dễ dàng. Đồng thời cho phép bạn gửi luôn file đính kèm, người quản trị web sẽ nhận được email thông báo chứa toàn bộ nội dung mà bạn gửi cho họ.


JotForm là dịch vụ tôi muốn giới thiệu. Ngoài việc tạo ra trang liên lạc Contact Us như tôi nói bên trên, nó còn có thể tạo ra trang upload lên dropbox. Tức là người ta sẽ gửi cho bạn 1 file bằng cách upload file đó lên tài khoản dropbox của bạn. Bài viết này chỉ giới thiệu bạn cách tạo một form liên lạc giữa người quản trị web/blog và khách.

- Trước tiên bạn phải tạo một tài khoản tại JotForm bằng cách truy cập vào địa chỉ : http://www.jotform.com/signup/

- Nhập đầy đủ các thông tin. Quan trọng là địa chỉ email, đây chính là địa chỉ email sẽ mà JotForm báo mỗi khi có ai đó liên lạc với bạn. Xong bấm nút “Create my account”.

- Nếu không có lỗi, trang hiện ra thông báo đăng ký thành công, bấm nút “Start Creating form” để bắt đầu thiết kế giao diện.

- Để cho dễ làm quen, bạn có thể sử dụng các mẫu có sẵn. Từ giao diện hiện ra, bạn chọn thẻ “Form style” và chọn nút “Themes” trên thanh công cụ. Danh sách các mẫu có sẵn hiện ra, thích mẫu nào, nhấp đúp chuột vào đó là xong.

- Bạn có thể thay đổi font chữ, màu chữ và màu nền của form bằng cách bấm vào các biểu tượng tương ứng trên thanh công cụ.

JotForm - Tao form lien lac Contact us de dang

- Sau khi có được form rồi, nếu không ưng ý chỗ nào đó, bạn có thể xóa nó đi bằn cách nhấn chuột vào nó và chọn biểu tượng dấu “X” ở góc trên bên phải để tắt máy giùm. Để thêm mới một control vào form, đơn giản là bạn chỉ việc “nắm đầu” nó ở cột bên tay trái và thả nó vào form ở vị trí chỉ định là được.

- Bận nhấp đúp chuột vào các lable để gõ lại tiếng Việt cho phù hợp. Với từng loại mà trên thanh công cụ sẽ có những chức năng riêng.

- Để ép nhập một trường nào đó, bạn bấm chuột vào nó và bấm chuột vào nút “Required”. Nếu muốn chỉnh kích thước thì bấm nút Size và chọn kích thước phù hợp. Nếu bạn muốn làm cho nó chỉ nhập số hoặc chỉ nhập email hợp lệ thì bấm nút “Validation” và chọn kiểu kiểm tra dữ liệu.

JotForm - Tao form lien lac Contact us de dang

- Nếu bạn muốn người dùng có khả năng gửi file cho bạn xem thì từ cột bên trái, kéo cái control tên là “File upload”

JotForm - Tao form lien lac Contact us de dang

- Với một số control, bạn không thể nhấp đúp vào nó để đổi lại tên, ví dụ như nút Submit. Bạn phải chọn nó, bấm vào biểu tượng Settings kế nút “X”, chọn “Show Properties” và chỉnh lại ở cửa sổ hiện ra.

JotForm - Tao form lien lac Contact us de dang

- Giả sử bạn đã hoàn tất form và đã nhúng vào trong blog. Khi người dùng nhập đầy đủ các thông tin và bấm nút Send, thông tin sẽ được gửi đi và JotForm sẽ cho hiện ra trang Cám ơn với nội dung mặc định là tiếng Anh. Bạn có thể sửa lại trang này cho phù hợp với mình bằng cách chọn thẻ “Setup and Embed” > bấm vào nút “Thank you” và đợi một lát cho đến khi hộp thoại sau xuất hiện

JotForm - Tao form lien lac Contact us de dang

Lựa chọn đầu tiên là hiển thị trang mặc định của JotForm. Tùy chọn thứ 2 (Custom URL) sẽ cho bạn cấu hình chuyển tới một địa chỉ web nào đó). Tùy chọn thứ 3 (Thank you message) cho phép bạn thay đổi nội dung trang Cám ơn. Tôi chọn tùy chọn thứ 3.

- Để đề phòng thông điệp rác, bạn có thể thêm vào form này tính năng nhập dãy số bảo mật (được gọi là Captcha). Từ menu bên tay trái, bạn chọn thẻ “Power tools” > kéo biểu tượng Captcha và thả vào chỗ thích hợp trên form.

JotForm - Tao form lien lac Contact us de dang

- Vậy là xong. Giờ để nhúng vào blog hay website, bạn chọn thẻ “Setup and Embed” > bấm vào biểu tượng “Embed form” > chờ trang hiện ra bạn bấm vào biểu tượng của ứng dụng tương ứng muốn nhúng vào, chương trình sẽ tạo ra một đoạn mã nhúng và hướng dẫn bạn cách nhúng như sau :

JotForm - Tao form lien lac Contact us de dang

Phần “Your form is here!” chính là địa chỉ trực tiếp của cái form bạn đang tạo. Để cho dễ nhớ, bạn có thể tạo cho nó một cái tên thay cho một dãy số ngoằn nghèo, ví dụ của tôi sẽ là : http://www.jotform.com/anhhangxomonline. Để làm được như vậy, bạn bấm chuột vào biểu tượng nhỏ kế bên và gõ tên mong muốn vào đó là được.

Trường hợp của tôi muốn nhúng nó vào WordPress nên tôi sẽ bấm vào biểu tượng của WordPress, nó sẽ hiện ra đoạn mã nhúng như sau :

JotForm - Tao form lien lac Contact us de dang

Tôi chỉ cần copy đoạn mã đó và paste vào trang “Contact me” trên blog là xong. Giao diện sau khi nhúng bạn có thể xem ở trang Contact me hoặc cái hình minh họa ở đầu bài viết. Vậy là xong.

[Cập nhật] : Để nhận được email thông báo khi có người gửi thông tin, bạn đăng nhập vào tài khoản của mình và mở cái form Contact mà mình đã tạo ra : 

JotForm - Tao form lien lac Contact us de dang

Trang chỉnh sửa hiện ra, bạn bấm vào biểu tượng “Email Alert” và bấm nút “Add new mailL” :

JotForm - Tao form lien lac Contact us de dang

Hộp thoại hiện ra chọn “Notification email” và bấm Next.

JotForm - Tao form lien lac Contact us de dang

Hộp thoại hiện ra, điền địa chỉ email của bạn vào ô “Recipient Email”. Phần “Sender name” và “Sender email” bạn bấm chuột để chọn các trường tương ứng, bấm Next để hoàn tất.

JotForm - Tao form lien lac Contact us de dang 

Nguồn từ: http://anhhangxomonline.net/2011/03/tao-trang-lien-lac-contact-us-va-nhung-vao-webblog-de-dang-voi-jotform/
Thích Thì Click Ngay :

1 nhận xét:

  1. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa

Nếu bạn có ý kiến, hãy viết một nhận xét cho bài viết này! Cảm ơn!