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