"Hướng dẫn tạo Form cho web/blog với JotForm"

(Traidatmui.com) – Theo yêu cầu của bạn Hà Ngọc Tú, hôm nay mình chia sẻ cùng các bạn cách tạo Form với jotform để có thể sử dụng form làm form liên hệ hay một số mục đích khác trên blog hay web. Với jotform thì bạn có thể nhanh chóng tạo được Form theo phong cách của mình và việc quản lý form cũng rất thuận tiện, bạn có thể dễ dàng thay đổi thông tin ngay khi form đã được thiết kế xong, mọi thông tin thay đổi sẽ được tự động cập nhật. Việc tạo Form này sẽ không quá khó nếu bạn hiểu được một số công cụ của nó, để có thể tạo form riêng cho mình bạn hãy vào đây để tạo cho mình một tài khoản riêng ở Jotform.
Sau khi đã đăng ký xong tài khoản bạn hãy đăng nhập vào tài khoản của mình để bắt đầu tạo Form. Trước khi bắt đầu tạo form mình giới thiệu đến các bạn một số công cụ và thuộc tính cơ bản của jotform để bạn dễ làm việc hơn.

A. Giới thiệu về các thuộc tính Form

I. Form Style
Đây là phần bạn sẽ có thể tùy chỉnh thuộc tính của Form như Themes, Font, Background, Width...
- Themes: Bạn có thể chọn một số giao diện có sẳn cho form
- Font: Bạn có thể chọn font chữ (Times, arial..), cỡ chữ (Font size)hay màu chữ (Font color) cho Form.
- Background: Màu nền của form
- Form Width: bạn có thể chọn độ rộng của Form phù hợp với blog bạn
- Label Width hay Label Align: là độ rộng và canh lề cho các tiêu đề của các điều khiển trong form như tiêu đề textbox, tiêu đề checkbox...

II. Setup & Embed
- Email Elerts: Ở đây bạn có thể chọn email nhận tin thông báo (Notification email) từ Jotform hay thiết lập nội dung trả lời tự động khi có người sử dụng form để gửi thông tin đến bạn.
- Thank you: Đây là phần bạn có thể thiết lập lời cảm ơn hay thông báo hiển thị sau khi người dùng đã gửi thông tin đến bạn.
- Embed Form và Source code: Đây là bước cuối cùng sau khi bạn thiết lập xong form của bạn, ở đây bạn có thể lấy code để chèn vào blog/web của bạn.
- Preferences: Bạn có thể xem và chỉnh sửa các thuộc tính Form của bạn.
- Conditions: Phần điều kiện.

III. Properties

Khi bạn click vào một điều khiển nào đó thì phần Properties sẽ hiện ra giúp bạn đặc một số thuộc tính cho điều khiển đó. Tùy vào mỗi điều khiển mà phần Properties sẽ khác nhau, cơ bản là một số thuộc tính bên dưới.
- Label Align: Canh lề cho điều khiển đó trên (top), trái (left), phải (right)
- Required: Bật (On) hay tắt (Off) tính năng bắt buộc của trường đó, nếu trường đó bạn muốn người dùng phải nhập (Không thể bỏ trống) thì bật thuộc tính này, khi được bật bạn sẽ thấy dấu (*) ở phía sau tiêu đề của trường đó.
- Size: Tùy chỉnh kích thước của khung nhập nội dung (phía sau tiêu đề của trường đó)
- Validation: Bạn quy định đặc tính của trường đó là email, số hay text..., nếu nhập sai sẽ báo lỗi.
- Default Value: Đây là giá trị mặc định của trường, nó sẽ hiển thị khi người chưa nhập nội dung.
- Sub Label: Phần này sẽ hiển thị bên dưới trường, mang tính chất hướng dẫn nhập nội dung của trường đó.
- Hint Example: Phần gợi ý cho trường đó.
- Hover Text: Là phần mô tả về trường đó, nó sẽ xuất hiện khi người dùng rê chuột vào trường đó.

IV. Các điều khiển (Cột bên trái)

- Heading: Đặc tiêu đề của Form
- Text Box: Tạo ô văn bản như họ và tên, địa chỉ...
- Text Area: Đây là vùng để bạn cho phép người dùng để lại nội dung trong form
- Drop Down: Là một danh sách tùy chọn thả xuống được thiết kế sẵn, nếu bạn muốn người dùng chọn từ list thì bạn có thể sử dụng điều khiển này.
- Radio Button và Check Box: Cả 2 có tác dụng như nhau giúp người dùng chọn 1 trong các tùy chọn được thiết lập sẵn, chúng chỉ khác nhau về hình thức.
- File Upload: Nếu bạn muốn người dùng đính kèm file cho bạn thì bạn có thể sử dụng điều khiển này.
- Submit Form: Nút này để người dùng gửi tính đến bạn sau khi họ nhập xong nội dung.

Đó là một số điều khiển cơ bản để tạo Form, ngoài ra còn một số điều khiển khác ở phần Quick Tools, Survey Tools, Power Tools, Payment Tools mình không giới thiệu ở đây, bạn tự tìm hiểu thêm nhe, nếu không hiểu có thể để lại comment bên dưới mình sẽ giúp bạn.

B. Các thao tác thực hiện

