CRED forms look good out-of-the-box, regardless of the theme you are using. Their appearance can also be easily adapted to suit your site’s original style and make them consistent as possible with the rest of the design.

Styling options for CRED forms

Since the 1.9 release, the HTML structure of CRED forms makes them look good on any site, the moment you create them. The output is completely compatible with Bootstrap, but even if your theme is not using it, the forms still look great because CRED automatically loads the necessary stylesheet.

Of course, you can also apply any additional custom styling to the forms.

Please note that besides customizing the styling of your CRED forms, you can also arrange the form elements into columns, by using the Grid button in the form content editor.

Do not load CRED style sheet on front-end

If you want to disable the default styling to be loaded by CRED, you can set this in the settings. Go to the Toolset -> Settings page and click the Forms tab. There, select the Do not load CRED style sheets on front-end option in the Styling section.

Global CRED styling options
Global CRED styling options

Please note that in this case, you need to provide all the necessary form styling yourself, including the one for form elements, error messages, and others.

Loading the CRED legacy style sheets

If your site’s forms were created with CRED prior to the 1.9 version, it needs to load a legacy stylesheet that makes the old forms look good.

This option is found on the same CRED Settings page as seen in the image above.

When you update CRED from a version prior to the 1.9 version, the plugin will automatically mark this option for you, so that your existing forms keep looking good.


CRED forms markup overview

CRED forms’ functionality is controlled by shortcodes, which are texts wrapped in square brackets.

Each shortcode consists of a name and attributes. Shortcode names and certain attributes should never be changed, but the remaining attributes can be freely changed.

Selected red - do not edit Selected green - may be edited
Selected red – do not edit
Selected green – may be edited

Shortcode names generated by CRED that should never be changed are:

  • [credform]
  • [cred_field]
  • [cred_generic_field]

Attributes that must not be changed if you do not want shortcode behavior to change:

  • field
  • post

Attributes that may be freely edited are:

  • For every shortcode:
  • For every shortcode generating input or text area
    • placeholder – adds your custom help text to a certain field
  • For every shortcode-generating submit or button:
    • value – text displayed on submit or button

More about CRED shortcodes:

Auto-generate form markup

Using the Auto-generate form button to start creating your forms is usually the best option. The auto-generate feature wraps each form element in a div tag with the form-group class. It also adds a label class to the element. This allows you to use your own CSS styling and easily target and customize and form element.

Styling CRED - autogenerate button

Both HTML tags and classes can be freely changed without affecting the basic functionality of the CRED forms.

The shortcode editing rules above also apply to shortcodes generated by the Auto-generate form markup function.

More about generating CRED form markup:


Styling form elements

Form

By default, a CRED form has class: cred-form

[credform class="cred-form"]

It may be freely changed.

Form messages

Both types of validation messages – the ones that appear above a CRED form, and the ones that appear next to the field that caused the error – are wrapped with a container that has a wpt-form-error class.

Styling CRED - error messages

Error messages

Use the wpt-form-error class for error messages.

Example: <label id=”[field]” class=”wpt-form-error”>…</label>

Success messages

Use the wpt-form-error class for success messages

Example: <label id=”[field]” class=”wpt-form-success”>…</label>

Input

All input fields generated by CRED have the wpt-form-textfield class.

To style individual input, add a custom class to its shortcode or use:

input[name="NAME_OF_INPUT"] {
    …
}

To style all fields by type (e.g. all colorpickers, or all date fields) use the data-item_name attribute that is automatically added to every field DIV wrapper.

For example, to style all phone inputs use:

div[data-item_name="phone-*"] input {
    …
}

Class Prefixes used for text input fields are:

Field Name Parent class prefix
Date date-
Email email-
URL url-
Skype skype-
Phone phone-
Single line textfield-
Numeric numeric-
Integer textfield-
Colorpicker colorpicker-
Embedded Media url-

Some CRED input fields have special controls or buttons, which can be styled as follows:

Colorpicker

Styling CRED - colorpicker The colorpicker used by these fields has the js-wpt-colorpicker class.

Date

Styling CRED - clear date The button that clears the selected date has the wpt-date-clear class.

 

 

