You can customize the appearance of fields using the CSS editor, which is inside the group edit screen.

You can customize the visual appearance of the Field Group using the Styling Editor section, as shown in the previous image. Please note that this section is hidden by default. To enable it, add this line to your site’s wp-config.php file:

define('TYPES_USE_STYLING_EDITOR', true);

With this customization, user groups and fields can have any appearance that you like. Together with the field labels and description, you’ll be able to craft user profiles screens and fully customize their appearance.

When you edit a group, you will notice the Fields Styling Editor section.

Open the style editor

Click on Open style editor to start. The Style Editor includes the following sections:

Read / Edit mode selector

Mode selector

Remember that you can use Access to control who can edit and view fields in the WordPress admin? When users can only View fields they display as ‘read’ mode. The field value is output without an edit form.

When users can edit fields, they see them in the full ‘form’ mode, allowing to change field values.

Each of these modes uses a different HTML structure and will have different styling.

Field group HTML

Field group HTML

The Field group HTML section shows you the HTML that will be displayed. It changes when you move between Edit and Read only modes. You cannot change the content in the Field group HTML section. It’s there to show you the CSS classes of the different elements. With this, you can more easily edit the CSS to achieve the design you like.

Your CSS

Your CSS

The CSS section is where you actually enter the CSS to design the fields. Use the Field group HTML from the previous section to check the CSS classes for different fields. Notice that there are generic classes for all fields and specific classes for different fields.

In our example, we’ve set the background color of the field description to yellow, by entering:

.wpcf-form-description { background-color: yellow; }

Field group preview

Field preview

The Field group preview section shows you how the field will look with the CSS that you’ve entered. To update it, click on Update preview.

When you are happy with the new design, click on the OK button.