Để tạo ra các trường của Form thì bạn chỉ việc kéo và thả các điều khiển ở cột bên trái vào vùng trắng bên phải, và tùy chỉnh lại tiêu đề (Nhấp đôi vào tiêu đề để chỉnh sửa) hay thuộc tính của chúng. bạn xem phần Properties ở trên để tùy chỉnh lại cho phù hợp. Ở mỗi điều khiển thì bạn có thể đặt thuộc tính của nó nhanh bằng cách click vào biểu tượng cài đặt bên phải hoặc nếu muốn xóa bỏ điiều khiển hay trường đó thì bạn click dấu chéo màu đỏ bên phải (x).
Ngoài ra ở phần nút Submit Form bạn cũng có thể thêm các nút Clear Form (Xóa nhập lại), Print Form (In Form) bằng cách chọn vào điều khiển Submit Botton trong phần thiết kế và nhấn nút Reset Button Print Button ở phần Properties của chúng.
Sau khi đã thiết kế xong bạn chọn Setup & Embed hay Source code để lấy mã chèn vào web hay blog của mình là xong.
Hình ảnh minh họa kết quả
Ở trên mình chỉ giúp bạn những bước cơ bản để tạo Form, còn để hiểu rỏ hơn thì rất dài, bạn có thể tự tìm hiểu thêm một số thuộc tính khác, nếu có thắc mắc vui lòng để lại nhận xét bên dưới mình sẽ giải đáp giúp bạn.

Chúc bạn thành công

Xem khác cùng chủ đề

17 nhận xét | Viết lời bình

5/07/2011 04:55:00 CH Trả lời

cám ơn bạn nhiều nha, đây là thành quả của mình : http://nhomgiotsang.blogspot.com/2010/05/gui-bai.html

Admin
5/07/2011 05:50:00 CH Trả lời

z chúc mừng bạn nhé! votay

5/08/2011 08:41:00 CH Trả lời

có nhiều dịch vụ khác cũng có chức năng tương tự nhưng được vài hôm thì đặt quảng cáo hoặc giới hạn số lượng gửi. Dịch vụ này thì sao !!!?

Admin
5/08/2011 09:25:00 CH Trả lời

Theo mình thấy thì dịch vụ này cũng khá tốt và không có quảng cáo đâu bạn.

Nặc danh
6/18/2011 02:53:00 SA Trả lời

admin send cho mình cái code menu ngang dưới baner của bạn được không . thank ! máil : anhnt157@yahoo.com

Admin
6/18/2011 09:13:00 CH Trả lời

Xin lỗi bạn những comment nặc danh mình sẽ không trả lời hay đáp ứng. Nếu bạn thật sự cần giúp đỡ vui lòng comment với tên họ hoặc nickname rỏ ràng. =})

8/07/2011 06:10:00 SA Trả lời

Đang cần cái này. Để làm thử xem. Cảm ơn bạn nhé

8/07/2011 07:40:00 SA Trả lời

Mình đã làm xong. Rất là ok. Không khó khăn mấy!
Đây là thành quả
http://lamgiautuforex.blogspot.com/2011/07/huong-dan-mo-tai-khoan-tai-san-giao_01.html
Cảm ơn Trai Đất Mũi rất nhiều.
Chúc thành công và chia sẻ nhiều thủ thuật hay!

11/13/2012 07:28:00 CH Trả lời

bạn cho mình hỏi sao lúc ghi chữ nó cứ nhảy lung tung từ tiếng việt sang tiếng anh rồi lại ra khác nghĩa bạn chỉ dùm mình cách khắc phục nha!
và mình muốn up nó lên website củ mình thì phải làm sao?
bạn chỉ hộ dùm mình cái!
cảm ơn bạn trước nha!

11/13/2012 07:31:00 CH Trả lời

bạn cho mình hỏi sao lúc ghi chữ nó cứ nhảy lung tung từ tiếng việt sang tiếng anh rồi lại ra sai nghĩa, và mình muốn up lên website của mình thì phải làm sao?
bạn làm ơn chỉ hộ mình nha!
cảm ơn bạn trước.

Admin
11/13/2012 08:37:00 CH Trả lời

Cái đấy có thể do trình duyệt bạn tự động Translate thôi chứ nếu không thì làm sau nó dịch được bạn. Còn việc nhúng vào web thì mình đã có hướng dẫn ở trên là bạn vào Embed Form sau đó lấy code chèn vào tiện ích HTML là được thôi bạn ah

11/14/2012 01:18:00 SA Trả lời

mình xem lại rồi cảm ơn bạn nha!

Nặc danh
3/07/2013 09:35:00 CH Trả lời

k-e

6/17/2013 02:58:00 SA Trả lời

bạn ơi jotform của mình toàn tiếng pháp làm sao để đổi thành tiếng anh :( giúp mình với

Admin
6/18/2013 05:26:00 SA Trả lời

Ở cuối trang góc phải có mục chọn ngôn ngữ đấy bạn

2/28/2014 07:48:00 CH Trả lời

làm sao để khi đánh chữ vào các ô thì thành dạng *** zậy ai chỉ với

3/28/2016 08:15:00 SA Trả lời

vậy làm phần đăng nhập cho thành viên như thế nào hả anh? chỉ em với nhé...

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang