How to style Contact Form 7 using CSS in WordPress

The most popular plugin for creating contact forms for WordPress is Contact Form 7. But when you create a contact form with it, you will see that its design is very simple. Which is not attractive to users, so in this article we will show you how to create an attractive contact form using Contact Form 7.

What is Contact Form 7

Contact Form 7 is a free open source WordPress plugin that allows users to easily create and manage contact forms and other types of forms on their websites.

Key Features of Contact Form 7

Simplicity & Lightweight: The plugin is very lightweight and does not slow down your website.

Flexibility: Not only contact forms, you can create any type of custom form such as: recruitment forms, survey forms, order forms, etc.

Mail Integration: The data received from the form can be automatically sent to your email. You can set up multiple recipients, reply to fields, and HTML emails.

Customization: You can customize each field of the form as you like. Text fields, email fields, dropdown menus, checkboxes, radio buttons, file uploads everything can be added.

Multiple Forms: You can create and use multiple and different types of forms on your website at the same time.

Spam Protection: The plugin supports Akismet spam filtering and CAPTCHA to prevent spam submissions.

Add-On Support: It has a huge community. Thousands of free and premium add-on plugins are available that extend the functionality of CF7.

How it Works Contact Form 7

You create a new form from the Contact menu in the WordPress admin panel and use HTML/CSS to design and style the form fields.

You set the email address to which the data will be sent when the form is submitted, the subject of the email, and the information to be displayed in the body of the email.

Once the form is created, the plugin will automatically assign a unique shortcode contact-form-7 id=”123″ title=”Contact form 1″

You can paste this shortcode into any post, page, or widget area to display the form there.

How to style Contact Form 7

Here I will give the CSS code to make Contact Form 7 stylish. You can use that code to make your form stylish. You can use CSS codes from your WordPress dashboard. For this you have to go to the customize option from appearance then go to additional CSS and paste your CSS.

Style Contact Form 7 using CSS

/* ===== Modern Contact Form 7 Style ===== */

/* Form Wrapper */
.wpcf7 form {
  background: #ffffff;
  border-radius: 16px;
  padding: 40px 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  max-width: 600px;
  margin: 40px auto;
  transition: all 0.3s ease;
}

/* Form Title (optional – if you add h2 or h3 inside form) */
.wpcf7 form h2, 
.wpcf7 form h3 {
  text-align: center;
  color: #222;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Labels */
.wpcf7-form label {
  display: block;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
  font-size: 15px;
}

/* Input and Textarea */
.wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  color: #333;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
}

/* Focus Effect */
.wpcf7-form-control:not(.wpcf7-submit):focus {
  border-color: #0073e6;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(0,115,230,0.15);
  outline: none;
}

/* Textarea Resize Fix */
.wpcf7-textarea {
  min-height: 140px;
  resize: vertical;
}

/* Submit Button */
.wpcf7-submit {
  background: #0073e6;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: all 0.3s ease;
}

.wpcf7-submit:hover {
  background: #005bb5;
  box-shadow: 0 6px 20px rgba(0,115,230,0.3);
}

/* Success and Error Messages */
.wpcf7-response-output {
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 15px;
}

.wpcf7-response-output.wpcf7-mail-sent-ok {
  background-color: #e6ffed;
  color: #0a8a28;
  border: 1px solid #a5e6b8;
}

.wpcf7-response-output.wpcf7-validation-errors {
  background-color: #fff0f0;
  color: #d93025;
  border: 1px solid #f5b5b5;
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .wpcf7 form {
    padding: 25px 20px;
  }
  .wpcf7-submit {
    font-size: 15px;
    padding: 12px 20px;
  }
}

Contact Form 7 CSS

/* Contact Form 7 Modern Styling */
.wpcf7 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
}

.wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Form Labels */
.wpcf7-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #374151;
    font-size: 0.95rem;
}

/* Form Controls Container */
.wpcf7-form-control-wrap {
    display: block;
    position: relative;
}

/* Input Fields */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    background: #ffffff;
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background: #ffffff;
}