In order to change the calendar icon, use the wptoolset_filter_wptoolset_calendar_image filter.

The date field uses jQueryUI Datepicker. Information about styling jQuery UI Datepicker can be found here:

Textarea

All text area fields generated by CRED have the wpt-form-textarea class.

A Textarea is generated by adding the Multiple Lines field.

WYSIWYG

NOTE: Editing default WYSIWYG appearance is only recommended for users who are experts in HTML and CSS coding.

Select

All select fields generated by CRED have the wpt-form-select class.

To style multiple select fields use:

.wpt-form-select[MULTIPLE] {
    …
}

Radiobutton and checkbox

Single checkbox

Input type:checkbox has the wpt-form-checkbox class.

The label for that checkbox has the wpt-form-label and wpt-form-checkbox-label classes.

Set of checkboxes

The parent of checkboxes set is UL, and its classes are: wpt-form-set-checkboxes and wpt-form-set-checkboxes-SET_NAME.

All LI elements inside this set have the wpt-form-item-checkbox class.

Checkboxes inside LI elements have same classes as a single checkbox.

Set of radio buttons

The parent of radio buttons set is UL, and its classes are: wpt-form-set-radios, wpt-form-set-radios-SET_NAME

All LI elements inside this set have class: wpt-form-item-radio

Input type:radio has class: wpt-form-radio

Label for that radio has classes: wpt-form-label, wpt-form-radio-label

Submit

Submit fields generated by CRED are input type:submit and have class: wpt-form-submit

Labels

There are two distinct types of labels in CRED forms: main label for the field (email, date, URL, etc.) and the label for the field’s options.

Main field label

Labels for the main fields in your forms, such as email, date, etc. have the cred-label class.

 

Fields options labels

Labels for specific fields options (for example radio field has multiple radio buttons), have two main classes:

  • wpt-form-label – main class shared by all fields options
  • wpt-form-[field name]-label – field-specific class, where [field name] is the name of the field that contains this specific option.

For example, a multiple checkboxes field labels have default classes: wpt-form-label wpt-form-checkbox-label

Please note that these classes are automatically added when form auto-generation is used and can be freely changed.

Upload

All upload fields generated by CRED have class: wpt-form-file

To style individual inputs, add a custom class to its shortcode or use:

input[name="NAME_OF_INPUT"] {
   …
}

To style all fields by type (e.g. all image upload files, or all audio upload fields), use the data-item_name attribute automatically added to every field DIV wrapper.

For example, to style all audio upload fields use:

div[data-item_name="credaudio-*"] input {
   …
}

Class Prefixes used for upload fields are

Field Name Parent class prefix
File credfile-
Image credimage-
Audio credaudio-
Video credvideo-

Buttons appearing next to upload file field can also be styled:

Styling CRED - image repetition

  • Button appearing when file is chosen has class (to clear this field): wpt-credfile-delete
  • Button with which more files can be added has class: wpt-repadd
  • Button with which additional upload file fields can be deleted has class: wpt-repdelete

Hierarchical taxonomy

Hierarchical taxonomies have 2 modes of display. These modes are “checkbox” and “select”.

In both cases, a list of taxonomy terms is wrapped with a DIV that has classes: cred-taxonomy cred-taxonomy-TAXONOMY_SLUG

For example to style Location taxonomy use:

