Một số tips khi làm việc với Contact form 7 trong WordPress

Nói về form khi làm việc với WordPress thì Contact form 7 là một plugin vô cùng mạnh mẽ. Trong quá trình làm việc với WordPress và Contact form 7, mình chia sẻ 1 số kinh nghiệm đã làm việc qua, và chia sẽ một số tips khi làm việc với contact form 7 mà có thể một số bạn sẽ cần dùng tới

Tùy chỉnh html form theo ý muốn

Contact form 7 cung cấp 1 số trường được xây dựng sẵn như text, email, tel, textarea, checkbox, radio…, nên việc tùy chỉnh cho html là vô cùng linh hoạt, chỉ việc làm giao diện cho form và đặt cái field tương ứng và tùy chỉnh giao diện theo ý muốn một cách dễ dàng

Lắng nghe và xử lý sự kiện khi tương tác với form

Trong trường hợp bạn muốn xử lý các tác vụ sau khi gởi mail xong, thì contact form 7 cung cấp cho bạn các sự kiện sẵn, tham khảo thêm ở link, bạn chỉ cần đăng ký lắng nghe sự kiện và sử lý tương ứng theo. Ví dụ, mình lắng nghe sự kiện khi gởi mail thành công (wpcf7emailsent) hay thất bại (wpcf7mailfailed) thì mình reset lại form, theo dõi đoạn mã bên dưới

function resetCf7() {
  jQuery('.wpcf7').each(function() {
    jQuery(this).find('form')[0].reset();
  })
}
jQuery(document).ready(function() { 
  document.addEventListener( 'wpcf7mailsent', function( event ) {
    resetCf7();
    }, false );

    document.addEventListener( 'wpcf7mailfailed', function( event ) {
      resetCf7();
      }, false );
});

Tùy chỉnh vị trí hiển thị kết quả trả về, khi sử dụng ajax

Contact form 7 cung cấp tag [response] cho mình cấu hình việc hiển thị kết quả ajax trả về ở vị trí đầu với cuối form

Kết hợp contact form và popup trong WordPress

Việc hiển thị popup trong WordPress mình dùng lightbox có sẵn trong WordPress luôn, và việc kết hợp giữa contact form 7 và popup cũng là việc lồng giữa shortcode [popup] và [contact]

Và việc áp dụng thì vô cùng đơn giản, theo dõi đoạn mã

<div class="register-popup">
  [popup uid="register-popup" title="Register popup"]
  <div class="register-popup__container">
    [contact-form-7 id="221" title="Đăng ký_Hệ thống kho"]
  </div>
  [/popup]
</div>

Đa ngôn ngữ với Contact form 7

Đa ngôn ngữ với contact form 7 đơn giản là thao tác duplicate form lên và ứng với mổi page ở ngôn ngữ khác nhau, gán cho page một form tương ứng