How can we help?
Search for answers or browse articles about Sintel Forms
Create a custom form header
UPDATE September 2023: This is a legacy article. There’s now a Header and Footer feature built into Sintel Forms. Please refer to the Form Header and Footer article for information.
This article shows how to build custom form headers and embed images into form sections.
Steps:
- Add a Section and make it first section on the form
- In the new section properties disable “Show title” option
- Populate “HTML text” box with a relevant code (example headers listed below).
Images that are used in custom headers must be publicly available otherwise they will not be included in the PDF export. If public hosting is not available then encode your images using a BASE64 image encoder such as BASE64 Image and then embed the code in your custom HTML
<img src="data:image/png;base64,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" height="60px"/>
Example headers:
Header with full-width image
Source Code:
<div>
<img src="https://s3.eu-west-1.amazonaws.com/sintel.workspace/DemoFormLogos/Logo-landscape-fullwidth.png" width="100%"/>
<div class="ms-fontWeight-semiBold" style="text-align: center; font-size: 22px">FORM TITLE</div>
<div class="ms-fontWeight-semiBold" style="text-align: center; font-size: 18px; color: #666">Form Description</div>
</div>
Header with 1 image
Source Code:
<div class="ms-Grid" dir="ltr">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-md1">
<img style="" src="https://s3.eu-west-1.amazonaws.com/sintel.workspace/DemoFormLogos/Logo-square.png" height="60px"/>
</div>
<div class="ms-Grid-col ms-md10">
<div class="ms-fontWeight-semiBold" style="text-align: center; font-size: 22px">FORM TITLE</div>
<div class="ms-fontWeight-semiBold" style="text-align: center; font-size: 18px; color: #666">Form Description</div>
</div>
<div class="ms-Grid-col ms-md1">
</div>
</div>
</div>
Header with 2 images
This is is a responsive header using 3 columns layout. 
When opened on a mobile device left and right icons are displayed in the first row and Form Title in the second row. 
Source Code:
<div class="ms-Grid" dir="ltr">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-md6 ms-lg4 ms-xl2">
<img style="" src="https://s3.eu-west-1.amazonaws.com/sintel.workspace/DemoFormLogos/Logo-square.png" height="60px"/>
</div>
<div class="ms-Grid-col ms-md6 ms-hiddenLgUp">
<img style="float: right;" src="https://s3.eu-west-1.amazonaws.com/sintel.workspace/DemoFormLogos/Logo-landscape.png" height="60px"/>
</div>
<div class="ms-Grid-col ms-md12 ms-lg4 ms-xl8">
<div class="ms-fontWeight-semiBold" style="text-align: center; font-size: 22px">FORM TITLE</div>
<div class="ms-fontWeight-semiBold" style="text-align: center; font-size: 18px; color: #666">Form Description</div>
</div>
<div class="ms-Grid-col ms-hiddenMdDown ms-lg4 ms-xl2">
<img style="float: right;" src="https://s3.eu-west-1.amazonaws.com/sintel.workspace/DemoFormLogos/Logo-landscape.png" height="60px"/>
</div>
</div>
</div>
