Contact form 7 is a simple and wonderful tool to collect potential leads form your website through contact form, request call forms etc.. It provides almost all features a contact form is required for free, whereas other contact form provide such features for payment. Though contact form is simple, it requires some css skills to make it look wonderful. We have a standard script to make your contact form 7 look gorgeous. However, you may need to make some changes according to your requirement.
What does this css script do ?
1. Reduced gap between the fields
2. Change size, shape, background color and hover effect of contact form submit button
3. Change border color of input fields
4. Change border color of focus input field
5. Add two columns to the contact form fields
.wpcf7-form p {
margin-bottom: 5px; /* Adjust this value to your needs */
color: black;
}
.submit-container {
display: flex;
margin-left: 10px;
}
/* Change the background color of the submit button */
.wpcf7 input[type="submit"] {
background-color: #0073aa; /* Change this to your desired color */
color: white; /* Change this to your desired text color */
border: none; /* Remove border if desired */
padding: 10px 20px; /* Adjust padding if needed */
cursor: pointer; /* Change cursor to pointer */
border-radius: 5px; /* Add rounded corners if desired */
font-size: 12px; /* Adjust font size if needed */
}
/* Optional: Change background color on hover */
.wpcf7 input[type="submit"]:hover {
background-color: #005f8d; /* Change this to your desired hover color */
}
/* Change border color for input fields */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
border-color: #3b3a39; /* Change to your desired color */
border-width: 1px; /* Optional: Adjust border thickness */
border-radius: 5px; /* Optional: Add rounded corners */
}
/* Change border color on focus */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
border-color: #3399ff; /* Change to a different color for focus */
outline: none; /* Remove default focus outline */
}
/* Two-column layout for Contact Form 7 */
.cf7-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.cf7-column {
flex: 1;
max-width: 48%; /* Two columns on larger screens */
box-sizing: border-box;
}
.cf7-column textarea,
.cf7-column input,
.cf7-column select {
width: 100%; /* Ensure input elements span full width */
box-sizing: border-box;
}
/* Mobile responsiveness */
@media screen and (max-width: 768px) {
.cf7-column {
max-width: 100%; /* Full width on mobile */
}
}
/* Tablet and mobile responsiveness */
@media screen and (max-width: 1024px) {
.cf7-column {
max-width: 100%; /* Full width on tablets and smaller screens */
}
}
The above css script has style settings for two columns. You have to implement the
in contact form fields as shown below. You can leave it blank for the full width field. And add
to fields which need two columns
The output is as follows
The output of above settings can be viewed on our contact form 7
