Skip to main content
Form elements inherit their styles from the theme’s styles or can be individually styled. You can set the theme of a form by going to the form settings and selecting your theme from the Theme dropdown. We recommend building out your theme as much as possible and only updating styling directly in the form when you can’t create the asset in the theme.

​
Get Started

Go to the Themes tab in the left side nav and select Create Theme. Theme styles can be controlled directly from the Theme Builder, or by applying updates to the theme while building the form. Themes have global styling settings as well as per-asset level styling.

​
Global Styling

Start by setting the global styling. Open your theme and edit:
  • Step background — in the top left corner
  • Typography — in the right side rail. You can upload a custom font and set the global style for default text.
If you don’t see the step background or typography global styles, click on the grey background to make sure no assets are selected.

​
Styling Assets within the Theme

Assets are form elements that have been styled and can be reused throughout your forms — for example, “primary button” and “primary text.” Within your theme, we recommend styling in this order:
  1. Buttons > Primary (you can add more button assets later)
  2. Text Elements > Primary (if different from your global typography style)
  3. Progress Bars > Primary
  4. Fields > “Edit All Field Styles”
    • Editing all field styles lets you set core styles across all inputs at once: width, height, padding, typography, corner radius, hover, selected, and disabled states.
    • After setting the core field styles, go to individual fields to apply field-specific styles.

​
Styling Assets within a Form

To create secondary assets (e.g. a secondary button style):
  1. Create a new form purely for theme styling — this lets you style and edit assets without affecting live forms.
  2. Set the form’s theme to the theme you just created.
  3. Click Elements in the left-hand side panel.
  4. Drag a button onto your step.
  5. Edit the button’s styling in the right side column.
  6. Once satisfied, click + Save as Asset in the bottom left corner.
  7. Give it a name and press Save.
  8. The asset will now appear in the left side nav under Button.
Once you publish the form, the asset becomes visible in the theme. One approach for keeping track of all your assets in one place is to maintain a dedicated styling form that contains all of your assets.
To update an asset’s styling later:
  • Click Update Asset in the bottom left corner, or
  • Click the blue label of the changed style and select Apply Style To > All [asset type] assets.
You can repeat this process for all assets you want to create: text elements, images (e.g. your logo), text fields, button groups, etc.

​
Compound Assets

Within your form, you’ll likely want to combine elements into a container to create a compound asset — for example, a container with two text elements and a checkbox. Compound assets cannot currently be saved as part of a theme, but you can create one in a single place and copy/paste it wherever needed. See Feathery’s documentation on custom fields and compound assets.

​
Desktop vs. Mobile Styling

Both themes and forms support separate styles for desktop and mobile. We recommend building all assets for desktop first, then updating for mobile. Access mobile styles by clicking the mobile icon at the top of the page. By default, mobile inherits styling from desktop. Changes made in mobile view apply only to mobile and won’t affect desktop. Mobile-specific customizations include:
  • Smaller typefaces
  • Column-to-row layout changes
  • Toggling element visibility
  • And more

​
Layouts & Compound Asset Best Practices

Ideally, your design is finalized before you start building in Feathery — this is the most efficient approach since it lets you design layouts and compound assets once and reuse them without rebuilding. Pro tip: Once you have the layout for one step, duplicate that step each time you add a new step. Swap out content and elements without rebuilding the layout from scratch.
As you build the layout for a step, toggle on Grid Display in the top right corner. This shows the outlines of all container elements and makes drag-and-drop much easier.

​
Use containers to create a structured, reusable layout

Containers let you build a layout you can replicate across steps. Start each step with a foundational container to set standard padding, then create containers for your header (logo, progress bar), main form content, and footer. Set layout styles — width, margin, padding, alignment — on containers rather than on individual elements. This ensures pre-styled assets remain reusable and consistent across the form.

​
Remove margins from individual elements

Set margins to 0 on all field, button, and text assets — either from your theme or from within the form. Use container gap and padding for spacing instead.

​
Use “Responsive - Expand to Content” or Width = 100% on elements

These width options make elements flexible and adaptable to whatever container they’re placed in. Set width or padding on containers to control layout for a specific step or compound asset.
If a specific button should be a fixed width across all steps (e.g. a “Continue” button), setting the width in pixels is fine. For most assets, you want them to adapt to their parent container.

​
Use “Gap” for spacing between elements in containers

Use gap on containers rather than margins on individual elements. This keeps spacing layout-specific and prevents margins from affecting neighboring containers or elements. Example: First name and last name fields organized in columns use a gap of 8px rather than margins on the individual fields — making the input assets more versatile.

​
Use “Rotate into Rows” when adapting columns to mobile

For column layouts that won’t work on mobile, click the mobile icon, then go to Properties > Controls > Rotate into Rows in the right sidebar to transform the column layout into rows.