Custom design for public forms

Athento allows full access to the HTML and CSS so you can customize the design of your public form.

You can customize your template from the Public URLs panel in the form settings.

You will then be taken to a code editor where you will be able to layout your form template.

The template is divided into blocks inside which you can put your custom content. The blocks are delimited by tags:

{% block %}{% endblock %}

Within these tags you can include HTML code, as well as css styles, although we recommend that you put the latter within the block:

{% block head_css %}{% endblock head_css %}

Inside the code editor, you will see all the available blocks.

Please note that if you render the edited template and it fails, the default template will be rendered. Also, you can restore the default template at any time from the same editor.

Below, you can see some examples. 

CSS styles

{% block head_css %}
<style>
.sidebar.custom {
position: relative;
width: 336px !important;
background: #027180;
display: block;
flex: none;
color: #fff;
}
</style>
{% endblock head_css %}

HTML code

{# 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">
DOCUMENTS REQUEST
</div>
<div class="col-md-3">
<hr style="border-color: #fff;"></hr>
</div>
<div class="col-md-12" style="font-weight: bold;">
Request your documents from everywhere
</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">
If your have doubts got to <u><a style="color:white;" href="">user guide</a></u> where your will find further help.
</div>
</div>
</div>
</div>
{% endblock sidebar %}