Form elements font size

Prev
Next

Font size that used for form elements based on font size that definined in your active theme stylesheet. We have no influence to font size of form elements by the plugin styles, however you can find some notes below:

  • label – font size equal to the font size that defined in your theme stylesheet for label or global font-size on parent element or global font-size on body;
  • input, textarea, drop down – font size equal to the 90% from font size that defined in your theme stylesheet for form elements or global font-size on parent element or global font-size on body;
  • “Submit” button – font size equal to the 90% from font size that defined in your theme stylesheet for input type “submit” or global font-size on parent element or global font-size on body.

In case if you will need to make customization of the font size of the form elements you can use following CSS spinets in the stylesheet from your active theme:

Labels

#[form_id] .scfp-form-content .scfp-form-row .scfp-form-label { 
          font-size: [your_value]px !impotrant;
}

where

  • [form_id] – form ID value (not required in case if styles overlapping via class name without issues. You can try to remove “#[form_id]” before “.scfp-form-content”)
  • [your_value] – any numeric value, for example 15 (i.e. 15px). Also you can use other measurement units except PX – em, % etc;
  • [!important] – not required in case if styles overlapping via class name without issues
NB! You can get form ID in following ways:

  • if you use form as shortcode, you can use ID from form shortcode (i.e. for [wcp_contactform id="wcpform_1"]) form ID is “wcpform_1” and you need to add “#wcpform_1” before “.scfp-form-content “;
  • if you use form as widget, you can get form ID via viewing of HTML-source of the page.

Form Elements (input, textarea, drop down)

#[form_id] .scfp-form-content .scfp-form-row .scfp-form-field { 
          font-size: [your_value]px !impotrant;
}

where

  • [form_id] – form ID value (not required in case if styles overlapping via class name without issues. You can try to remove “#[form_id]” before “.scfp-form-content”)
  • [your_value] – any numeric value, for example 15 (i.e. 15px). Also you can use other measurement units except PX – em, % etc;
  • [!important] – not required in case if styles overlapping via class name without issues
NB! You can get form ID in following ways:

  • if you use form as shortcode, you can use ID from form shortcode (i.e. for [wcp_contactform id="wcpform_1"]) form ID is “wcpform_1” and you need to add “#wcpform_1” before “.scfp-form-content “;
  • if you use form as widget, you can get form ID via viewing of HTML-source of the page.

Submit Button

#[form_id] .scfp-form-content .scfp-form-action .scfp-form-submit { 
          font-size: [your_value]px !impotrant;
}

where

  • [form_id] – form ID value (not required in case if styles overlapping via class name without issues. You can try to remove “#[form_id]” before “.scfp-form-content”)
  • [your_value] – any numeric value, for example 15 (i.e. 15px). Also you can use other measurement units except PX – em, % etc;
  • [!important] – not required in case if styles overlapping via class name without issues
NB! You can get form ID in following ways:

  • if you use form as shortcode, you can use ID from form shortcode (i.e. for [wcp_contactform id="wcpform_1"]) form ID is “wcpform_1” and you need to add “#wcpform_1” before “.scfp-form-content “;
  • if you use form as widget, you can get form ID via viewing of HTML-source of the page.

Textarea (personal styles)

#[form_id] .scfp-form-content .scfp-form-row .scfp-form-message-field { 
          font-size: [your_value]px !impotrant;
}

where

  • [form_id] – form ID value (not required in case if styles overlapping via class name without issues. You can try to remove “#[form_id]” before “.scfp-form-content”)
  • [your_value] – any numeric value, for example 15 (i.e. 15px). Also you can use other measurement units except PX – em, % etc;
  • [!important] – not required in case if styles overlapping via class name without issues
NB! You can get form ID in following ways:

  • if you use form as shortcode, you can use ID from form shortcode (i.e. for [wcp_contactform id="wcpform_1"]) form ID is “wcpform_1” and you need to add “#wcpform_1” before “.scfp-form-content “;
  • if you use form as widget, you can get form ID via viewing of HTML-source of the page.

Drop Down (select)

#[form_id] .scfp-form-content .scfp-form-row.scfp-form-row-dropdown .scfp-form-row-dropdown-wrapper select.scfp-dropdown-field { 
          font-size: [your_value]px !impotrant;
}

where

  • [form_id] – form ID value (not required in case if styles overlapping via class name without issues. You can try to remove “#[form_id]” before “.scfp-form-content”)
  • [your_value] – any numeric value, for example 15 (i.e. 15px). Also you can use other measurement units except PX – em, % etc;
  • [!important] – not required in case if styles overlapping via class name without issues
NB! You can get form ID in following ways:

  • if you use form as shortcode, you can use ID from form shortcode (i.e. for [wcp_contactform id="wcpform_1"]) form ID is “wcpform_1” and you need to add “#wcpform_1” before “.scfp-form-content “;
  • if you use form as widget, you can get form ID via viewing of HTML-source of the page.

Internal Labels for options group (checkboxes / radio buttons)

#[form_id] .scfp-form-content .scfp-form-row-checkbox .scfp-form-row-checkbox-row label.scfp-form-label { 
          font-size: [your_value]px !impotrant;
          line-height: [your_value]px !impotrant;
}
#[form_id] .scfp-form-content .scfp-form-row-radio .scfp-form-row-radio-row label.scfp-form-label { 
          font-size: [your_value]px !impotrant;
          line-height: [your_value]px !impotrant;
}

or

#[form_id] .scfp-form-content .scfp-form-row-checkbox .scfp-form-row-checkbox-row label.scfp-form-label,
#[form_id] .scfp-form-content .scfp-form-row-radio .scfp-form-row-radio-row label.scfp-form-label { 
          font-size: [your_value]px !impotrant;
          line-height: [your_value]px !impotrant;
}

where

  • [form_id] – form ID value (not required in case if styles overlapping via class name without issues. You can try to remove “#[form_id]” before “.scfp-form-content”)
  • [your_value] – any numeric value, for example 15 (i.e. 15px). Also you can use other measurement units except PX – em, % etc;
  • [!important] – not required in case if styles overlapping via class name without issues;
  • [line-height] – not required, you can use this property to increase or decrease space beetween 2 lines of text
NB! You can get form ID in following ways:

  • if you use form as shortcode, you can use ID from form shortcode (i.e. for [wcp_contactform id="wcpform_1"]) form ID is “wcpform_1” and you need to add “#wcpform_1” before “.scfp-form-content “;
  • if you use form as widget, you can get form ID via viewing of HTML-source of the page.
Prev
Next

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

0 0