How Can We Help?

Create a custom form header

You are here:
< All Topics

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

 

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Table of Contents