Skip to main content
HoopAI provides a visual styling panel that lets you adjust the appearance of your forms without writing CSS. For more advanced customization, you can also inject custom CSS directly into the form.

​
Accessing the Styles tab

Open the form in the builder and click the Styles tab in the right-side panel. The styles panel is divided into sections: layout, background, form container, fields, buttons, and fonts.

​
Layout options

Form width Set the maximum width of the form container. Options typically range from narrow (useful for sidebar embeds) to full-width (useful for dedicated landing pages). The form is always responsive and will fill its container on mobile regardless of this setting. Field layout Choose between single-column and two-column field arrangements. Two-column layouts place pairs of fields side by side, which reduces the vertical length of the form and can make shorter forms feel less sparse. Label position Set field labels to appear above the input (default), to the left of the input (inline), or as floating labels that animate inside the input and move up when the contact starts typing.

​
Background

Form page background Set the background color or image for the entire form page. This applies when the form is viewed on its hosted shareable link page, not when it is embedded inline in another site. Form container background Set the background color of the card or box that contains the form fields. On a standalone form page, this is the box that sits against the page background.

​
Field styling

Input background color Change the background color of text input boxes, dropdowns, and similar fields. Input border color and radius Adjust the border color and corner radius of input fields. A higher border radius creates rounded pill-style inputs; zero radius gives sharp-cornered inputs. Label color and font size Set the color and size of field labels (the text above each input). Placeholder text color Change the color of the ghost text shown inside empty input fields. Focus color The color that appears on input borders or as an outline when the contact clicks into a field.

​
Button styling

Button background color The fill color of the submit and next-page buttons. Button text color The color of the button label text. Button border radius Controls the roundness of button corners. Button height and font size Adjust the size of the button and the font within it. Button type Choose whether buttons show text only, an arrow icon only, or both text and an arrow together.

​
Progress bar

For multi-step forms, the Styles tab includes progress bar options: Progress bar color Set the fill color for the progress indicator bar. Progress bar style Choose between a percentage fill bar, a step-count display, or a checklist style. Show/hide progress bar Toggle the progress bar visibility on or off.

​
Fonts

Global font family Select a font for all text within the form. HoopAI provides access to Google Fonts — type a font name to search and apply it. The selected font is loaded when the form renders. Font weights Configure which font weight is used for labels, placeholder text, and button text.

​
Custom CSS

For styling needs that the visual panel cannot cover, use the Custom CSS input at the bottom of the Styles tab. Common CSS targets for form elements: 
/* Change the submit button hover color */
.form-btn:hover {
  background-color: #005fa3;
}

/* Increase spacing between fields */
.form-group {
  margin-bottom: 24px;
}

/* Style the progress bar fill */
.progress-bar-fill {
  background-color: #ff6b00;
}

/* Style error messages */
.field-error {
  color: #cc0000;
  font-size: 13px;
}
CSS entered here applies only to this specific form. It does not affect other forms on your account.

​
Agency branding

In the Styles tab, you can toggle Agency Branding on or off. When enabled, a small “Powered by” badge is displayed at the bottom of the form. Disable this if you want a clean unbranded experience for your clients or end users.
Before publishing a styled form, preview it at both desktop and mobile viewport sizes using your browser’s developer tools or by resizing the preview window. Fonts and spacing that look good on a desktop can be too large or too small on a 375px mobile screen.
Last modified on March 5, 2026