petun/forms

Package for simple forms handle in any CMS or Frameworks

Petun Forms

Package for simple forms handle in any CMS or Frameworks., _(*1)

Installation

git clone https://github.com/petun/forms.git
cd Forms
cp test/base_config.php config.php
cp test/handler.php .
php ~/composer.phar update

Front End

<script type="text/javascript" src="assets/template/Forms/frontend/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="assets/template/Forms/frontend/js/jquery.petun-forms.js"></script>

In your main script file, _(*2)

$(function(){
    // this is default options
    $('.petun-form').ptmForm(
        {
            'renderTo': '.form-result',
            'successClass': 'form-result__success',
            'errorClass': 'form-result__error',
            'loadingClass': 'form-result__loading',
            'handler': 'assets/template/Forms/handler.php',
            'onSuccess': ...
        }
    );

    // simple js callback example
    $('.petun-form').ptmForm(
        {
            'handler': 'assets/template/Forms/handler.php',
            'onSuccess': function(form, result) {
                window.setTimeout(function(){$('#callbackForm').modal('toggle')} , 2000);
            }
        }
    );

    });

Add formId to forms, _(*3)

<

form class="petun-form" enctype="multipart/form-data" method="post">
    <input type="hidden" name="formId" value="feedbackForm" />
    <!-- action params, can white here or in config file -->
    <input type="hidden" name="action[mail][to]" value="petun911@gmail.com" />
    <input type="hidden" name="action[redirect][to]" value="/feedback-success.html" />

    <div class="form-group">
        <label for="nameId">Name</label>
        <input type="text" name="name" class="form-control" id="nameId" >
        <p class="help-block" data-error-message="name"></p>
    </div>
                ...

Backend

Config Example Configuration, _(*4)

$config = array(
    'feedbackForm' => array(
        'fields' => array(
            'name' => 'Ваще имя',
            'telephone' => 'Ваш телефон',
            'email' => 'Email',
            'select-box' => 'select-box',
            'check-test' => 'test check'
        ),
        'rules' => array(
            array('name', 'required'),
            array('telephone', 'required'),
            array('email', 'email'),
        ),
        'actions' => array(
            array(
                'mail', 'subject' => 'Новое письмо с сайта',
                'from' => 'no-reply@' . $siteName,
                'fromName' => 'Администратор',
                'to' => $mailTo
            ),
        )
    ),
);

Available Actions

array(
    array(
        'mail', 'subject' => 'Новое письмо с сайта',
        'from' => 'no-reply@' . $siteName,
        'fromName' => 'Администратор',
        'to' => $mailTo
    ),
    array(
        'redirect', 'to' => '',
    ),
    array(
        'log', 'filename' => '/tmp/log.txt',
    ),
    array(
        'modxResource',
        'coreCmsPath' => '/Users/petun/Sites/modx/core/',
        'resource' => array(
            'pagetitle' => array('eval' => '$this->_form->fieldValue("name")'),
            'parent' => array('value' => '0'),
            'template' => array('value' => '1'),
            'published' => array('value' => '1'),
            'description' => array('value' => 'sample description'),
            'introtext' => array('eval' => '$this->_form->fieldValue("telephone") . $this->_form->fieldValue("email")'),
            'tv' => array(
                'date' => array('value' => '2013-01-01 12:12'),
                'typeId' => array('value' => '3')
            )
        )
    )
)

Available Rules

'rules' => array(
    array('field', 'required'),
    array('field', 'email', 'allowEmpty' => false),
    array('field', 'number', 'allowEmpty' => false),
    array('field', 'regex', 'rule' => '/\d+/', 'errorMessage' => 'В поле %s должны быть только числа'),
    array('field', 'date', 'allowEmpty' => false, 'format' => 'dd.mm.yyyy'),

),

Callback Form

HTML on example modal page Script you can get from example script, _(*5)

CSS Sample (SASS), _(*6)

.form-result {
  margin: 0 0 10px;
  ul {
    li {
      list-style: none;
    }
  }

  &.form-result__error {
    p {
      color: #ff2f25;
    }
  }

  &.form-result__success {
    p {
      color: #1c801a;
    }
  }
}