Short Predefined CSS Classes Handbook

NB! Please note, that your theme also has own styles that can overlapping plugin styles. So if something went wrong please, check styles of your theme.

NB! Documentation is under construction. We’ll add full manual how to use predefined CSS classes soon.

From plugin version v.3.1.0 our plugin starts support predefined CSS classes. You can find short references about supported predefined CSS classes below divided by groups.

Columns

Columns for form elements

Classes work for all field types and allows to set general form layout as columns.

2-column layout

Classes should be added to 2 nearby (contiguous) fields into “CSS class” field in the fields advanced settings and allows to create “outer” columns:

CSS Class	Description
scfp-l2c-left	allows to create “left column” from a field with 50% width
scfp-l2c-right	allows to create “right column” from a field with 50% width

3-column layout

Classes should be added to 3 nearby (contiguous) fields into “CSS class” field in the fields advanced settings:

CSS Class	Description
scfp-l3c-left	allows to create “left column” from a field with 33% width
scfp-l3c-middle	allows to create “middle column” from a field with 33% width
scfp-l3c-right	allows to create “right column” from a field with 33% width

Columns for options group

Classes should be added to “checkbox(es)” or “radio buttons” field types into “CSS class” field in the fields advanced settings and allows to create “inner” columns inside options group:

CSS Class	Description
scfp-options-group-l2c	allows to divide options group on 2 columns with 50% width
scfp-options-group-l3c	allows to divide options group on 3 columns with 33% width
scfp-options-group-l4c	allows to divide options group on 4 columns with 25% width
scfp-options-group-l5c	allows to divide options group on 5 columns with 20% width
scfp-options-group-inline	allows to display options group “in one line” with initial width of options

Field Sizes

Field Width

Classes allows to configure field width and should to be added into “CSS class” field in the fields advanced settings. Works for following field types: text, number, email, captcha (alphabetic /numeric) input, textarea), drop down. Can be used in a pair with other predefined CSS classes.

CSS Class	Description
scfp-field-extrasmall	allows to set field width to 25%
scfp-field-small	allows to set field width to 33%
scfp-field-middle	allows to set field width to 50%
scfp-field-large	allows to set field width to 100%

NB! Please note that field % width calculated from 100%. For example, in case if you previously set for this field “scfp-l2c-left” class that make “50% left column” from field wrapper and set “scfp-field-middle” class that make 50% field width than 50% field width will be calculated form 100% wrapper width (i.e. 50%).

Message Field Height

Classes allows to configure height of the message field type and should to be added into “CSS class” field in the fields advanced settings. Works only for textarea field type. Can be used in a pair with other predefined CSS classes.

CSS Class	Description
scfp-mfield-extrasmall	allows to set field height to 50px
scfp-mfield-small	allows to set field height to 100px
scfp-mfield-middle	allows to set field height to 150px
scfp-mfield-large	allows to set field height to 250px

Drop Down Field Height (with Multiple Choice)

Classes allows to configure height of the message field type and should to be added into “CSS class” field in the fields advanced settings. Works only for dropdown field type with multiple choice. Can be used in a pair with other predefined CSS classes.

CSS Class	Description
scfp-msfield-extrasmall	allows to set field height to 50px
scfp-msfield-small	allows to set field height to 100px
scfp-msfield-middle	allows to set field height to 150px
scfp-msfield-large	allows to set field height to 250px

Text Alignment

Alignment of Field “Display Labels”

Classes allows to configure alignment of field “Display Label” and should to be added into “CSS class” field in the fields advanced settings. Works for all field types. Can be used in a pair with other predefined CSS classes.

CSS Class	Description
scfp-label-left	allows to align field “Display Label” to the left
scfp-label-center	allows to align field “Display Label” to the center
scfp-label-right	allows to align field “Display Label” to the right

Alignment of Text Inside Fields

Classes allows to configure alignment of text inside fields (fields that assume text values inside) and should to be added into “CSS class” field in the fields advanced settings. Work for following field types: text, number, email, captcha (alphabetic /numeric) input, textarea), drop down. Can be used in a pair with other predefined CSS classes.

CSS Class	Description
scfp-field-text-left	allows to align text inside fields to the left
scfp-field-text-center	allows to align text inside fields to the center
scfp-field-text-right	allows to align text inside fields to the right

RTL Direction

In case if you need to show contact form in RTL direction you are able to add specific CSS class “scfp-rtl” to “Form Custom CSS Class” option. This class will be added to general form wrapper and allows to show contact form as RTL.

Please, leave a feedback about the page. Was this article helpful?

1 0