One of the lesser-known features of Formsite forms are the form Header & Footer settings page. These areas let form owners insert content that appears on every page of the form, and can include images, text, and some custom HTML.
The most common use for the form header is to insert the organization’s logo and other branding elements. Other ideas for the form header and footer include:
- Logo and branding
- Personalization and pre-populated content
- Instructions and tips for completing the form
- Contact information
Form Header & Footer
Find the form header & footer settings page from the form editor, at the bottom of the tools in the left column. Clicking the Header/Footer link opens the settings page for the form header and footer.
The content in each header and footer box will appear at the top and bottom of every form page.
Where will it not appear?
- Form login page
- Password page
- Order Review page
- Success Page
Tips for the header & footer
Formatting: Since the header and footer are outside of the form table, adding long content will expand to the full width of the page. Use the text editor’s Source Code button to add basic HTML to format the header and footer.
<div style="width:100%;height:auto;max-width:600px;margin:auto;padding:20px 0;"> **Add content here** </div>
You can change the alignment, fonts, and colors using the text editor’s built-in tools.
Example 1: Add today’s date to the header
The text editor boxes will not allow most style and script tags, although some basic scripts are able to be used.
<script> var d = new Date(); var month = d.getMonth()+1; var day = d.getDate(); var output = d.getFullYear() + '-' + ((''+month).length<2 ? '0' : '') + month + '-' + ((''+day).length<2 ? '0' : '') + day; document.write("<p>Today's date: "+output+"</p>"); </script>
Example 3: Use the Pre-populate link to prefill a Hidden Field item and use the pipe code in the footer to display on every page.
Be sure to copy/paste this code into the Source Code view in the text editor.