Hoàng Web

Thiết kế web giá rẻ

  • Kho giao diện
  • Dịch Vụ
    • Viết bài SEO & quản trị web
    • Thiết kế website giá rẻ
    • Thiết kế website bán hàng
    • Thiết kế website WordPress
    • Viết Plugin WordPress
    • Tối ưu website WordPress
    • Sửa lỗi nâng cấp website
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Wordpress » Wordpress plugins » Tạo form liên hệ trong wordpress với Contact Form 7

Tạo form liên hệ trong wordpress với Contact Form 7

Thứ Tư, 06/08/2014 by Hoàng Quách 4 Comments

Nội dung

  • 1 Cài đặt plugin Contact Form 7
  • 2 Hướng dẫn tạo form với Contact Form 7
  • 3 Chèm form vào Post/Page
  • 4 Nhận thiết kế web bằng wordpress
    • 4.1 Thêm thuộc tính class và id cho thẻ form
    • 4.2 Thay đổi vị trí hiển thị thông báo Messsages
    • 4.3 Hướng dẫn Tạo Form Field
      • 4.3.1 Tạo captcha
  • Facebook
  • Twitter
  • Google+

Trong bài trước mình đã có hướng dẫn tạo form liên hệ trong wordpress với plugin Fast Secure Contact form. Nhìn chung nó cũng rất chuyên nghiệp và dễ sử dụng, tuy nhiên plugin này có cách bố trí phức tạp với nhiều tính năng có thể làm bối rối với những người mới sử dụng. Và hiện tại mình cũng đang sử dụng contact form của plugin này trên blog này. Nhưng có một plugin khác mình trình sẽ bầy dưới đây có giao diện đẹp mắt hơn có đầy đủ tính năng và là một giải pháp hoàn thiện.

Trong bài hôm nay mình sẽ chọn cho bạn một giải pháp tạo form chuyên nghiệp hỗ trợ nhiều ngôn ngữ (bao gồm tiếng việt) mà lại dễ dàng tùy biến, đó là plugin chuyên tạo form hoàn toàn miễn phí có tên Contact Form 7 . Plugin này hiện tại được đánh giá là plugin tạo form có khả năng tùy biến vượt trội và có thể làm được một số việc mà những plugin trả phí không làm được.

Cài đặt plugin Contact Form 7

Các bạn tiến hành cài đặt plugin Contact Form 7 như thông thường và kích hoạt để sử dụng.

Hướng dẫn tạo form với Contact Form 7

Truy cập vào menu Contact, mặc định plugin sẽ tạo sẵn 1 contact form là “Contact form 1”, để thêm form mới bạn nhấn vào Contact > Add New.

tạo form liên hệ trong wordpress với contact form 7

Trước khi tạo form, bạn tiến hành chọn ngôn ngữ sử dụng trên form, ở đây chúng ta chọn ngôn ngữ tiếng việt “Vietnamese” từ danh sách rồi nhấn nút Add New. Hoặc nếu sử dụng mặc định ngôn ngữ tiếng anh thì nhấn Add New.

Sau khi nhấn nút tạo form, bạn sẽ có được cửa sổ như sau:
sử dụng contact-form-7

Okey, để ý bên tay trái là những fields mặc định do họ tạo sẵn. Bên phải bạn sẽ nhìn thấy nút Generate Tag, bạn dùng nút này để tạo các trường mà plugin này hỗ trợ. Sau đây là cách dùng các fields:

  • Text field: trường nhập text thông thường, như tạo field nhập têm, tiêu đề liên hệ,..
  • Email: trường đặc biệt dùng để khách nhập email của họ vào. Email này sẽ được các hệ thống email hiểu rằng đây là email của người liên hệ để bạn nhấn reply nhanh chóng.
  • URL: trường dùng để nhập liên hệ.
  • Telephone Number: dùng trường này để nhập số điện thoại.
  • Number (spinbox): trường nhập số có thêm nút tăng giảm số.
  • Number (slider): trường nhập số đặc biệt có dạng slider, chọn số bằng cách kéo thả slide.
  • Date: trường chọn ngày tháng, có thể chọn theo lịch.
  • Textarea: trường dùng để nhập một đoạn text có nhiều dòng. Thích hợp để tạo nội dung liên hệ.
  • Dropdown menu: trường chọn giá trị được định sẵn từ danh sách đổ xuống.
  • Checkboxes: trường có kiểu checkbox.
  • Radio buttons: Cũng là trường đánh dấu nhưng chỉ chọn được một.
  • Quiz: trường nhập nội dung theo kiểu câu hỏi quiz
  • CAPTCHA: trường nhập mã captcha, dùng trường này để ngăn chặn spam vào form liên hệ.
  • File Upload: trường cho phép upload tập tin khi gửi liên hệ qua form.
  • Submit button: nút gửi dữ liệu form.

