Design the Form Header

🔴 On2Air Forms has been shutdown to focus on our On2Air Backups Airtable app Learn more about automated Airtable backups - on2air.com

You can change the look and design of your form with a header. You can upload an image, link to a URL, or add Rich text.

• Add an Image Only Header

• Add Content such as Images, Text, Links, and More as a Header

• Using Inline Images - Sizing and Styling

• Upload Image from a Device or Link to a URL

• Size and Style Your Text and Images

• Resize Image

• Center-Align Image or Text

• Change the Color of your Text

• Use HTML to Design

• Design the Submission Page

• More Design Tutorials

Add an Image Only Header

• Go to Designer > Page > Header

• To add an image header or logo, choose Upload to add from your device or URL to use image from a URL.
• Leave as No Image if no logo is needed

IMAGE SIZE: The max height of the image placeholder is 100px and the default form width is 760px.

Add Content such as Images, Text, Links, and More as a Header

You can add Content such as images, text, links, tables, bullet points, and more in the Header Designer.

• Click the icon next to the Header section

• This will open a text editor where you can add and format your text. You can use the built-in formatting options or you can use Markdown

IMAGE SIZE IN CONTENT EDITOR: The image will scale with the size you upload. The default form width is 760px.

• Add your content on the left screen. You’ll see the Preview on the right.

Using Inline Images - Sizing and Styling

You can add images in several different ways in the editor. You can upload an image from your device or from a URL. You can also use HTML to further style an image if you use the syntax below.

Upload Image from a Device or Link to a URL

• You can add any image from your device/computer or a URL by clicking the Image icon. This will add the image as its exact size. With this method, you won’t be able to resize the image in the editor, you’ll need to size it before uploading.

Choose a file on your device

Add an Image URL

Size and Style Your Text and Images

Resize Image

• To resize images or style your images inline, you’ll use this HTML method.

To style your images, you’ll need to use the img src style and then type in the image URL.

Optionally, you can add your image to the field and On2Air will automatically create an image URL.

You can then use that Image URL in this field and delete the first image.

Copy

<img src="yourimageurl.com" style="width: 100px; height: 100px"/>

In this example, we’re limiting the size of the file to 100x100px

Center-Align Image or Text

You can center-align your image or text in the Header or the Submission page.

In this example, we want to center-align both the Image and the Text “Book a Demo”

Final Result:

HTML Code to use in Designer

• First, upload your image to the Header Designer. It will generate a URL of your image.
• Copy and paste this code, replacing the image src URL with your uploaded Image URL
• Set your width and height in pixels to your preferred size
• Delete your previous uploaded image

Copy

<p style="text-align:center;">
<img src="https://storage.on2air.com/file/2968f867-bf02-40f5-a655-09af296a2d1f" style="width: 250px; height: 60px;"/>
</p>

***
<p style="text-align:center; font-size:46px;"><strong>Book a Demo</strong>
</p>

Change the Color of your Text

• Copy and paste this code into the Header Designer
• Change the color name to your preferred color

Copy

<p style="text-align:center; color:hunter green; font-size:46px;"><strong>ORDER FORM</strong>
</p>

Use HTML to Design

You can also add other HTML styles as needed for color and style.

Copy

<p style="color:blue;font-size:46px;">
I'm a size 46px, blue, <strong>bold</strong> line
</p>

Copy

<p style="text-align:center; color:hunter green;font-size:46px;"><strong>ORDER FORM</strong>
</p>

You can also use the templating syntax to insert and style images

Design the Submission Page

💡

Next: Design the Submission Page

More Design Tutorials

Change the Layout of Your Form - Width and Multi-Column

Rearrange Fields in Your Form

Design the Form Header

Design the Submission Page

Customize Your Form Styles and Buttons

Add or Remove On2Air Branding on Your Form

Use Markdown with On2Air Forms

Enable Save As Draft for Your Form

Use a Plain Text Editor in On2Air Forms

Use a JSON Editor in On2Air Forms

Use a Markdown Editor in On2Air Forms

Use an HTML Editor in On2Air Forms

Limit the Length of Field Characters

Style Your Forms and Fields - CSS Class Styling