/* Textarea Specific Styles */
.wpcf7-form textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

/* Submit Button */
.wpcf7-form input[type="submit"] {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: normal;
    width: auto;
    align-self: flex-start;
    min-width: 140px;
}

.wpcf7-form input[type="submit"]:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.wpcf7-form input[type="submit"]:active {
    transform: translateY(0);
}

/* Checkboxes and Radio Buttons */
.wpcf7-form .wpcf7-checkbox,
.wpcf7-form .wpcf7-radio {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wpcf7-form .wpcf7-list-item {
    margin-left: 0;
}

.wpcf7-form .wpcf7-checkbox input[type="checkbox"],
.wpcf7-form .wpcf7-radio input[type="radio"] {
    margin-right: 0.75rem;
    transform: scale(1.2);
}

/* Validation Styles */
.wpcf7-form .wpcf7-not-valid-tip {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: block;
}

.wpcf7-form .wpcf7-not-valid {
    border-color: #dc2626 !important;
}

.wpcf7-form .wpcf7-not-valid:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* Response Output */
.wpcf7-response-output {
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin: 1rem 0 !important;
    border: 1px solid !important;
    font-size: 0.95rem;
}

.wpcf7-mail-sent-ok {
    background: #dcfce7;
    border-color: #22c55e !important;
    color: #166534;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
    background: #fef2f2;
    border-color: #dc2626 !important;
    color: #991b1b;
}

/* Loading State */
.wpcf7-form .wpcf7-spinner {
    margin: 0;
    margin-left: 1rem;
}

.wpcf7-form.submitting input[type="submit"] {
    opacity: 0.7;
    pointer-events: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .wpcf7 {
        padding: 1rem;
    }
    
    .wpcf7-form {
        gap: 1rem;
    }
    
    .wpcf7-form input[type="text"],
    .wpcf7-form input[type="email"],
    .wpcf7-form input[type="tel"],
    .wpcf7-form input[type="url"],
    .wpcf7-form textarea {
        padding: 0.875rem 1rem;
    }
    
    .wpcf7-form input[type="submit"] {
        width: 100%;
        align-self: stretch;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .wpcf7-form label {
        color: #f3f4f6;
    }
    
    .wpcf7-form input[type="text"],
    .wpcf7-form input[type="email"],
    .wpcf7-form input[type="tel"],
    .wpcf7-form input[type="url"],
    .wpcf7-form textarea {
        background: #374151;
        border-color: #4b5563;
        color: #f9fafb;
    }
    
    .wpcf7-form input[type="text"]:focus,
    .wpcf7-form input[type="email"]:focus,
    .wpcf7-form input[type="tel"]:focus,
    .wpcf7-form input[type="url"]:focus,
    .wpcf7-form textarea:focus {
        background: #374151;
        color: #f9fafb;
    }
}

Contact Form 7 CSS

/* ===== Premium Modern Contact Form 7 Design ===== */

/* Form Container */
.wpcf7 form {
  background: #ffffff;
  border-radius: 24px;
  padding: 50px 40px;
  max-width: 700px;
  margin: 80px auto;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  transition: all 0.4s ease;
}

/* Hover floating effect */
.wpcf7 form:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.12);
}

/* Title (optional) */
.wpcf7 form h2,
.wpcf7 form h3 {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 25px;
  letter-spacing: -0.5px;
}

/* Description text (optional) */
.wpcf7 form p.intro-text {
  text-align: center;
  color: #555;
  font-size: 15px;
  margin-bottom: 35px;
}

/* Labels */
.wpcf7-form label {
  display: block;
  color: #222;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
}

/* Inputs, Select, Textarea */
.wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  background: #fafafa;
  font-size: 15px;
  color: #333;
  transition: all 0.3s ease;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
}

.wpcf7-form-control::placeholder {
  color: #aaa;
  font-weight: 400;
}

/* Focus effect */
.wpcf7-form-control:not(.wpcf7-submit):focus {
  background: #fff;
  border-color: #0073e6;
  box-shadow: 0 0 0 4px rgba(0,115,230,0.15);
  outline: none;
}

