Sí, Athento permite la creación de templates personalizados para nuestros formularios públicos ofreciendo acceso completo al HTML y CSS de modo que puedas customizar el diseño de tu formulario público.
Puedes customizar tu template desde el panel de URLs Públicas en la configuración del formulario.
A continuación accederás a un editor de código en el que podrás maquetar la plantilla de tu formulario.
La plantilla se encuentra dividida en bloques dentro de los cuales podrás poner tu contenido personalizado. Los bloques se encuentran delimitados por las etiquetas:
{% block %}{% endblock %}
Dentro de dichas etiquetas podrás incluir código HTML, así como estilos css, aunque estos últimos recomendamos que los pongas dentro del bloque
{% block head_css %}{% endblock head_css %}
Dentro del editor de código podrás ver todos los bloques disponibles.
Ten en cuenta que si al renderizar la template editada, se produce fallo, se renderizará la plantilla por defecto. Así mismo, podrás restaurar la template por defecto en cualquier momento desde el mismo editor.
A continuación, puedes ver algunos ejemplos.
Insertar estilos css
{% block head_css %}
<style>
.sidebar.custom {
position: relative;
width: 336px !important;
background: #027180;
display: block;
flex: none;
color: #fff;
}
</style>
{% endblock head_css %}
Insertar código html
{# Allows you to modify the sidebar #}
{% block sidebar %}
<div class="fixed">
<div class="sidebar custom">
<div class="row">
<div class="col-md-12 text-center mt-4">
<img src="" />
</div>
<div class="row m-4">
<div class="col-md-12 h1">
SOLICITUDES DE DOCUMENTACIÓN
</div>
<div class="col-md-3">
<hr style="border-color: #fff;"></hr>
</div>
<div class="col-md-12" style="font-weight: bold;">
Solicita tus documentos desde cualquier lugar del mundo
</div>
<div class="col-md-12" style="height: 30em;"></div>
<div class="col-md-12 text-center">
<i class="fas fa-info-circle fa-2x" style="color: #fff;"></i>
</div>
<div class="col-md-12">
Si tienes dudas acerca del formulario dirígete al <u><a style="color:white;" href="">instructivo</a></u> donde te explicaremos el paso a paso.
</div>
</div>
</div>
</div>
{% endblock sidebar %}
Comentarios
0 comentarios
Inicie sesión para dejar un comentario.