Có rất nhiều lựa chọn phải không, nhưng nếu bạn muốn sử dụng các kiểu trường khác thì còn có một số plugin hỗ trợ tạo thêm trường cho contact form 7 mà mình sẽ đề cập ở một số bài khác.

Để thêm 1 trường, bạn nhấn nút Generate Tag bên phải -> chọn kiểu field cần tạo, bảng chỉnh sửa field đổ ra bạn có thể thiết lập cho nó.

tạo fields trong contact form 7

Sau khi chỉnh sửa xong cho field bạn nhìn thấy 2 shortcode của field sinh ra, nhìn bên trái bạn sẽ sử dụng shortcode đó để thêm vào nội dung trường của form. Bạn nên dùng cấu trúc mặc định của field có html dạng:

<p>
<p>Tên hiển thị trường<br />
    [shortcode-cua-truong] </p>
</p>

Chú ý: Copy shortcode đầu tiên. Sử dụng cấu trúc này thì field của bạn sẽ có một cái tiêu đề nằm phía trên và phía dưới là field để nhập. Tuy vậy bạn có thể sử dụng tùy biến HTML tùy ý.

Tiếp đó, bạn cũng cần copy field trong khung màu xanh lá cây bỏ vào khung Message Body của khung mail phía bên dưới. Đây là nội dung email bạn nhận được khi có khách hàng gửi liên hệ, nếu ban không copy vào nội dung khung này thì bạn sẽ không thể thấy nội dung của field đó mà khách hàng nhập.

Tạo form chuyên nghiệp với Contact Form 7

Sau khi chỉnh xong đừng quên nhấn Save để lưu lại nhé.

Chèm form vào Post/Page

Sau khi nhấn Save bạn nhìn thấy một shortcode của form được sinh ra , copy nội dung shortcode này và đặt vào trong post/page nơi bạn muốn form hiển thị .
tạo contact form 7 chuyên nghiệp

Nhận thiết kế web bằng wordpress

Chuyên cung cấp dịch vụ thiết kế WebSite đẹp, Thân Thiện, Chuẩn SEO, Giá Cực Rẻ. Liên hệ ngay với chúng tôi để được tư vấn và hỗ trợ miễn phí. Phục vụ 24/7.

Copy vào nội dung post/page:
chèn form liên hệ trong wordpress

Kết quả nhận được:
Chèn contact form 7 trong wordpress

Bạn có thể sử dụng form này ở bất kỳ việc gì bạn muốn.

Thêm thuộc tính class và id cho thẻ form

Bạn có thể thêm thuộc tính ‘id’ và ‘class’ cho form bằng cách thêm thuộc tính html_id và html_class vào shortcode [ contact-form-7 ].
Ví dụ:

[ contact-form-7 id="1234" title="Contact form 1" html_id="contact-form-1234" html_class="form contact-form" ]

Thay đổi vị trí hiển thị thông báo Messsages

Thông báo trả về của form
Mặc định sau khi nhấn nút submit form, nội dung thông báo trả về của form được hiển thị bên dưới phần nội dung form.
wpcf7-ajax-response-msg
Bạn có thể di chuyển thông báo này ở bất kỳ vị trí nào bằng cách đặt shortcode [ response ] trong form template. Bạn được phép sử dụng nhiều lần ở nhiều vị trí trùng lặp đều hiển thị chung nội dung messages.
Ví dụ:

[response]

Your Name (required)
[ text* your-name ]

Subject
[ text your-subject ]

Your Message
[textarea your-message]

[response]

[submit "Send"]

Thông báo lỗi validation yêu cầu cho trường form (require)
Xem hướng dẫn này: Tùy biến thông báo lỗi validation – Contact Form 7

Hướng dẫn Tạo Form Field

Bạn sử dụng gợi ý template tag bên phải, chúng ta có thể tạo rất nhiều nhóm trường form khác nhau như: text (Text field,Email field,URL field,Telephone number field,Textarea), Number field..(xem chi tiết tại đây). Nhưng có điểm đáng chú ý là cách thêm thuộc tính cho thẻ HTML. Bạn sử dụng cấu trúc “thuoc-tinh:gia-tri-thuoc-tinh”. VD: mình thêm id và class cho input text.

[ text sanpham id:sanpham class:class1 ]

Trừ thuộc tính số gồm ‘size’ và ‘maxlength’ theo thứ tự này mỗi giá trị thuộc tính ngăn bởi dấu ‘/’, ví dụ:

[ text name 10/100 ] =>size="10" maxlength="100"
[ text name 10/ ]   =>size="10"
[ text name /100 ] =>maxlength="100"

