> ## Documentation Index
> Fetch the complete documentation index at: https://fillout.com/help/llms.txt
> Use this file to discover all available pages before exploring further.

# Use Fillout advanced designer

> Add a custom CSS, edit the look of your buttons, and use more styling options to customize your form and enhance your company or organization's branding.

export const SupportBanner = () => {
  const titleId = React.useId();
  return <div className="support-banner" role="region" aria-labelledby={titleId}>
      <span className="support-banner__ring support-banner__ring--outer" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--middle" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--inner" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--center" aria-hidden="true" />

      <div className="support-banner__content">
        <div className="support-banner__title" id={titleId} role="heading" aria-level="2">Still have questions?</div>

        <div className="support-banner__copy">
          <span className="support-banner__line">Our team is happy to help. Start a live chat using the</span>
          <span className="support-banner__line">
            chat bubble <span className="support-banner__chat-icon" aria-hidden="true" /> in the bottom right, or email us at
          </span>
          <span className="support-banner__line">
            <a href="mailto:support@fillout.com">support{'@'}fillout.com</a>
          </span>
        </div>

        <a className="support-banner__cta" href="mailto:support@fillout.com">Contact us</a>
      </div>
    </div>;
};

## How to make advanced edits

Click `Theme` to open the **Form designer**. Then, scroll down on the left-hand panel, and click `Advanced designer`.

<img src="https://mintcdn.com/fillout-005a867b/k0MHhpNnunFK0wn4/images/Screenshot2025-12-01at3.58.22PM.png?fit=max&auto=format&n=k0MHhpNnunFK0wn4&q=85&s=c7bf61811b1e0a5541c01a41d35929f4" alt="Screenshot 2025-12-01 at 3.58.22 PM.png" width="2570" height="1441" data-path="images/Screenshot2025-12-01at3.58.22PM.png" />

<Info>
  This feature is available on the **Starter** plan and above (except for custom CSS, which is available for Pro users and above). Learn more about our pricing plans and advanced features [**here**](https://www.fillout.com/pricing).
</Info>

Our **Advanced designer** lets users:

* [Add custom CSS](/help/custom-css)
* Edit the input style
* Change the shape of buttons
* Choose a different animation

<img src="https://mintcdn.com/fillout-005a867b/k0MHhpNnunFK0wn4/images/Screenshot2025-12-01at3.59.05PM.png?fit=max&auto=format&n=k0MHhpNnunFK0wn4&q=85&s=6dbf6c7e5aab63bbc465d60f9e7bec98" alt="Screenshot 2025-12-01 at 3.59.05 PM.png" width="2572" height="1441" data-path="images/Screenshot2025-12-01at3.59.05PM.png" />

You can also:

* Put the back button beside the next button
* Change the text alignment
* Edit the input width
* Change the padding or spacing between fields

## Related articles

<CardGroup cols={3}>
  <Card color="#FFC738" icon="palette" iconType="regular" href="/help/themes" title="Themes">
    Select from hundreds of themes or create your own.
  </Card>

  <Card color="#FFC738" icon="message-image" iconType="regular" href="/help/custom-link" title="Custom form links">
    Customize your form's share link, subdomain and URL ending.
  </Card>

  <Card color="#FFC738" icon="arrow-pointer" iconType="regular" href="/help/reorder-with-drag-and-drop" title="Reorder with drag and drop">
    Easily arrange pages and field options.
  </Card>
</CardGroup>

<SupportBanner />