All form elements can be styled using CSS.

To get started styling Contact Form 7 forms, please read this: https://contactform7.com/styling-contact-form/

To style Conditional Fields specific elements, here’s a list of selectors you can use:

Groups

Each group is wrapped with an elemenent (div or span) with a data-class attribute with the value: wpcf7cf_group, accessible with the selector [data-class= wpcf7cf_group].

Hidden groups get an additional class attribute of wpcf7cf-hidden, accessible with the selector .wpcf7cf-hidden

Repeaters (Pro)

A repeater is wrapped by a div with the class .wpcf7cf_repeater

A repeater contains repeatable portions, called sub-repeaters. Each sub repeater is wrapped with a div with the class .wpcf7cf_repeater_sub

The buttons are wrapped in a div with class .wpcf7cf_repeater_controls

The add button is inside a span with class .wpcf7cf_add-container

The add button itself is a button element with class .wpcf7cf_add

The remove button is inside a span with class .wpcf7cf_remove-container

The remove button itself is a button element with class .wpcf7cf_remove

Multistep (Pro)

The header showing the steps and the current step is wrapped with a div with class .wpcf7cf_steps-dots

Each step-dot has a class .dot

The active step-dot will have an additional class .active

The steps are wrapped with a div with class .wpcf7cf_steps

Note: The steps are hidden/shown with Javascript, and so they are always present in the form, although (if everything goes right) you can only see one at a time.

Each step is wrapped with a class .wpcf7cf_step

The buttons are wrapped in a div with class .wpcf7cf_step_controls

The previous step button is inside a span with class .wpcf7cf_prev-container

The previous step button itself is a button element with class .wpcf7cf_prev

The next step button is inside a span with class .wpcf7cf_next-container

The next step button itself is a button element with class .wpcf7cf_next