.cred-taxonomy-location {
   …

Select hierarchical taxonomy

Select taxonomy styling is the same as for multiple select fields.

Checkboxes hierarchical taxonomy

Terms are listed in a UL list. Its structure is:

Adding new term to taxonomy

Styling CRED - add new term

Add new term toggle button class is: wpt-hierarchical-taxonomy-add-new-show-hide

When adding new term form is visible the toggle button has additional class: btn-cancel

Adding a new term form is wrapped with DIV that has class: wpt-hierarchical-taxonomy-add-new

Title input has class: wpt-new-taxonomy-title

Taxonomy parent select has class: wpt-taxonomy-parent

Button that confirms adding new term has class: wpt-hierarchical-taxonomy-add-new

Non-hierarchical taxonomy

Taxonomy section is wrapped with DIV that has classes: cred-taxonomy cred-taxonomy-TAXONOMY_SLUG

For example to style Tag taxonomy use:

.cred-taxonomy-tag {
    …
}

Styling CRED - non-hierarchical taxonomy

Field for new term title has class: wpt-new-taxonomy-title

Button that confirms adding new term has class: wpt-taxonomy-add-new

List of added terms wrapper has class: tagchecklist

Button that deletes added single term has class: ntdelbutton

Button toggling popular terms has class: wpt-taxonomy-popular-show-hide

Wrapper of popular terms has class: wpt-taxonomy-show-popular-list

Single popular tag has class: wpt-taxonomy-popular-add


Custom CSS and JavaScript

There are two ways of adding styling to CRED forms:

  • Traditional way: by editing theme files (style.css)
  • Using CRED form fields for CSS and JavaScript

Styling CRED - custom CSS and JS Under the main form content area, there are boxes that let you include any CSS and JavaScript (with syntax highlight for easier editing).

These additional styles and scripts are added after the basic CRED styles and scripts on the same page.

These custom styles and scripts are also included in the package when you export CRED form or use Module Manager


How to make CRED forms responsive

CRED forms, as any HTML form, are responsive out of the box – whether Bootstrap is used or not. The challenge is not to break the inherent CRED form responsiveness.

  1. Use percent values instead of pixels while setting elements width, e.g.
    Instead of setting form width to 700px use:
form {
    width: 90%;
}
  1. Do not set fixed height on buttons or labels – on smaller devices, text may break into more lines
  2. Use media queries for smaller devices, especially if your form has more than one column


Examples of styling CRED forms

Non-hierarchical taxonomy styling

Styling CRED - non-hierarchical taxonomy

Non-hierarchical taxonomy styling
/* Input: New term title */
.wpt-new-taxonomy-title {

    /* regular styling */
    border: 1px solid #e4e4e4;
    padding: 10px 15px;

    /* padding not adding up to width */
    box-sizing: border-box;

    /* input shortened so that button could fit in the same line */
    max-width: calc(100% - 110px);
}

/* Button: Add new term */
.wpt-taxonomy-add-new {

    /* regular styling */
    background: #ececec;
    border: 1px solid  #dfdfdf;
    color: #5f5f5f;
    display: inline-block;
    padding: 6px 12px;
    text-align: center;
    text-transform: uppercase;

    /* button as height as input */
    line-height: 28px;
}

/* Button: Toggle popular terms */
.wpt-taxonomy-popular-show-hide {

    /* Reset button styling */
    background-color: transparent;
    border: none;
    outline: none;
    /* Regular styling */
    color: #29b6a6;
    text-decoration: underline;
    padding: 10px 0;
}

Add image (with repeater) styling

Styling CRED - image repetition

Add image styling
.wpt-repdelete,
.wpt-credfile-delete {

    /* Reset button styling */
    border: none;
    outline: none;

    /* Regular styling */
    color: #f54040;
    font-size: 0.85em;
    line-height: 18px;
}

/* Button: Delete additional image field*/
.wpt-repdelete {

    /* Regular styling */
    background: url("img/trash.png") center left no-repeat;
    margin-top: 3px;
    margin-left: 0;
    margin-bottom: 15px;
    padding: 2px 0 0 22px;
}

/* Button: Clear image field*/
.wpt-credfile-delete {

    /* Regular styling */
    background: url("img/clear.png") center left no-repeat;
    margin-bottom: 3px;
    margin-left: 5px;
    padding: 0 0 0 13px;
}

/* Button: Add image field */
.wpt-repadd {

    /* Reset button styling */
    border: none;
    outline: none;

    /* Regular styling */
    background: url("img/add-new.png") center left no-repeat;
    color: #29b6a6;
    line-height: 24px;
    padding-left: 30px;
    text-decoration: underline;
}

/* Input: Choose file */
.wpt-credfile-upload-file {
    border: 1px solid #e4e4e4;
    padding: 10px 15px;
    width: 100%;
}

These two examples, as well as fully styled CRED forms, can be found on our Layouts based Classifieds page.