WordPress is a popular content management system (CMS) that powers millions of websites worldwide, thanks to its user-friendly interface and extensive plugin ecosystem. One of the most widely used plugins is Contact Form 7, known for its simplicity and robust features. Customizing the form's appearance can enhance user experience and align it with your website's design. Here, we'll explore various CSS examples to style Contact Form 7 in WordPress.
Before diving into the CSS examples, ensure that you have the Contact Form 7 plugin installed and activated in your WordPress dashboard. After creating and displaying a form, you can apply custom styling using the built-in CSS panel in the form editor or by adding custom CSS in your theme or child theme's stylesheet.
Basic CSS Styling
Let's start with some basic CSS properties to change the form's appearance. For these examples, we'll assume you're using the plugin's CSS panel to apply styles.
First, give your form a class or ID to target its contained elements. Add this snippet to the 'Additional Settings' tab of your form:
```css /* Add a class or ID to your form */ (wpcf7-form) .wpcf7-form-control { ```
A simple way to change the form background color and font size is using the following CSS:
```css /* Change form background color and font size */ .wpcf7-form { background-color: #f8f9fa; font-size: 16px; } .wpcf7-form-control { background-color: #fff; border: 1px solid #ced4da; border-radius: 4px; margin-bottom: 10px; padding: 10px; } ```
Styling Input Fields
You can further customize input fields, such as text boxes and textarea, with different colors, styles, and focus states. Here's an example using Google's Material Design color palette:
```css /* Style input fields using Material Design colors */ .wpcf7-form-control.wpcf7-text { color: #212529; background-color: #ffffff; border: 1px solid #ced4da; } .wpcf7-form-control.wpcf7-text:focus { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .wpcf7-form-control.wpcf7-textarea { resize: vertical; } .wpcf7-form-control.wpcf7-submit { background-color: #007bff; border-color: #007bff; color: #ffffff; transition: background-color 0.3s ease; } .wpcf7-form-control.wpcf7-submit:hover { background-color: #0062cc; } ```
Customizing Labels and Placeholders
Make your form more visually appealing by styling labels and placeholders. Here's an example using different font weights and colors:
```css /* Style labels and placeholders */ .wpcf7-form-control-label { font-weight: 600; color: #495057; } .wpcf7-form-control.wpcf7-text::-webkit-input-placeholder { color: #6c757d; } .wpcf7-form-control.wpcf7-text::-moz-placeholder { color: #6c757d; } .wpcf7-form-control.wpcf7-text:-ms-input-placeholder { color: #6c757d; } ```
Responsive Design
Responsive design ensures that your forms look good on various devices and screen sizes. Contact Form 7 supports responsive designs out of the box, but you can further fine-tune the responsiveness using media queries. Here's an example to make your form full-width on small screens:
```css /* Make form full-width on small screens */ @media (max-width: 575.98px) { .wpcf7-form { width: 100%; } .wpcf7-form-control { width: 100%; } } ```
Styling Error Messages
Customize error messages to provide clear and visually distinct indicators to users. Here's an example using red text and background colors:
```css /* Style error messages */ .wpcf7-not-valid { color: #dc3545; background-color: #fff7f7; border-color: #dc3545; } ```
The examples above demonstrate the versatility of Contact Form 7 and its integration with CSS. You can combine and build upon these examples to create beautifully styled forms that engage your users and seamlessly blend with your website's design. Happy styling!