> ## 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.

# HTML and CSS form fields

> Display testimonials, banners, or any static object. Customize design beyond standard themes with custom code.

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>;
};

<Tip>
  Looking to customize your form’s theme with CSS? Use Custom CSS instead.
</Tip>

## How to use the HTML field

The HTML field lets you add a custom HTML block to any part of your form, including custom CSS and custom Javascript code.

<Info>
  This feature is available on the **Business** and **Enterprise** plans. Learn more about our pricing plans and advanced features [**here**](https://www.fillout.com/pricing).
</Info>

Scroll down on the left-hand panel of your form and click the `HTML` field. Then, click its <Icon icon="gear-complex" iconType="solid" /> to `Edit HTML` and `Edit CSS` in the right-hand panel.

<img src="https://mintcdn.com/fillout-005a867b/UY_zAMXL0mMR8eHU/images/Screenshot2025-10-06at3.55.52PM.png?fit=max&auto=format&n=UY_zAMXL0mMR8eHU&q=85&s=c827bb5742b4e2a1457a803aab81f6f4" alt="Screenshot 2025-10-06 at 3.55.52 PM.png" width="2749" height="1442" data-path="images/Screenshot2025-10-06at3.55.52PM.png" />

The HTML will render within the field of your form. You can reposition it within your form just like any other field. Note that CSS will only be applied to the field itself.

You can also use [logic](/help/conditional-hiding) to make HTML and CSS blocks appear only when relevant to a respondent's choice.

## Custom scripts and iframes

The HTML block also supports scripts and iFrames. To support these, enable the `Allow scripts and iFrames` toggle in the right-hand panel.

Note that scripts only run in your published form, not in preview mode or in the editor. Go to the live mode of your form to test it out.

Furthermore, you will need to connect a [custom domain](/help/custom-domains) for the scripts to run and for iFrames to render.

<Warning>
  Currently, the HTML block is not easily suitable for adding form inputs. For example, it can’t be used to create custom input fields.
</Warning>

## HTML vs. CSS

**HTML** is the markup language used to structure content on the web. By writing HTML code for your form, you can control the layout of your form elements and add custom styles to make your form stand out.

On the other hand, **CSS** is the language used to style HTML content. By writing CSS code for your form, you can define the colors, fonts, and other visual properties of your form elements. This allows you to create a cohesive design that matches your brand identity, and makes your form look professional and polished.

## Relevant articles

<CardGroup cols={3}>
  <Card title="Hide fields" icon="eye-slash" iconType="regular" color="#FFC738" href="/help/conditional-hiding">
    Hide or show fields based on answers, URL parameters or data.
  </Card>

  <Card title="Condition groups" icon="table-tree" iconType="regular" color="#FFC738" href="/help/condition-logic-groups">
    Show or hide fields based on multiple conditions at once.
  </Card>
</CardGroup>

<SupportBanner />