Editing the Header & Footer

Editing the Header and the Footer of a form sends a powerful message about the purpose of your form. We have now made building and branding forms more streamlined by allowing you to easily add images to the Header or Footer. 

 

To add a header or footer image click "Style" in the upper left corner of the builder, hover your mouse to the active theme and click on "Edit" (If you're using a stock theme you'll need to first make a copy of the theme before you can add header and footer on your form). From there, go to Advanced Styles and under General click on "Upload Image" to add a header and footer. 

 

Once the "Upload Image" button is clicked, the option to either drag and drop files or choose a file from your computer will appear along with the option to set the size of the image, and align the image to the left, center, or right side of the page. 

ProTip: We recommend an image with a width of 700px for the best fit.

Once you've added your header image make sure to click on "Done" and save your theme before you preview your live form.

Note: Images uploaded in Jpeg format are compressed by our system at about 80% quality. If you're noticing a drop in image quality, this might be why. We suggest using a lossless image format such as PNG or GIF to not experience this quality loss.

 

Removing the Header or Footer Image

 To remove a header or footer image you've added to your theme click on "Edit Image" next to Form Header or Form Footer, then click on the red "x" icon to the right of the image to remove the image and click on "Done". Finally, save your theme to apply the change.


Note: Header and footer images do not show up when embedding your form using the javascript embed code as they are not part of the form body. The images will, however, show using the iframe embed code.

 

Editing Header/Footer HTML

When on the Active Theme or the Theme applied on the form, click on the "Advanced Code Editor" to expand the view of it. When it is expanded there will be buttons for "Header HTML" and "Footer HTML" click on the one you would like to edit and you could put in the custom code, or below them, there is an option to put in the default header or footer code.

Warning: Editing the HTML/CSS in the Header or Footer will wipe out any styling by the Theme or Advanced CSS applied to the theme.

 

Was this article helpful?
1 out of 5 found this helpful

Comments

0 comments

Please sign in to leave a comment.