tháng 2 2017



Theo yêu cầu của nhiều bạn yêu thiết kế , 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.
DEMO1        DEMO2
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 và 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ả

Xem video hướng dẫn bên dưới

     Nguồn: traidatmui.com
     Chúc các bạn thành công!


      Chào các bạn, trước đây mình có giới thiệu các bạn phần tạo Form liên hệ bằng Google Drive. Đây là bài viết mình sưu tầm được, nhưng do chưa thực hành nên mình không biết là nó còn nhiều điều thiếu sót. Nay mình xin hướng dẫn lại cách tạo Form liên hệ bán hàng (hay thư khảo sát đối với trang web của mình), tại vì tùy theo mục đích sử dụng khác nhau nên mới có tên gọi khác nhau ấy. Hy vọng các bạn để ý:

Bước 1: Tạo mẫu và thiết lập mẫu
      - Đăng nhập vào Google Drive

      - Vào Mới/ Ứng dụng khác/Google biểu mẫu: mục 1, 2, 3

      - Mục 4: bạn viết tiêu đề câu hỏi vào đây
      - Mục 5: bạn lựa cho loại câu trả lời cho tiêu đề của bạn
      - Mục 6: thêm câu hỏi mới

Bước 2: Gửi biểu mẫu và nhúng
      - Mục 7: chọn màu nền cho mẫu
      - Mục 8: cài đặt cho mẫu
      - Mục 9: khi chọn gửi sẽ xuất hiện hộp thoại gửi biểu mẫu
      - Mục 10: lick vào đây nếu muốn thu thập tên người dùng
      - Mục 11: nhập địa chỉ mail mà bạn sẽ nhận được khi có người khảo sát đánh giá mẫu
      - Mục 12: tên tiêu đề cho mail mà bạn sẽ nhận được
      - Mục 13: bạn có thể xem mẫu khi đi đên liên kết này
      - Mục 14: đây là đoạn code HTML mà bạn sẽ nhúng vào trang web của bạn, bằng cách tạo 1 trang mới trên trang web, sau đó vào HTML và past đoạn code này vào.
      - Mục 15: gửi mẫu

Bước 3: Đặt tên cho mẫu (click vào mục 16 để đặt tên)

Bước 4: Liên kết bảng tính
      - Bạn click vào mục 17

      - Chọn “tạo bảng tính” mới mục 18
      - Sau đó nhấn tạo mục 19

Bước 5: Xem kết quả đánh giá, lúc này bạn chỉ cần click vào bảng tính như ở mục 17 là bạn đã có thể xem ai đã đánh giá mẫu cho bạn và đánh giá như thế nào.


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

[right-post]
chia-cot-bai-viet
Chia cột cho bài viết là một thủ thuật nhỏ giúp bạn trình bày các định dạng bảng biểu, sắp xếp hình ảnh tốt hơn và đẹp mắt hơn và chứa được nhiều thông tin hơn trong một bài viết trên blog của bạn.
 Trong trường hợp bạn muốn thể hiện rất nhiều nội dung trên một trang thì thủ thuật này thực sự hữu ích.


Sau đây tôi xin giới thiệu hai cách đơn giản để chia cột một bài viết như sau:

Cách 1: Đơn giản nhất, ai cũng làm được

     1. Mở trình soạn thảo văn bản Word trên máy tính của bạn.
     2. Chèn một bảng trống với số cột của bảng bằng với số cột mà bạn muốn chia ở bài viết.
    3. Chọn toàn bộ bảng (click chuột vào biểu tượng "sao" ở góc trên bên trái của bảng) và sao chép (copy) bảng rồi dán vào khung soạn thảo trên bài viết blog như thế này:
 Cột 1
 Cột 2
 Cột 3







     Bây giờ thỏa sức thể hiện thôi, nếu bạn muốn chuyên nghiệp một chút bạn thực hiện xóa dòng kẻ trước khi copy bảng và tiếp tục copy bảng trắng vào khung bài viết lúc này vẫn có các cột như sẽ không hiển thị dòng kẻ nữa:

Cột 1
Cột 2
Cột 3







Cách 2: Phức tạp hơn một chút là bạn sử dụng code HTML để làm việc này thực chất vẫn như cách trên nhưng ta không cần dùng đến bảng, tiến hành như sau:

     1. Mở một bài viết mới trên blog của bạn
     2. Chuyển chế độ soạn thảo sang HTML 
     3. Copy và dán vào khung soạn thảo HTML đoạn mã sau:
<table border="1" style="width: 600px" >
<tr>
<td style="width: 200px;text-align:left;"" valign="top"> Nội dung cột 1 </td>
<td style="width: 200px;text-align:left;"" valign="top"> Nội dung cột 2 </td>
<td style="width: 200px;text-align:left;"" valign="top"> Nội dung cột 3 </td>
</tr>
</table>
     Nếu muốn thêm cột hoặc bớt cột đi thì chỉ cần thêm hoặc xóa bỏ một đoạn mã này là được:
<td style="width: 200px;text-align:left;"" valign="top"> Nội dung cột 1 </td> 
     Bạn sẽ cần phải điều chỉnh độ rộng của cột sao cho vừa với khung bài viết của bạn tức là tổng độ rộng không vượt quá độ rộng của khung bài viết trên blog của bạn.
[right-post]

     Author box là một khung tác giả dùng để giới thiệu sơ qua tác giả. Đối với template BMAG mà mình đang sử dụng thì nó đã có sẵn rồi, nhưng lại đối với vài template khác thì không có nên hôm nay mình sẽ hướng dẫn các bạn.

     Trình tự các bước như sau:

Bước 1: Các bạn vào Blogger >> Mẫu >> Chỉnh sửa HTML >> Tìm đến thẻ:  ]]><

Bước 2: Thêm toàn bộ css sau vào trước thẻ: ]]><
123456789101112131415161718192021222324252627282930313233343536373839404142.author-box {
background:#F8F8F8;
margin-top:8px;
overflow:hidden;
border:1px solid #eee;
border-bottom:3px solid #37B8EB;
box-shadow:0 1px 3px 0 #B5B5B5;
}

.avatar-author {
float:left;
margin-right:3px;
border:1px solid #FFF;
padding:5px;
}

.info-author {
width:100%;
}

.info-author h2 {
font-size:18px;
margin:0 !important;
color:#333;
}

.author-social {
margin-top:5px;
}

.author-social a {
opacity:.7;
margin-left:2px;
}

.author-social a:hover {
opacity:1;
}

.author-social a img {
width:25px;
}
Bước 3: Thêm toàn bộ code sau vào nơi bạn muốn hiển thị (có 2 trường hợp cho bạn lựa chọn bên dưới nhé)
123456789101112131415161718<div class='author-box' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<img class='avatar-author' height='100' src='
http://www.upsieutoc.com/images/2016/08/06/13724104_10208355869508175_60606223156817640_o.jpg' width='100'/>
<div class='info-author' itemprop='description'>
<h2><i aria-hidden='true' class='fa fa-user'></i> Tác giả: <a href='https://www.facebook.com/' target='_blank'><span itemprop='name'> Tên quản trị viên <i aria-hidden='true' class='fa fa-check-circle'></i></span></a></h2>
<p>Chào mừng bạn đã đến với Blog của tôi. Website chia sẻ Thủ Thuật - Phần Mềm - Ảnh Đẹp - PSD tổng hợp, ... được cập nhật liên tục. Mong được mọi người quan tâm.</p>
</div>
<div class='author-social'>
<a href='https://www.vanthangit.tk' target='_blank' title='Website'><img alt='' src='https://lh5.googleusercontent.com/-bTOvDNpc0Dc/VLTozXJQURI/AAAAAAAAAq0/bGzWE4TNUx0/s32-no/author_site.png'/></a>
<a href='http://twitter.com/' target='_blank' title='Twitter'><img alt='' src='https://lh3.googleusercontent.com/-MI9V5yoYGkg/VLToz5h-b3I/AAAAAAAAAq4/o-axGVMet5E/s32-no/author_twitter.png'/></a>
<a href='http://facebook.com/vanthangblog' target='_blank' title='Facebook'><img alt='' src='https://lh4.googleusercontent.com/-z_Icq6321-Q/VLToxhma_pI/AAAAAAAAAqU/JzgC9MNsKqg/s32-no/author_facebook.png'/></a>
<a href='https://plus.google.com/' title='Google Plus'><img alt='' src='http://www.upsieutoc.com/images/2016/05/14/Untitled-35f472.png' target='_blank'/></a>
<a href='https://www.youtube.com' target='_blank' title='Youtube'><img alt='' src='https://lh5.googleusercontent.com/-b4Li72ENuZc/VLTo0XsqZeI/AAAAAAAAAq8/9cyjb-ud72U/s32-no/author_youtube.png'/></a>
<script src='https://apis.google.com/js/platform.js'>
{lang: 'vi'}
</script>
<div class='g-plusone' data-annotation='inline' data-width='300'></div>
</div>
</div>

   + Trường hợp 1: Bạn muốn chúng xuất hiện dưới tiêu đề thì:

      Tìm dòng
1<div class='post-header'>
      Hoặc dòng
1<div class='post-header-line-1'/>
      Và đặt đoạn code trên vào sau nó.

   + Trường hợp 2: Bạn muốn chúng xuất hiện cuối bài viết thì:

      Tìm dòng
1<div class='post-footer-line post-footer-line-1'/>
      hoặc
1<div class='post-footer-line post-footer-line-2'/>
      hoặc
1<div class='post-footer-line post-footer-line-3'/>
      Và đặt đoạn code trên vào trước nó.

Bước 4: Các bạn tùy chỉnh lại các thông số, tên và đường link đã được bôi đỏ trong phần code ở bước 3 cho phù hợp với blog của mình nhé!
Nguồn: http://www.vanthangit.com

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


TÁC GIẢ

{facebook#https://www.facebook.com/couponkhuyenmaimoingay/}

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Được tạo bởi Blogger.