– Thiết lập giá trị mặc định cho field.

[ text name "gia tri mac dinh" ]

Ví dụ tạo các option cho thẻ select.
[ code lang=”plain”]
[select YOUR_VALUE id:YOUR_VALUE
“1”
“2”
“3”
]
[/code]
Sử dụng thuộc tính ID bạn có thể thiết lập giá trị cho field thông qua javascript.

<script type="text/javascript">
 document.getElementById('YOUR_VALUE').value = "<?php echo $_GET['YOUR_VALUE'];?>";
</script>

Tạo captcha

Để chèn captcha gồm field và ảnh hiển thị nội dung captcha vào form, bạn nhấn Generate Tag và chọn CAPTCHA tuy nhiên để có thể tạo ảnh captcha bạn phải thêm plugin Really Simple CAPTCHA.
captcha-wpcf7
Có 2 shortcode, sinh ra một cái tạo trường input nhập captcha và shortcode thứ 2 hiển thị ảnh chứa nội dung ký tự captcha. Ví dụ:

[captchar captcha-498]
[captchac captcha-498]

Chép vào template form cột trái và save lại form. Mở lại trang chứa form kết quả captcha như thế này.
captcha-wpcf7-1
Ngoài các thiết lập chung cho field, còn Có một số thuộc tính cài đặt riêng cho hình captcha như:
mầu chữ, mầu nền, kích thước.

Tính năng captcha được cấu hình hoạt động tự động, cũng giống như email hook validation của form sẽ kiểm tra nếu không nhập đúng captcha sẽ thông báo chuỗi lỗi trong kết quả.
Giải thích thêm:
Mỗi lần tạo captcha, hình ảnh captcha mới được lưu cache vào thư mục wp-content\uploads\wpcf7_captcha. Do plugin Really Simple CAPTCHA sinh ra.
wpcf7-image-cache

Trong lần sau mình sẽ có bài hướng dẫn sử dụng nâng cao contact form 7. Đừng quên gửi comment đặt câu hỏi nếu bạn còn thắc mắc.

Đọc tiếp: Sử lý dữ liệu trong contact form 7

4.7 / 5 ( 3 votes )

Bài viết liên quan:

  1. Tạo Contact form trong wordpress với fast secure contact form
  2. Sử lý dữ liệu trong contact form 7
  3. Gửi attachment files download qua email trong wordpress
  4. Tạo thêm trường trong Contact Form 7
  5. Gửi dữ liệu contact form tới URL
  6. Thay đổi tiêu đề nút add to cart trong woocommerce
  7. Cách xóa sản phẩm liên quan trong woocommerce
  8. Quản lý download attachments trong wordpress
  9. Tắt plugins wordpress bằng phpmyadmin
  10. Phóng ảnh cloud zoom với plugin gallery metabox trong wordpress

Chuyên mục: Wordpress, Wordpress plugins Tìm kiếm: contact form

Đăng ký nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Bạn đã đăng ký thành công!

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Comments

  1. Hữu Nhi says

    Chủ Nhật, 05/10/2014 at 2:19 chiều

    Mình làm được, nhưng khung nó tràn ra ngoài, có cách nào khắc phục được không ban??
    À còn gởi mail, mình thử test mà nó không gởi về mail của mình là sao ta ?
    Mình mới học WP nên gà lắm, cảm ơn đã đọc tin của mình

    Trả lời
    • Hoang says

      Thứ Hai, 06/10/2014 at 10:44 chiều

      cái này bạn xem lại css, trog blog mình cũng có bài hướng dẫn gửi email trong wordpress sử dụng SMTP, bạn xem tại đây: http://www.hoangweb.com/wordpress-site/gui-mail-bang-smtp-server-rieng-trong-wordpress

      Trả lời
  2. vinhomes ocean park says

    Thứ Năm, 30/05/2019 at 11:02 chiều

    anh cho em hỏi đổi màu chữ ở các ô đăng ký thì làm thế nào ạ

    Trả lời
    • Hoàng Quách says

      Thứ Sáu, 31/05/2019 at 10:03 sáng

      Vấn đề này liên quan đến CSS, tham khảo:
      https://www.w3schools.com/howto/howto_css_placeholder.asp
      https://stackoverflow.com/questions/6669846/css-input-field-text-color-of-inputted-text

      Trả lời

Lưu ý:
> Không sử dụng từ khóa trong mục "Tên".
> Hãy sử dụng tên thật và địa chỉ email chính xác.
> Vui lòng bình luận bằng tiếng Việt có dấu.
Mọi bình luận trái quy định sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn.

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • Snapchat

SẢN PHẨM

  • Auto-Sync WooCommerce & Google Shopping
  • Phần mềm chặn click ảo

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2019 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.