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:

1. Add a Section and make it first section on the form
2. In the new section properties disable “Show title” option
3. Populate “HTML text” box with a relevant code (example headers listed below).

<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>