, (*1)
Forms es una aplicación que gestiona formularios, registra cualquier formulario en una base de datos, las características más destacadas de forms son:
* Envío de formularios tanto por ajax como por submit
* Reenvío de formularios a tantos correos como se desee
* Crear estados personalizados
* Asignar estados a cada registro de cada formulario
* Crear comentarios para cada registro
* Mantener informado vía email, de cada cambio de estado o nuevo comentario realzado sobre un registro, (*2)
Installation
Para instalar este módulo es necesario tener instalado previamente el módulo pulsar, visitar el repositorio de Pulsar en caso de no tenerlo instalado., (*3)
1 - After install Laravel framework, insert on file composer.json, inside require object this value, (*4)
"syscover/forms": "~2.0"
and execute on console:, (*5)
composer update
2 - Register service provider, on file config/app.php add to providers array, (*6)
Syscover\Forms\FormsServiceProvider::class,
3 - Execute publish command, (*7)
php artisan vendor:publish
4 - Execute optimize command load new classes, (*8)
php artisan optimize
5 - And execute migrations and seed database, (*9)
php artisan migrate
php artisan db:seed --class="FormsTableSeeder"
6 - Execute command to load all updates, (*10)
php artisan migrate --path=database/migrations/updates
Activate Package
Access to Pulsar Panel, and go to:, (*11)
Administration-> Permissions-> Profiles, and set all permissions to your profile by clicking on the open lock.
, (*12)
Go to Administration -> Packages, edit the package installed and activate it., (*13)
Implementation
Una vez instalado y activado el package, debemos de crear una cuenta de envío dentro Administración->Cuentas, necesitaremos tanto datos del servidor como usuario y contraseña de la cuenta., (*14)
Una vez creada la cuenta de correo nos vamos a la sección Forms->Master tables->Preferences, seleccionamos el estado que tendrá cada registro por defecto, si deamos cambiar o añadir más estados lo podemos realizar desde la sección Forms->Master tables->States, y la cuenta desde la que se enviarán las notificaciones., (*15)
Por último deberemos dar de alta un formulario dentro de Forms->Forms, el id del formulario nos servirá para asociar los registros al formulario, indicando el id en la rutina de javascript., (*16)
Para realizar la implementación en javascript hay que añadir la siguiente librería en la página donde vayas a implementar tu formulario, (*17)
<script src="{{ asset('packages/syscover/forms/vendor/jquery.forms/jquery.forms.js') }}"></script>
Después tienes que declarar el plugin de javascript que adaptará tu formulario para que sea enviado y registrado en la base de datos, (*18)
$('#form').forms({
id: 1, // Aquí el ID del registro del formulario que has creada en la sección Forms -> Forms
debug: false,
ajax: true,
fields: {
name: 'name',
surname: 'surname',
company: 'company',
email: 'email',
subject: 'subject',
data: ['message','field-1','field-2','field-3', ...] // here you can add fields
}
}, function(response){
if(response.success)
{
// form submit successful
}
}).on('forms:submit', function(event){
// here check your form, if are any error to stop execution use event.preventDefault();
}).on('forms:error', function(event, error) {
console.log(event);
console.log(error);
});
Puerdes añadir propiedades a tu formulario mediante atributos data, (*19)
data-length: Tamaño del campo que tendrá en el panel de control, de 1 a 10
data-label: Título del campo que se le asignará
Configura en tu fichero de variables de entorno las siguientes variables, si usas Google ReCaptcha, (*20)
GOOGLE_RECAPTCHA_SITE_KEY=your site key
GOOGLE_RECAPTCHA_SECRET_KEY=your secret key
Para usar Google Recapcha debes de añadir la siguiente etiqueta a tu formulario:, (*21)
<div class="g-recaptcha" data-sitekey="{{ env('GOOGLE_RECAPTCHA_SITE_KEY') }}"></div>
Forms se encargará de la validación, devolviendo el error al evento 'forms:error', (*22)
Posibles errores que te puede devolver detro del objeto error:, (*23)
Error general, (*24)
{
success: false,
code: 0,
message: "",
nativeError: Object
}
Error por no haber pulsado el recapcha, (*25)
{
success: false,
code: 1,
message: "reCaptcha input isn't checked",
nativeError: null
}