Toolset 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 Toolset forms

The HTML structure of Toolset 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 Forms automatically loads the necessary stylesheet.

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

Do not load Forms stylesheet on the front-end

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

Global Forms styling options
Global Forms 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 Forms legacy style sheets

If your site’s forms were created with Forms 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 Forms Settings page as seen in the image above.

When you update Forms 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.


Toolset forms markup overview

Toolset 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 Forms 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 Forms shortcodes:


Styling form elements

Form

By default, a Toolset 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 Toolset 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 Forms - 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 Forms have the wpt-form-textfield class.

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

input[name=&quot;NAME_OF_INPUT&quot;] {
    …
}

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*=&quot;phone-&quot;] input {
    …
}

Class Prefixes used for text input fields are:

Field NameParent class prefix
Datedate-
Emailemail-
URLurl-
Skypeskype-
Phonephone-
Single linetextfield-
Numericnumeric-
Integertextfield-
Colorpickercolorpicker-
Embedded Mediaurl-

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

Colorpicker

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

Date

Styling Forms - 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 Forms 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 Forms 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 Forms are input type:submit and have class: wpt-form-submit

Labels

There are two distinct types of labels in Toolset 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 Forms have class: wpt-form-file

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

input[name=&quot;NAME_OF_INPUT&quot;] {
   …
}

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=&quot;credaudio-*&quot;] input {
   …
}

Class Prefixes used for upload fields are

Field NameParent class prefix
Filecredfile-
Imagecredimage-
Audiocredaudio-
Videocredvideo-

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

Styling Forms - 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 Forms - 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 Forms - 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 Toolset forms:

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

Styling Forms - 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 Forms styles and scripts on the same page.

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


How to make Toolset forms responsive

Toolset 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 Toolset 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 Toolset forms

Non-hierarchical taxonomy styling

Styling Forms - 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 Forms - 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 Toolset forms, can be found on our Layouts based Classifieds page.

Customising the Forms button texts

A Toolset form will automatically insert buttons where needed, to add taxonomy terms to a post, for example.

Some of these button texts can be customised along with form messages in the Messages section of the form edit page, while some texts can only be customised using Forms PHP filters, as described below.

The following filters to update the button text are available:

  • toolset_button_add_new_text* (“Add New”)
  • toolset_button_cancel_text* (“Remove”)
  • toolset_button_add_text* (“Add”)
  • toolset_button_add_repetition_text (“Add new %s”)
  • toolset_button_delete_repetition_text (“Delete”)
  • toolset_button_show_popular_text* (“Show popular”)
  • toolset_button_hide_popular_text* (“Hide popular”)

Those marked * can also be edited directly in the Messages section of the form.

To use one of the above filters you must add a snippet of PHP, either in your theme’s functions.php file or using a plugin such as Code Snippets.

You will add a filter function which returns the desired string, which you should wrap in a gettext call to make it translatable.

Here is an example of using the toolset_button_add_new_text filter to change the default “Add New” text to “Suggest New”.

CRED filters
add_filter('toolset_button_add_new_text', 'fn_toolset_button_add_new_text');
function fn_toolset_button_add_new_text($text)
{
    return  __('Suggest New', 'wp-cred');
}

Note the Forms text domain ‘wp-cred’ is used in this example, but could be substituted with the theme or other text domain.