How to align form and labels at the center of a page

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

Form Alignment

In case if you need to align form at the center of a page you need to add following css-snippet to your theme stylesheet:

#[form_id].scfp-form { 
          margin: 0 auto;
          width: [form_width]px;
}

or

.scfp-form-content { 
          margin: 0 auto;
          width: [form_width]px;
}

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”)
  • [form_width] – any numeric value, for example 350 (i.e. 350px).
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.

Labels Alignment

NB! CSS-snippet is deprecated from plugin v.3.1.0. Please, use preset CSS classes for “CSS Class” additional field option.

In case if you need to align form labels at the center of a form fields you need to add following css-snippet to your theme stylesheet:

#[form_id].scfp-form .scfp-form-row > .scfp-form-label {
    text-align: center !important;
    width: 100%;
}

or

.scfp-form-content .scfp-form-row > .scfp-form-label {
    text-align: center !important;
    width: 100%;
}

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”)
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