Cómo crear plantillas de formulario

Pasos a paso de como crear plantillas de formularios las cuales despliegan diferentes vistas para las respuestas en el envío datos.

Publicado: Martes 25 de Septiembre de 2018 por David García
Última modificación: Martes 20 de Noviembre de 2018

Dado que el formulario es también un tipo de FID, su apariencia se modifica por medio de la plantilla que se le tenga configurada (Ver Plantillas Artículos)

Sin embargo, una vez tengas implementado tu formulario en Prontus puedes configurar varias plantillas para los estados de envío (Éxito y  Error).

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>

Artículos Relacionados