Implementación de plantillas para un Prontus Form
Dado que el formulario es también un tipo de FID, su apariencia se modifica por medio de la plantilla que hayas configurado (Ver Plantillas Artículos)
Además, una vez tengas implementado tu formulario en Prontus puedes configurar varias plantillas para los estados de envío (Éxito y Error).
Crear la plantilla del formulario
En este caso llamaremos a la plantilla "formulario.html" sin embargo puedes colocarle cualquier otro nombre, ya que la asociación entre el FID y las plantillas se define en la configuración en el administrador del sitio:
<!doctype html>
<html>
<head>
<title>%%_titular%% - Modelo Mínimo 12</title>
<meta charset="utf-8">
<script src="/prontus/front/js-local/validator.min.js"></script>
</head>
<body> %%if(txt_titular_largo)%%
%%txt_titular_largo%%
%%/if%% %%if(txt_titular_portada)%%
%%txt_titular_portada%%
%%/if%% %%if(_txt_bajada)%%
%%_txt_bajada%%
%%/if%% %%if(bajada_corta)%%
<p>%%bajada_corta%%</p>
%%/if%% %%if(invitacion_coment)%%
<p>%%invitacion_coment%%</p>
%%/if%% <p>Los campos (*) son obligatorios</p>
%%if(nombre_contacto)%%
<p>%%nombre_contacto%% %%if(telefono_contacto)%%- %%telefono_contacto%%%%/if%% %%if(email_contacto)%%- %%email_contacto%%%%/if%%</p>
%%/if%%
<form id="formProntusConsulta" action="/cgi-bin/prontus_form.cgi" method="post" enctype="multipart/form-data" class="form-horizontal" role="form">
<input type="hidden" name="_TS" value="%%_ts%%" />
<input type="hidden" name="_FILE" value="%%_file%%" />
<input type="hidden" name="_PRONTUS_ID" value="%%_prontus_id%%" />
<div>
<div>
<label for="nombres">Nombres
%%if(chk_form_required_nombre)%%
<span>*</span>:
%%/if%%
</label>
<div>
<input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombres">
</div>
</div>
</div>
<!--row-->
<div>
<div>
<label for="apellido_paterno">Apellido Paterno
%%if(chk_form_required_apellido_paterno)%%
<span>*</span>:
%%/if%%
</label>
<div >
<input type="text" class="form-control" id="apellido_paterno" name="apellido_paterno" placeholder="Apellido Paterno">
</div>
</div>
</div>
<!--row-->
<div>
<div>
<label for="apellido_materno">Apellido Materno
%%if(chk_form_required_apellido_materno)%%
<span>*</span>:
%%/if%%
</label>
<div>
<input type="text" class="form-control" id="apellido_materno" name="apellido_materno" placeholder="Apellido materno">
</div>
</div>
</div>
<!--row-->
<div>
<div>
<label for="telefono">Teléfono
%%if(chk_form_required_telefono)%%
<span>*</span>:
%%/if%%
</label>
<div>
<input type="text" id="telefono" name="telefono" placeholder="9 876 543 21">
</div>
</div>
</div>
<!--row-->
<div class="row">
<div class="form-group">
<label for="email">Email
%%if(chk_form_required_email)%%
<span>*</span>:
%%/if%%
</label>
<div>
<input type="text" id="email" name="email" placeholder="Email">
</div>
</div>
</div>
<!--row-->
<div class="row">
<div class="form-group">
<label for="consulta" >Consulta
%%if(chk_form_required_consulta)%%
<span>*</span>:
%%/if%%
</label>
<div>
<textarea class="form-control" rows="5" id="consulta" name="consulta"placeholder="Escríbanos su consulta" style="min-height: 100px;"></textarea>
</div>
</div>
</div>
<!--row-->
<div>
<div class="form-group">
<label for="consulta">Archivo
<span>*</span>:
</label>
<div>
<input type="file" name="archivo" class="form-control">
</div>
</div>
</div>
<div>
<div class="form-group">
<div>
<label for="telefono">Código de validación
%%if(chk_form_captcha_enable)%%
<span>*</span>:
%%/if%%
</label>
</div>
<div>
<img src="/cgi-bin/prontus_captcha.cgi?_type=form" width="80" height="35" style="border:1px solid #bbbbbb;" alt=""/></td>
</div>
<div>
<input type="text" name="_CAPTCHA_FORM" class="form-control" placeholder="Ingrese el código de validación"/>
</div>
</div>
</div>
<!--row--> <!--fin informacion y postulaciones-->
<div>
<div>
<button type="submit" href="#" class="wp-boton-volver" onclick="enviaFormConsulta();">Enviar Formulario</button>
<a class="boton" href="#">Volver</a>
</div>
</div>
</form>
<div class="separa"></div>
<script>
var validatorConsulta = new Validador('formProntusConsulta','one','#FDF8C1');
%%if(chk_form_required_nombre)%%
validatorConsulta.addconstraint('nombre','obligatorio','','El campo Nombres es obligatorio.');
validatorConsulta.addconstraint('nombre','texto','','El campo Nombre contiene caracteres no permitidos.');
%%/if%% %%if(chk_form_required_apellido_paterno)%%
validatorConsulta.addconstraint('apellido_paterno','obligatorio','','El campo Apellido Paterno es obligatorio.');
validatorConsulta.addconstraint('apellido_paterno','texto','','El campo Apellido Paterno contiene caracteres no permitidos.');
%%/if%% %%if(chk_form_required_apellido_materno)%%
validatorConsulta.addconstraint('apellido_materno','obligatorio','','El campo Apellido Materno es obligatorio.');
validatorConsulta.addconstraint('apellido_materno','texto','','El campo Apellido Materno contiene caracteres no permitidos.');
%%/if%% %%if(chk_form_required_telefono)%%
validatorConsulta.addconstraint('telefono','obligatorio','','El campo Teléfono es obligatorio.');
validatorConsulta.addconstraint('telefono','regex',new RegExp(/^[0-9\-\(\) ]+$/),'El campo Teléfono contiene caracteres no permitidos.');
%%/if%%
%%if(chk_form_required_email)%%
validatorConsulta.addconstraint('email','obligatorio','','El campo correo electrónico es obligatorio.');
validatorConsulta.addconstraint('email','email','','El campo correo electrónico no es válido.');
%%/if%%
%%if(chk_form_required_consulta)%%
validatorConsulta.addconstraint('consulta','obligatorio','','El campo consulta es obligatorio.');
validatorConsulta.addconstraint('consulta','texto','','El campo consulta contiene caracteres no permitidos.');
%%/if%% %%if(chk_form_captcha_enable)%%
validatorConsulta.addconstraint('_CAPTCHA_FORM','obligatorio','','El campo Código de validación es obligatorio.');
%%/if%% function enviaFormConsulta() {
var formObject = document.getElementById('formProntusConsulta');
if (validatorConsulta.validar()) {
if (confirm('¿Está seguro que desea enviar los datos?')) {
formObject.submit();
};
};
return false;
};
</script>
</body>
</html>
Plantilla de Éxito
Si todo sale bien y los datos se envían de forma exitosa, querras hacerlo saber al usuario por medio de un mensaje que le indique que su consulta llegó a buen destino.
Para ello deberas buscar en el siguiente directorio :
/[nombre del prontus]/plantillas/extra/form/pags/ y configurar la siguiente plantilla: exito.html
En el código de la plantilla podrás apreciar y destacar la marca:
%%msg%%
La cual despliega el mensaje que configuraste desde el administrador del sitio al momento de crear el artículo desde el FID.
Ademas del mensaje de éxito configurado en el administrador tambien puedes configurar otros mensajes para diferentes iteraciones y validaciones en el formulario, por ejemplo, un mesaje en caso de los datos sean erroneos, un mensaje en caso de que el servidor no responda correctamente, un mensaje para reescribir un label entre otros:
<!-- MSG out_of_service = Sistema fuera de servicio. Intente otra vez más tarde ... -->
<!-- MSG required_data = Este dato es obligatorio: -->
<!-- MSG wrong_data = Este dato es incorrecto: -->
<!-- MSG nombres = Nombre -->
<!-- MSG apellidos = Apellidos -->
<!-- MSG rut = RUT -->
<!-- MSG email = E-Mail -->
<!-- MSG direccion = Dirección-->
<!-- MSG telefono = Teléfono -->
<!-- MSG tipo_de_consulta = Tipo de Consulta -->
<!-- MSG comentarios = Comentarios -->
<!-- MSG fecha = Fecha -->
<!-- MSG lugar = Lugar -->
<!-- MSG contacto = Contacto -->
<!-- MSG descripcion = Descripción -->
<!-- MSG inscripcion = Inscripción -->
<!-- MSG wrong_captcha = El código de validación es incorrecto -->
La apariencia del resto de la página dependerá del diseño que tengas definido para el sitio, el cual podrás modificar por medio de los css y js.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Prontus.cl - Formularios</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="ROBOTS" content="NOINDEX" />
<!-- MSG out_of_service = Sistema fuera de servicio. Intente otra vez más tarde ... -->
<!-- MSG required_data = Este dato es obligatorio: -->
<!-- MSG wrong_data = Este dato es incorrecto: -->
<!-- MSG nombres = Nombre -->
<!-- MSG apellidos = Apellidos -->
<!-- MSG rut = RUT -->
<!-- MSG email = E-Mail -->
<!-- MSG direccion = Dirección-->
<!-- MSG telefono = Teléfono -->
<!-- MSG tipo_de_consulta = Tipo de Consulta -->
<!-- MSG comentarios = Comentarios -->
<!-- MSG fecha = Fecha --> <!-- MSG lugar = Lugar -->
<!-- MSG contacto = Contacto -->
<!-- MSG descripcion = Descripción -->
<!-- MSG inscripcion = Inscripción -->
<!-- MSG wrong_captcha = El código de validación es incorrecto -->
</head>
<body class="bodyport">
<section id="main" class="art-general">
<h2>Error al envíar mensaje.</h2>
<!-- Area superior-->
<p>%%msg%%</p>
<div class="separa">
</div>
<p>
<a href="/"><span class="text-cerrar">[Volver]</span></a>
</p>
</section>
</body>
</html>Plantilla de Error
En el caso de la plantilla de Error para los formularios, la estructura es similar a la de Éxito en cuanto a la marca %%msg%%, que desplegará de igual forma el mensaje de error configurado en el administrador del sitio para el artículo formulario.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Prontus.cl - Formularios</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="ROBOTS" content="NOINDEX" />
<!-- MSG out_of_service = Sistema fuera de servicio. Intente otra vez más tarde ... -->
<!-- MSG required_data = Este dato es obligatorio: -->
<!-- MSG wrong_data = Este dato es incorrecto: -->
<!-- MSG nombres = Nombre -->
<!-- MSG apellidos = Apellidos -->
<!-- MSG rut = RUT -->
<!-- MSG email = E-Mail -->
<!-- MSG direccion = Dirección-->
<!-- MSG telefono = Teléfono -->
<!-- MSG tipo_de_consulta = Tipo de Consulta -->
<!-- MSG comentarios = Comentarios -->
<!-- MSG fecha = Fecha -->
<!-- MSG lugar = Lugar -->
<!-- MSG contacto = Contacto -->
<!-- MSG descripcion = Descripción -->
<!-- MSG inscripcion = Inscripción -->
<!-- MSG wrong_captcha = El código de validación es incorrecto -->
<link type="text/css" rel="stylesheet" href="/cms/css/global.css" />
<link type="text/css" rel="stylesheet" href="/cms/css/articulo.css" />
<?php include($_SERVER['DOCUMENT_ROOT']."/cms/js-local/_includedjavascripts.html");?>
</head>
<body class="bodyport">
<section id="main" class="art-general">
<h2>Formularios</h2>
<!-- Area superior-->
<p>%%msg%%</p>
<div class="separa"></div>
<p><a href="javascript:history.back();"><span class="text-cerrar">[Volver]</span></a></p>
</section>
</body>
</html>
Archivos adjuntos
Conceptos Básicos
¿Qué es Prontus?
Estructura de directorios
Glosario
Navegadores soportados
Tutoriales
Instalación de Prontus CMS
Implementar un nuevo sitio en Prontus
Cómo crear un FID
Cómo crear una plantilla de artículo
Cómo crear una plantilla de portada
Cómo crear plantillas de formulario
Cómo implementar un formulario
Cómo implementar un buscador
Cómo implementar un buscador Elasticsearch
Cómo crear una plantilla de taxonomía
Cómo crear plantillas de tags
Cómo crear una plantilla de listado
Cómo crear una plantilla de tags jerárquicos
Implementar carga de videos en Prontus
Integración de Redes Sociales
Instalación y Configuración
Requerimientos
Configuración del servidor
Base de datos
Asegurar la plataforma
Instalación con Wizard Prontus
Ajustes post-instalación
Archivos de configuración de Prontus
Friendly URLs
Friendly URLs para imágenes
SSI en Prontus
Logs de Eventos
Ejecutar procesos periódicamente con cron
Debugging
Plantillas
Plantillas de FID
Plantillas de artículo
Plantillas de portada
Plantillas de taxonomía
Plantillas de artículos relacionados
Plantillas de tags
Plantillas de listado
Plantillas de tags jerárquicos
Plantillas de mapa de taxonomía
Plantillas de mapa de tags
Marcas
Tipos de marcas
Diccionario de marcas
Marcas para texto
Marcas de lógica
Marcas de despliegue
Marca Menú y Panel
Parsing de marcas en formularios Prontus
Funcionalidades
Funcionalidades SEO en Prontus CMS
Multivistas
Galería de Imágenes
Buscador Multivista
Buscador
Buscador Elasticsearch
Calendarios
Imprimir artículos
Posting de contenidos
Plugins
Post-procesos
Prontus functions
Implementar copias de seguridad automáticas con Dropbox
Implementar múltiples ediciones
Regeneración masiva de artículos via línea de comandos
