Cómo crear plantillas de formulario

Pasos a paso de como crear plantillas de formularios o Prontus Forms, 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: Viernes 21 de agosto de 2020
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-av-1723585740-av-.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-av-1723585740-av-.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

Descargar