Skip to main content

Customizing Forms Using CSS

You can customize the appearance of your form using custom CSS. This tutorial demonstrates how to set a different background color for components inside the form.

  1. Type the CSS classes that you want to use inside the form, in the Custom CSS property field.

    For this example paste the following CSS classes:

    .change {
    background-color:red;
    }
    .spring {
    background-color:green
    }

  2. Hover over a form component and click Edit. Type one of the classes added at step 1 inside the Custom CSS Class field.

    1. For this example, edit a Text Field component, and paste the change CSS class inside the Custom CSS Class field. Watch the component turn red after saving it.

      docs image

    2. Edit a Text Area component, and paste the spring CSS class inside the Custom CSS Class field. Watch the component turn green after saving it...

    docs image

To see the making of and the result of this tutorial, watch the video below: