Form Header and Footer Uses, Tips & Examples

Formsite online form builder gives form owners over 50 different item types to collect responses and format the form. Adding the Page Break item gives the ability to make multi-page forms, and using multiple pages allows for other enhancements. One such feature is the form Header and Footer, which appears on every page of the form.

Using the form Header and Footer, form owners add content that appears on every page to make branding more consistent. Uses also include support for the repeating page rule and adding navigation links to other forms and/or pages on your site.

Common Uses for Headers and Footers on Online Forms

Most often, the form Header contains an organization’s logo with any common branding elements. The primary benefit is that the form is guaranteed to display the same content at the top of each page of the form.

Other uses include adding messages and instructions for completing the form without needing to copy them on every page. Things like privacy statements or instructions for saving the form’s progress appear on many forms.

The form Footer also commonly contains content like privacy statements, copyright, and how to contact. Another use for the form Footer is to display links to other pages or forms, which would also appear on every page.

Adding Content to the Header and Footer

The form’s Header and Footer areas use the same text editor found in Formsite with the same familiar settings. Use the image button to add images and the link button to add links. The font controls also allow for choosing fonts, sizes, colors, and alignments for different text blocks.

The Source Code button in the text editor allows you to edit the actual HTML presented, which gives form editors extra abilities. For example, if there’s an existing HTML email or web page that contains the elements, that may be able to copy/paste into the Source Code area.

Advanced users can also add scripting to the Header or Footer to perform some tasks. An example is to display today’s date at the bottom of the form:

<script>
var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var output = 
    ((''+month).length<2 ? '0' : '') + month + '/'
    + ((''+day).length<2 ? '0' : '') + day + '/' 
    + d.getFullYear();
document.write("<p>Today's date: "+output+"</p>");
</script>