Select Page
Design the Form Header

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

  • Go to Designer > Page > Header
image
  • 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
image
  • 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

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

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.
image
Choose a file on your device
Choose a file on your device
Add an Image URL
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.

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

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

image

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:

image

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

image
  • Copy and paste this code into the Header Designer
  • Change the color name to your preferred color
<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.

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

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