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% |
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?