Contact Form 7 Styles to Make Your Forms Look More Professional.

Contact Form 7 is a popular WordPress plugin that allows users to create custom contact forms on their websites. While the plugin provides a lot of flexibility and customization options, many users might not be familiar with CSS styling and how to apply it to their forms.

In this blog post, we’ll cover some basic Contact Form 7 styles that you can use to make your forms look more polished and professional.

/*
if want to center form add this css
*/

.wpcf7 {
  max-width: 600px;
  margin: 0 auto;
}

/*
Styling the form input fields
The default styling for the input fields is quite plain as well. 
You can add some basic styling to the input fields with the following CSS code:
*/

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size: 16px;
  font-family: Arial, sans-serif;
}

.wpcf7-form textarea {
  height: 150px;
  resize: vertical;
}

/*
Styling the form labels:
By default, the labels for the form fields are left-aligned and have no styling.
 You can add some basic styling to the labels with the following CSS code:
*/

.wpcf7-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

/*
Changing the color of the form submit button:
The default styling for the form submit button is quite plain. 
If you want to add some color to it, you can use the following CSS code:
*/

.wpcf7-form input[type="submit"] {
  background-color: #ef1923;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.wpcf7-response-output {
  margin-top: 20px;
  padding: 10px;
  border-radius: 5px;
  background-color: #f5f5f5;
  color: #333;
}