Each page has its own individual character and design. Forms used on our pages should be as consistent as possible with the rest of the design. Fortunately, the appearance of CRED forms can be easily adapted to suit every original style.

Styling options on CRED Settings/Import page

On the CRED Settings/Import page there are two options related to form styling: one to use Bootstrap in CRED forms, and the other to turn off default CRED styles.

Styling CRED - settings screen

Use Bootstrap in CRED forms

If your theme uses Bootstrap, your forms will look better when you select the “Use Bootstrap in CRED forms” option. In this case, classes for forms known from Bootstrap will be incorporated into the CRED forms’ HTML.

Do not load CRED style sheet on front-end

By default, CRED loads a small CSS file on the site’s front-end pages. This CSS file includes styling for several field types, such as error messages or tags list. This styling is required to display these fields correctly. If you prefer to provide this styling yourself, you can prevent CRED from loading any CSS on the front-end, by selecting the “Do not load CRED style sheets on front-end” option.


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.

Styling CRED - shortcode
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:
    • class – adds your custom class to certain fields
  • For every shortcode generating input or textarea
    • 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

A CRED form generated using  the “Auto-generate form” button contains not only CRED shortcodes, but also HTML markup.

Every field or group of fields is wrapped with HTML tags having meaningful classes, which you can see in CRED form editor.

Styling CRED - autogenerate button

Both HTML tags and classes can be freely changed without affecting the 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 having class: wpt-form-error

Styling CRED - error messages

Input

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

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 class: iris-picker

This is the iris picker used natively by WordPress.

Date

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

 

 

In order to change the calendar icon use filter: wptoolset_filter_wptoolset_calendar_image

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

Textarea

All textarea fields generated by CRED have class: wpt-form-textarea

A Textarea is generated by adding field:

  • Multiple Lines

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 class: wpt-form-select

To style multiple select fields use:

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

Radiobutton and checkbox

Single checkbox

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

The label for that checkbox has classes: wpt-form-label, wpt-form-checkbox-label

Set of checkboxes

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

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

Checkboxes inside LI elements have same classes as single checkbox.

Set of radiobuttons

The parent of radiobuttons 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

Label

Labels generated with “Auto-generate form” button have default class: wpt-form-label

It can be freely changed.

Labels generated for checkboxes and radiobuttons were described in section: Radiobutton and checkbox

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.