/* Textarea */
.wpcf7-textarea {
  min-height: 140px;
  resize: vertical;
}

/* Submit Button */
.wpcf7-submit {
  width: 100%;
  margin-top: 10px;
  padding: 16px 24px;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #0073e6, #00b4d8);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

.wpcf7-submit:hover {
  background: linear-gradient(135deg, #005fcc, #009dc2);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,115,230,0.25);
}

/* Success and Error Messages */
.wpcf7-response-output {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 15px;
  text-align: center;
}

.wpcf7-mail-sent-ok {
  background: #e6fff0;
  color: #0a7a2e;
  border: 1px solid #a2e8b3;
}

.wpcf7-validation-errors {
  background: #fff1f1;
  color: #d93025;
  border: 1px solid #f7b5b5;
}

/* Input spacing */
.wpcf7-form p {
  margin-bottom: 20px;
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .wpcf7 form {
    padding: 35px 22px;
    border-radius: 18px;
  }
  .wpcf7-submit {
    font-size: 16px;
    padding: 14px;
  }
}

/* ===== Ultra Modern Neumorphic Contact Form 7 Design ===== */

.wpcf7 form {
  background: #f6f8fb;
  border-radius: 25px;
  padding: 60px 50px;
  max-width: 720px;
  margin: 100px auto;
  box-shadow: 10px 10px 30px #d1d9e6, -10px -10px 30px #ffffff;
  border: none;
  position: relative;
  transition: all 0.4s ease;
}

/* Title */
.wpcf7 form h2 {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}

.wpcf7 form p.intro-text {
  text-align: center;
  color: #64748b;
  font-size: 15px;
  margin-bottom: 40px;
}

/* Labels */
.wpcf7-form label {
  display: block;
  color: #475569;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 15px;
}

/* Inputs, Select, Textarea */
.wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;
  padding: 14px 18px;
  border-radius: 15px;
  background: #f6f8fb;
  border: none;
  box-shadow: inset 5px 5px 10px #d1d9e6, inset -5px -5px 10px #ffffff;
  font-size: 15px;
  color: #334155;
  transition: all 0.3s ease;
}

.wpcf7-form-control::placeholder {
  color: #94a3b8;
}

/* Focus Effect */
.wpcf7-form-control:focus {
  box-shadow: inset 3px 3px 6px #d1d9e6, inset -3px -3px 6px #ffffff, 0 0 0 3px rgba(0,115,230,0.1);
  outline: none;
}

/* Textarea */
.wpcf7-textarea {
  min-height: 140px;
  resize: vertical;
}

/* Submit Button */
.wpcf7-submit {
  width: 100%;
  padding: 16px;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  border: none;
  border-radius: 15px;
  background: linear-gradient(135deg, #0073e6, #00b4d8, #38bdf8);
  box-shadow: 0 10px 20px rgba(0, 115, 230, 0.25);
  cursor: pointer;
  transition: all 0.3s ease;
}

.wpcf7-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(0, 115, 230, 0.35);
  background: linear-gradient(135deg, #005fcc, #00a0d0, #2196f3);
}

/* Success and Error Messages */
.wpcf7-response-output {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 15px;
  text-align: center;
}

.wpcf7-mail-sent-ok {
  background: #e8fff2;
  color: #0a7a2e;
  border: 1px solid #a2e8b3;
}

.wpcf7-validation-errors {
  background: #fff0f0;
  color: #d93025;
  border: 1px solid #f5b5b5;
}

/* Micro Hover Animation on Inputs */
.wpcf7-form-control:hover {
  transform: translateY(-1px);
}

/* Responsive Design */
@media (max-width: 600px) {
  .wpcf7 form {
    padding: 40px 25px;
    border-radius: 18px;
  }
  .wpcf7-submit {
    font-size: 16px;
    padding: 14px;
  }
}

I hope you liked these designs of Contact Form 7. If you like it, then definitely share our article with your friends and if you have anything to say about this, definitely comment in the comment box. We will try to answer your comments.