jFormer bao gồm cả file php đi kèm giúp bạn biết được cách thực hiện ajax, các cách kiểm tra/xác thực xem người dùng có điền đúng hay không... Framework này cũng có các tính năng nâng cao như clone forms và/hoặc các trường trong form, phân chia form thành các trang khác nhau,...

Bạn có thể tùy biến cách hiển thị của form và từng trường trong form bằng CSS hoặc có thể sử dụng ngay hiển thị mặc định vì nó cũng rất đẹp rồi

Cách sử dụng

Tải về jFormer và thêm vào file HTML như sau:

 
<link rel="stylesheet" type="text/css" href="/css/jformer.css" ></link>

<script type="text/javascript" src="/js/jquery.js" ></script>
<script type="text/javascript" src="/js/jformer.js" ></script>

Bạn nhớ đặt jQuery lên trước jFormer (trong tất cả các plugin của jQuery thì jquery.js đều được đặt lên trước)

Thêm file php khi tạo forms:

 
    require_once($_SERVER['DOCUMENT_ROOT'].'/php/jformer.php');

Đoạn mã làm một form đơn giản:

 
<?php
  $contactForm = new JFormer('contactForm', array());

  $contactForm->addJFormComponentArray(array(
      new JFormComponentName('name', 'Name:', array(
          'validationOptions' => array('required'),
      )),
      new JFormComponentSingleLineText('email', 'E-mail address:', array(
          'width' => 'long',
          'validationOptions' => array('required', 'email'), // các lựa chọn xác thực
      )),
      new JFormComponentSingleLineText('subject', 'Subject:', array(
          'width' => 'longest',
          'validationOptions' => array('required'),
      )),
      new JFormComponentTextArea('message', 'Message:', array(
          'width' => 'longest',
          'height' => 'medium',
          'validationOptions' => array('required'),
      )),
  ));

  // Hàm khi submit thành công
  function onSubmit($formValues) {

      if(!empty($formValues->name->middleInitial)) {
          $name = $formValues->name->firstName.' '.$formValues->name->middleInitial.' '.$formValues->name->lastName;
      }
      else {
          $name = $formValues->name->firstName.' '.$formValues->name->lastName;
      }



      // Gửi thông điệp (bạn cần server có hàm gửi mail)
      // nếu không thể gửi mail, jformer sẽ trả về thông báo lỗi
      if(!$mail->Send()) {
          $return = array('status' => 'failure', 'response' => $mail->ErrorInfo);
          $return['failureNoticeHtml'] = 'There was a problem sending your e-mail.'; // trả về failureNoticeHtml và thông tin báo lỗi
      }
      else {
          $return = array('status' => 'success', 'response' => 'Message successfully sent.');
          $return['successPageHtml'] = '<h1 style="margin-bottom: .5em;">Thanks for Contacting Us</h1><p>Your message has been successfully sent. We will respond as soon as possible.</p>'; // trả về successPageHtml, bạn có thể sử dụng mã HTML trong thông báo của mình
      }

      return $return;
  }
?>

Các tài liệu sử dụng jFormer vẫn đang được hoàn thành, bạn có thể kiểm tra tiến độ tại đây