This article covers styling forms in Contact Form Ready. This article is based on Contact Form Ready v2.0.00.

 

A new feature in Contact Form Ready v.2.0.00 is the capability to add custom CSS styling to your forms. Go to WordPress Dashboard  → Contact Forms → Styling. To enable the custom styling, click in the checkbox following Enable custom styling. Then modify the styling for the listed elements as desired. Details of what can be changed for each element follow the screenshot. As you make styling changes they will be reflected in the sample form shown on the page.

 

 

Label Styling

The “label” is the descriptive text outside of the field. In the screenshot below the labels are Text field, Email field, and Text Area.

 

  • Font size – Enter the desired font size in pixels.
  • Font weight – Select the desired font weight from the dropdown list. 300 is normal weight and the larger the number the “bolder” the font will appear.
  • Font color – Enter the desired font color as a hexadecimal value.

 

Input

The “input” area is the area within the border boundaries for each field — that is, the area where you type your entry.

 

  • Background color – Enter the desired background color as a hexadecimal value. Note: “transparent” is also a valid value and is the default — this means that the background color of the containing CSS area will be used.
  • Border color – Enter the desired border color as a hexadecimal value.
  • Border hover color – Enter the desired hover color for the border as a hexadecimal value.
  • Font size – Enter the desired font size in pixels for the text you enter into the field.
  • Font color – Enter the desired font color for the text you enter into the field.

 

Submit button

 

  • Background color – Enter the desired background color as a hexadecimal value.
  • Background hover color – Enter the desired background hover color as a hexadecimal value.
  • Font size – Enter the desired font size for the button text in pixels.
  • Font color – Enter the desired font color as a hexadecimal value.
  • Font weight – Select the desired font weight from the dropdown list. 300 is normal weight and the larger the number the “bolder” the font will appear.
  • Text transform – Select uppercase if you want to ensure that the button text is all uppercase. Select none if you want the text displayed as typed.

 

 

 

Form with Custom Styling

 

 


This article covered styling forms in Contact Form Ready. If you need further assistance or are having other issues with the plugins, feel free to visit our Support Forum (on WordPress.org) or use our Contact Form.