Form Templates

Public Skins offer four template layouts. Each template provides a different visual presentation while maintaining the same form functionality. These templates work across giving forms, event registration, and other public-facing experiences.

Template Comparison

Hero Template

The Hero template features a full-width hero image at the top of the page with the form below. This layout works well when visual impact is important.

Configuration Options

Hero Image Guidelines

• Recommended size: At least 1920px wide
• Aspect ratio: Wide/landscape orientation works best
• File format: JPG for photos, PNG for graphics
• File size: Keep under 500KB for fast loading

Hero Image Position Options

The position setting controls which part of the image stays visible when the browser crops it to fit:

• top-left, top, top-right
• left, center, right
• bottom-left, bottom, bottom-right

For example, if your image has the main subject on the right side, use right or top-right to ensure it remains visible on all screen sizes.

Hero Message

An optional text overlay appears in a semi-transparent box over the hero image. Use this for campaign taglines or calls to action. Basic HTML (<strong>, <em>) is supported.

FiftyFifty Template

The FiftyFifty template splits the screen horizontally, with content/imagery on one side and the form on the other. This layout balances visual appeal with form prominence.

Configuration Options

Image Guidelines for FiftyFifty

• Orientation: Portrait/vertical images work best
• Subject placement: Center important elements - edges may be cropped
• Avoid text in images: Use the Side Message field instead

Form Side Selection

Choose whether the form appears on the left or right:

• Form on Left: Image/message on right - draws eye left-to-right toward form
• Form on Right: Image/message on left - lets imagery make first impression

Side Message

Like the Hero template’s hero message, this optional text appears over the side image. Useful for campaign messaging, testimonials, or impact statements.

Floating Template

The Floating template displays the form in a centered card that “floats” over a background image. This creates a clean, focused experience with subtle branding.

Configuration Options

Form Width Options

Control the width of the floating form card:

On mobile devices, the form always expands to full width.

Background Image Tips

• Use images with low visual complexity in the center (where form overlays)
• Consider images with interesting edges/corners
• The shade option can help if form readability is an issue

Vanilla Template

The Vanilla template is a clean, no-frills layout with just the form. No hero images or visual flourishes - just an efficient experience.

Configuration Options

When to Use Vanilla

• Embedded form experiences
• Mobile-first campaigns
• When page speed is critical
• When your branding is handled elsewhere (header/footer)
• A/B testing form conversion without visual distractions

Choosing the Right Template

Choose Hero when:

• You have compelling campaign imagery
• Visual storytelling is important
• The campaign has a strong visual identity

Choose FiftyFifty when:

• You want to balance imagery and form prominence
• You have a message or story to tell alongside the form
• Portrait-orientation images are available

Choose Floating when:

• You want subtle, understated branding
• The focus should be entirely on the form
• You have a beautiful background image that shouldn’t compete with the form

Choose Vanilla when:

• Speed and simplicity are priorities
• The form will be embedded in another page
• You want maximum form prominence
• Your header/footer provide sufficient branding

Responsive Behavior

All templates are fully responsive:

• Desktop: Full template layout as designed
• Tablet: Layouts adapt - FiftyFifty may stack vertically
• Mobile: Form fills screen width, images scale or hide appropriately

Test your chosen template on multiple device sizes before launching.

Changing Templates

You can change a skin’s template at any time:

1. Go to System > Public Skin
2. Edit the skin
3. Select a different template
4. Configure the new template’s settings
5. Save

Note that template-specific settings (like Hero Message) won’t carry over when switching templates. You may need to reconfigure after switching.