How to add filters and generate backgrounds to your form in Formaloo

What you'll build

By the end of this guide, you'll know how to give your form a background that stands out: a photo with a filter on top, or a generated background with no photo at all. You'll also know how to save it to your theme so it shows up on your live form.

Formaloo already let you put a photo behind your form and set its focal point and brightness. What's new is what you can do with that photo, and what you can do without one. Add one of seven filters on top of your image, or generate a background with Mesh Gradient, Simplex Noise or Dot Grid. You no longer need to edit your image in another tool before you upload it.

When to use this

Reach for a background effect when a plain photo or a flat color isn't doing enough. These are the situations where it pays off most.

Your brand photo is busy, and your form text gets lost on top of it
You want a polished look but don't have a photo, a designer, or time to edit images elsewhere
You want a calm tint or blur so your questions stand out against a photo
You want a textured, artistic look, like ribbed glass, halftone dots or paper
You manage several client themes and want each one to have its own signature background

The sections below show where the settings live and what each effect does.

When to use a filter and when to generate a background

Use a filter when you have a photo that carries your brand and you want to change its mood, tint or texture.
Generate a background when you have no photo, or you want a clean, modern look built from your brand colors.

A theme holds one or the other at a time. Adding an image replaces a generated background, and deleting the image brings the generators back.

Where it works

Background effects live in your theme, in the Design tab of the form editor. To get there, open the Design tab, click ••• on your theme, choose Edit, and scroll to the Background Image section.

💡 Want your form to look like your brand instead of a generic default? Design the look of your form is the foundational guide to form design: colors, backgrounds, layout, fonts, and where custom CSS fits in.

Because the background belongs to the theme, every form that uses the theme gets it. If a theme is used by several forms, you'll see a warning before you edit. Click Continue editing to change all of them, or Duplicate to edit a copy and keep the original untouched. You see every change live in the editor preview. Your effect also shows on the published form and on mobile.

Add a background image

Start here when you want to use a photo. Filters need an image to work on, so this comes first.

You have two ways to bring in a photo:

Upload your own image. JPG, GIF and PNG files work, up to 800K.
Pick a free photo from Unsplash. Click Browse Unsplash photos, switch between the Upload and Unsplash tabs, search for a photo, click it, then click Use this photo.

💡 Want the full Unsplash search flow? See how to add Unsplash photos to your forms and apps in Formaloo.

Once your image is in, you can fine-tune it:

Replace swaps it for another image.
Delete removes it. Formaloo asks you to confirm first.
Focal point: drag the dot on the image thumbnail to the part of the photo you want to keep visible.
Background Image Brightness: move the slider up to lighten the photo and down to darken it. A lighter photo is often all it takes to make your questions easy to read.

💡 Large images can slow down loading, especially on mobile. Resize or compress your background before you upload it.

With your image in place, the filter picker appears right below it.

Apply a filter to your image

Start here once your image is in and you want to change how it looks. A filter sits on top of your photo, and your original image stays untouched. Pick None at any time to bring the plain image back.

Here's how filters work:

You can use one filter at a time. Picking another filter resets its settings to the defaults.
Each filter has basic settings that are always visible, and advanced settings in a collapsed group.
You see the effect live in the editor, on the published form, and on mobile.

Here are the basic and advanced settings for each filter.

Filter	Basic settings	Advanced settings
Color Overlay	Color, Opacity
Blur	Amount	Tint color, Tint opacity
Film Grain	Amount, Size	Monochrome noise
Halftone Dots	Original colors, Front color, Back color, Type, Size	Grid, Inverted, Radius, Contrast, Grain mixer, Grain overlay, Grain size, Transform
Fluted Glass	Shape, Size, Angle, Distortion, Blur	Distortion shape, Shadows, Highlights, Shift, Stretch, Edges, Margin, Grain mixer, Grain overlay, Back color, Transform
Lens Distortion	Spread, Angle, Lens bulge, Swirl	Perspective, Count, Dispersion, Dispersion color, Grain overlay, Transform
Paper Texture	Style, Paper color, Blending	Roughness, Fiber, Folds, Wrinkles, Crumples, Drops, Distortion, Angle, Seed, Shadow color, Clip to image, Transform

💡 Busy filters like Halftone Dots or Fluted Glass can make your form text harder to read. Add a Color Overlay, pick a calmer photo, or raise the brightness. If typed answers disappear into the background, lower the Answer background color opacity: see why text may not be visible when typing in a form field.

Generate a background without an image

Start here when you have no photo, or you want a clean look in your brand colors. When your theme has no background image, the filter picker is replaced by a generator picker with these options: None, Mesh Gradient, Simplex Noise, Dot Grid.

Generator	Basic settings	Advanced settings
Mesh Gradient	Colors, Distortion, Swirl	Grain overlay, Grain mixer, Transform
Simplex Noise	Colors, Softness	Steps per color, Transform
Dot Grid	Back color, Fill color, Shape, Size, Spacing	Gap X, Gap Y, Stroke color, Stroke width, Size randomness, Opacity randomness, Transform

Generators and photos don't mix. If you add an image, the generated background is replaced by it. If you delete the image, the generator picker comes back. To switch from a photo to a generator, delete the photo first.

💡 Dot Grid starts with black dots, so your form text can be hard to read until you change the Back color and Fill color.

Pick None to go back to a plain background.

Save and publish your background

Your background is saved in two steps, and saving the theme alone doesn't update your live form.

Click Save Changes: you'll find it at the bottom of the theme panel. This saves your theme.
Click Save in the toolbar: it's the paper plane icon at the top of the editor. This applies the theme to your form and opens the publish popup.
Click View: in the publish popup, to see your background on the live form.

Changed your mind before saving? Reset changes takes the panel back to your last saved state.

Remember that themes are shared. If other forms use this theme, they get the new background too, so click Duplicate first when you want to experiment.

What you now have

Your form's background can now be a styled photo or a generated design, built right inside the Design tab and saved in your theme. You choose how much the effect shows, you see the result live, and every form that uses the theme picks it up. When a look stops working, None brings back the plain version in one click.

What's next

Reuse your new look across every form
Your background is saved in the theme, so you can apply it to other forms in a click. This article covers creating, duplicating and updating themes.
→ How to create design themes (colors, fonts, layout, visuals) and reuse them across forms
Find the right photo faster
If you haven't picked a photo yet, Unsplash has millions of free ones you can search without leaving Formaloo.
→ How to add Unsplash photos to your forms and apps in Formaloo
Finish the rest of your design
Colors, fonts, layout and spacing sit right next to your background in the Design tab. This article covers every setting.
→ Design the look of your form

Learn more how-tos

See a branded registration form end to end
This article builds the registration form from the worked example, with capacity limits and automated confirmations.
→ How to collect event registrations, manage capacity, and send automated confirmations in Formaloo
Make a public-facing form feel professional
A patient intake form is the first thing a patient sees, so look and feel matter. This article shows how design, logic and PDFs come together.
→ How to build a patient intake and consent workflow for healthcare clinics in Formaloo
Set the tone for an application
Applicants judge your organization by how its form looks. This article builds a full scoring and approval workflow behind a branded form.
→ Scholarship & grant application with scoring and approval workflow